The PortOne react native SDK offers merchants a seamless way to integrate the PortOne Payment Gateway into their react native applications, enabling them to accept payments securely and efficiently. This SDK serves as a bridge between a merchant's app and the PortOne Payment Gateway, providing a comprehensive set of features tailored specifically for handling payment transactions.

Follow the below steps to integrate the PortOne react native SDK with your react native Application.

Video Tutorial

The following video tutorials provide a detailed guide on integrating the PortOne iOS SDK and using one of the payment method flow with your application to enable seamless payment processing:

Sample App

Check the sample app to integrate on GitHub

Prerequisites

1. Create a PortOne Account

   • Sign up on PortOne to access services and functionalities.

2. Access API Keys

   • Log in to the PortOne portal to obtain API Keys (client key and secret key) under Settings -> API tab.

3. Enable Payment Channels and Methods

   • Customize and enable payment channels and methods as per your requirements.

4. React Native Application

   • Ensure you have a React Native application ready for SDK integration.

Integration

Steps to integrate your React native application with PortOne React native SDK.

1. Configure iOS for Deep Linking

1. To open your application, add the url schemes to the app, Go to info.plist and add it in source code

   JSON

   
   <key>CFBundleURLTypes</key>
   <array>
   		<dict>
   			<key>CFBundleTypeRole</key>
   			<string>Editor</string>
   			<key>CFBundleURLName</key>
   			<string>checkout</string>
   			<key>CFBundleURLSchemes</key>
   			<array>
   				<string>portone</string>
   			</array>
   		</dict>
   	</array>
   
   

2. To open the other applications, should include the url schemes in info.plist

   JSON

   <key>LSApplicationQueriesSchemes</key>
   	<array>
   		<string>itms-appss</string>
   		<string>zalopay</string>
   		<string>line</string>
   		<string>ascendmoney</string>
   	</array>
   

3. To support HTTP connections, add this source code in app info.plist

   JSON

   <key>NSAppTransportSecurity</key>
   	<dict>
   		<key>NSAllowsArbitraryLoads</key>
   		<true/>
   		<key>NSAllowsLocalNetworking</key>
   		<true/>
   		<key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
   		<true/>
   	</dict>
   

2. Configure Android for Deep Linking

1. Update AndroidManifest.xml

   - Add intent filter
   
       ```xml
       <intent-filter>
           <action android:name="android.intent.action.VIEW" />
           <category android:name="android.intent.category.DEFAULT" />
           <category android:name="android.intent.category.BROWSABLE" />
           <data android:host="checkout" android:scheme="portone" />
       </intent-filter>
       ```
   

   if redirectionUrl= "**portone://checkout"**then host = "**checkout"** and schema = "**portone**"

3. Install the SDK

1. Create .npmrc File
   Add the following to the .npmrc file in your project directory

   Text

   @iamport-intl:registry=https://npm.pkg.github.com/
   //npm.pkg.github.com/:_authToken=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
   

   Install SDK and Dependencies
   Run the following commands in your project terminal

   Bash

   npm install @iamport-intl/portone-sdk@latest
   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
   

2. JSX

   @iamport-intl:registry=https://npm.pkg.github.com/
   //npm.pkg.github.com/:_authToken=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
   

3. Go to project terminal, run the following code

   JSX

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

   After successful installation, it will be shown in package.json under dependencies

4. Add peer dependencies

   JSX

   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
   

4. Get JWT token from the server

To set up the process of obtaining a JWT token from the server, you need to construct a JWT token that accepts the portoneKey as input. Here's an outline of the steps involved in setting up this process:

1. JWT Token Construction:

   Implement the server-side logic to generate a JWT token using the portoneKey as a key component of the token payload.

2. Token Retrieval in iOS App:

   • Implement logic in your iOS application to make a server request to retrieve the JWT token using the portoneKey.
   • Receive and store the returned token securely within the app for subsequent API authentication.

Further information on JWT token generation is described in the link below.

Authentication | PortOne

5. Generate Signture Hash

• Generate a Signature Hash using HmacSHA256 which needs to be included in the payload.
• To generate a signature hash on the server side using a secret key follow the below steps.

Payment Request | PortOne

6. Initialise PortOne RN SDK and authorise it.

1. Import library of portone SDK

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

1. Initialize the checkout instance as below:

<Checkout
          callbackFunction={this.callbackFunction}
          redirectUrl={"portone://"}
          environment={"sanbox"} //Optional
/>

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

Checkout using web (Embed)

PortOne's Checkout offers a streamlined integration experience, simplifying the process for merchants. This variant involves calling a single method with the essential payload, which results in the PortOne SDK opening a webpage seamlessly. By handling the user interface within the SDK, merchants can focus on the payment flow without concerns about UI intricacies.

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

   JavaScript

   Checkout.openWebCheckoutUI(payload, JWTToken);
   

2. Web view response will be given back to the callbackFunction

   JavaScript

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

Sample JWT Token

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

Sample Payload Response

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: '[email protected]',
        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: '[email protected]',
        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 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"
}

Payload

All of the web checkout request's parameters are listed here, along with the appropriate data type.

**MerchantDetails**

**BillingDetails**

**ShippingDetails**

**Address**

**OrderDetail**

Probable Errors

INVALID_UNAUTHORIZED_JWT_TOKEN_ERROR

1. Check whether PortOne Key and the Secret Key are of the same account
2. Check whether the Secret Key is not modified
3. Check whether Bearer keyword is added before the generated token with a white space. Bearer $jwtToken
4. Verify if the expiration time should be greater than the current time

INVALID_UNAUTHORISED_TRANSACTION_SIGNATURE_ERROR

1. Check whether all params match with the payload/request
2. Check whether the portone key match with the payload and the account

INVALID_UNAUTHORISED_TRANSACTION_IAMPORTKEY_ERROR

1. Check whether the portone key match with the payload and the account

INVALID_PAYMENT_CHANNEL

1. Make sure the payment channels and payment methods which are added in the payload are enable from the portone portal

INVALID_ENVIRONMENT

1. Make sure you have added environment either sandbox or live

Summation of order value, tax, duties, shipping and discount is equal to amount

1. If items are provided then please verify the values provided should match the total amount: sum(items price * items quantity) + shipping charge - discount = amount
2. Mandatory params in payload:

price
promo_discount       (0 is also acceptable)
shipping_charges     (0 is also acceptable)