Nhảy tới nội dung

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.

  1. Import the library as below:
import Checkout from 'chaiport-sdk';
  1. Initialize the checkout instance as below:
env={"dev"} //Optional
secretKey={SECRET_KEY} // Secret Key
chaipayKey={CHAIPAY_KEY} // chaipay key
  1. 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 =
  • 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"