RN Connect

Integrate with React Native SDK

The PortOne React Native SDK allows merchants to seamlessly integrate the PortOne Payment Gateway into their React Native applications, enabling secure and efficient payment processing.

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

For a detailed guide on integrating the PortOne iOS SDK and using a payment method flow, refer to the following video tutorial

---

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. Enable Deep Link in iOS

1. Add URL schemes and identifier in info.plist

   XML

   <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. Include URL schemes in info.plist to open other applications

   XML

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

3. Add HTTP connection support in info.plist

   XML

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

2. Enable Deep Link in Android

1. Add an intent filter in AndroidManifest.xml

   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>
   

3. Install the SDK

1. Add .npmrc file to the project directory

   plaintext

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

2. Install the SDK and peer dependencies

   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
   

4. Obtain JWT Token

1. Generate a JWT token using portoneKey on the server.

2. Retrieve and store the JWT token securely in your iOS app.

   For more details, refer to Authentication | PortOne.

5. Generate Signature Hash

Generate a Signature Hash using HmacSHA256 for inclusion in the payload. For details, refer to Payment Request | PortOne.

6. Initialize PortOne RN SDK

1. Import the SDK library

   JSX

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

2. Initialize the checkout instance

   JSX

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

Payment Methods

New Credit Card Payment

1. Collect card details and use the startPaymentWithNewCard method

   JSX

   let response = await Checkout.startPaymentWithNewCard(
       cardDetails,
       payload,
       JWTToken,
       clientKey,
       customerUUID,
       subMerchantKey
   );
   

2. Handle the web view response in afterCheckout

   JSX

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

Saved Card Payment

1. Use the startPaymentWithSavedCard method

   JSX

   let response = await Checkout.startPaymentWithSavedCard(
       cardDetails,
       payload,
       JWTToken,
       clientKey
   );
   

Wallet Payment

1. Use the startPaymentWithWallets method

   JSX

   let data = await Checkout.startPaymentWithWallets(payload, subMerchantKey);
   

Non-Tokenized Payment

1. Use the startPaymentWithoutTokenization method

   JSX

   let data = await Checkout.startPaymentWithoutTokenization(newPayload, subMerchantKey);
   

Fetch Available Payment Methods

1. Use the getAvailablePaymentMethods method

   JSX

   let data = await Checkout.getAvailablePaymentMethods(portOneKey, currency, subMerchantKey);
   

Merchant-Centric Card Vault

The Merchant Centric Card Vault operates by enrolling merchants initially, followed by adding customers specific to each merchant. Cards are then saved based on individual customers, ensuring a personalized and secure card storage system. Several methods are available to facilitate various operations within this card vault setup.

1. addCardForCustomer
2. deleteCardForCustomerId
3. fetchCustomerCards
4. addCustomer
5. getCustomerData

1. Add Card for Customer

   JSX

   let data = await helpers.addCardForCustomerId(customerId, clientKey, JWTToken, cardData, subMerchantKey);
   

2. Delete Card for Customer

   JSX

   let data = await helpers.deleteCardForCustomerId(customerId, clientKey, JWTToken, cardData, subMerchantKey);
   

3. Fetch Customer Cards

   JSX

   let data = await helpers.fetchCustomerCards(customerId, clientKey, JWTToken, subMerchantKey);
   

4. Add Customer

   JSX

   let data = await helpers.addCustomer(customerData, clientKey, JWTToken, subMerchantKey);
   

5. Get Customer Data

   JSX

   let data = await helpers.getCustomerData(customerID, clientKey, JWTToken);
   

Failover Routing

Failover routing is a functionality designed to ensure seamless credit card payment processing. This feature allows the configuration of primary and secondary payment channels through the admin portal. If a payment attempt using the primary channel fails for any reason, the system automatically redirects the user to the secondary payment channel.

To support failover routing add the following two parameters to payload:

• isRoutingEnabled= true
• Routing Param type should be failover.

1. Enable failover routing in payload

   JSX

   let payload = getDefaultPayload();
   payload.isRoutingEnabled = true;
   payload.routingParams = {
       type: "failover",
       routeRef: "1233"
   };
   

2. Fetch list of routes

   JSX

   let data = await helpers.fetchRoutes(clientKey, JWTToken);
   

PreAuth and Capture Payment

During Pre-authorization, the transaction is initially approved, and at a later time or within specified days, the payment can be processed using the Capture API.

To designate a transaction for pre-authorization, a specific parameter must be configured in the payload:

transactionType= PREAUTH || PURCHASE

1. Pre-Authorization

   JSX

   let payload = getDefaultPayload();
   payload.transactionType = "PREAUTH";
   

2. Capture Payment

   JSX

   let data = await helpers.captureTransactionAPI(transactionOrderRef, clientKey, JWTToken);
   

Payload Parameters

MerchantDetails

OrderDetails

BillingDetails

ShippingDetails

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)

Support

For additional support or questions, please contact the PortOne support team.