Skip to main content

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

  1. After inital setup, Install the package

    npm install @iamport-intl/portone-sdk@latest

  2. Add peer dependencies

    npm install @react-native-async-storage/async-storage
    npm install react-native-localization
    npm install react-native-webview
    npm install react-native-linear-gradient
    npm install react-native-rsa-native

Included the SDK checkout UI in the Mobile SDK.

  1. Import the library as below:

    import {Checkout} from '@iamport-intl/chaiport-sdk';

  2. Initialize the checkout instance as below:

    <Checkout
    callbackFunction={this.afterCheckout}
    redirectUrl={"chaiport://"}
    env={"dev"} //Optional
    environment={"sanbox"} //Optional
    />

  3. 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', // portone key
      iat: new Date().getTime(), //Current time stamp
      exp: new Date().getTime() + 100 * 1000, //expiry time stamp
      };
      // Secret key of your domain
      var secretKey =
      '0e94b3232e1bf9ec0e378a58bc27067a86459fc8f94d19f146ea8249455bf242';

  • 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:

Checkout.openWebCheckoutUI(payload, JWTToken);

Sample Payload:

let payload = {
portOneKey: '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"
    }