React Native SDK(v3) - Checkout

Please follow steps below to setup React Native SDK and start accepting payment via PortOne.

For initial SDK installation set up refer here

React Native Payment SDK v3#

Included the SDK checkout UI in the Mobile SDK.

Import the library as below:

import Checkout from 'chaiport-sdk';

Initialize the checkout instance as below:

<Checkout
          ref={this.checkout}
          env={"dev"}         //Optional
          callbackFunction={this.afterCheckout}
          redirectUrl={"chaiport://"}
                    secretKey={SECRET_KEY} // Secret Key
          chaipayKey={CHAIPAY_KEY} // chaipay key
/>

Create the reference for checkout

constructor(props) {
    this.checkout = React.createRef();
}

To create the payment link, generate the JWT token

Generate the JWT token:

create the JWT token using the payload and portone secretKey
- payload:
  var payload = {
  iss: 'CHAIPAY',
  sub: 'lzrYFPfyMLROallZ',
  iat: new Date().getTime(),
  exp: new Date().getTime() + 100 * 1000,
  };
  
  // Secret key of your domain
  var secretKey =
  '0e94b3232e1bf9ec0e378a58bc27067a86459fc8f94d19f146ea8249455bf242';
  Details
Algorithm to use for generating token - “HS256”

To get the payment link to use the SDK checkout UI, call the openCheckoutUI method from SDK as below:

this.checkout.current.openCheckoutUI(config, jwtToken);

Sample Payload:

let payload = {
      chaipayKey: 'SglffyyZgojEdXWL',
      merchantDetails: {
        name: 'PortOne',
        logo: 'https://upload.wikimedia.org/wikipedia/commons/a/a6/Logo_NIKE.svg',
        back_url: 'https://demo.chaipay.io/checkout.html',
        promo_code: 'Downy350',
        promo_discount: 0,
        shipping_charges: 0.0,
      },
      merchantOrderId: 'MERCHANT' + new Date().getTime(),
      signatureHash: 'flDFcPNx4pASRWonw52s0Sec3ee1PJQrdTklDrZGjq0=',
      amount: totalAmount,
      currency: 'VND',
      countryCode: 'VN',
      billingAddress: {
        billing_name: 'Test',
        billing_email: 'markweins@gmail.com',
        billing_phone: '9998878788',
        billing_address: {
          city: 'VND',
          country_code: 'VN',
          locale: 'en',
          line_1: 'address',
          line_2: 'address_2',
          postal_code: '400202',
          state: 'Mah',
        },
      },
      shippingAddress: {
        shipping_name: 'xyz',
        shipping_email: 'xyz@gmail.com',
        shipping_phone: '1234567890',
        shipping_address: {
          city: 'abc',
          country_code: 'VN',
          locale: 'en',
          line_1: 'address_1',
          line_2: 'address_2',
          postal_code: '400202',
          state: 'Mah',
        },
      },
      orderDetails: orderDetails,
      successUrl: 'chaiport://checkout',
      failureUrl: 'chaiport://checkout',
      mobileRedirectUrl: 'chaiport://checkout',
      expiryHours: 2,
      source: 'api',
      description: 'test',
      showShippingDetails: true,
      showBackButton: false,
      defaultGuestCheckout: false,
      isCheckoutEmbed: false,
    };

Sample JWT token:

let jwtToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJDSEFJUEFZIiwic3ViIjoibHpyWUZQZnlNTFJPYWxsWiIsImlhdCI6MTYzMjM5MDkyMCwiZXhwIjoyNzMyMzkwOTIwfQ.IRgiM-zjAdJEVDuPSNfxmDszZQi_csE1q7xjVRvPvoc';

Web view response will be given back to the callbackFunction

afterCheckout = transactionDetails => {
    console.log('Response from webview', transactionDetails);
    // Do the needful
  };

Sample response :

Success Case
{
"is_success": "true",
"status_code": "2000",
"status_reason": "SUCCESS",
"merchant_order_ref": "MERCHANT1234567890",
"channel_order_ref": "PAY-FylBOXjbTMmH52CCNI4OFw"
}
Failure case
{
"is_success": "false",
"message": "Received error from Baokim Server: customer_phone=>The customer phone format is invalid., ",
"status_code": "5000",
"status_reason": "PAYMENT_SYSTEM_ERROR"
}