React Native SDK - Connect(V2)

Integrate the PortOne React Native SDK to start accepting payments via PortOne.

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.

Video Tutorial

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

Watch Video Tutorial

Sample App

Check out the sample app for integration 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

1. Enable Deep Link in iOS

1. Add URL schemes and identifier in info.plist

   <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

   <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

   <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

   <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

   @iamport-intl:registry=https://npm.pkg.github.com/

   //npm.pkg.github.com/:_authToken=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

2. Install the SDK and peer dependencies

   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

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

2. Initialize the checkout instance

   <Checkout

   callbackFunction={this.afterCheckout}

   redirectUrl={"chaiport://"}

   environment={"sandbox"} // Optional

   />

Payment Methods

New Credit Card Payment

1. Collect card details and use the startPaymentWithNewCard method

   let response = await Checkout.startPaymentWithNewCard(

   cardDetails,

   payload,

   JWTToken,

   clientKey,

   customerUUID,

   subMerchantKey

   );

2. Handle the web view response in afterCheckout

   afterCheckout = transactionDetails => {

   console.log('Response from webview', transactionDetails);

   };

Saved Card Payment

1. Use the startPaymentWithSavedCard method

   let response = await Checkout.startPaymentWithSavedCard(

   cardDetails,

   payload,

   JWTToken,

   clientKey

   );

Wallet Payment

1. Use the startPaymentWithWallets method

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

Non-Tokenized Payment

1. Use the startPaymentWithoutTokenization method

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

Fetch Available Payment Methods

1. Use the getAvailablePaymentMethods method

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

Merchant-Centric Card Vault

1. Add Card for Customer

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

2. Delete Card for Customer

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

3. Fetch Customer Cards

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

4. Add Customer

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

5. Get Customer Data

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

Failover Routing

1. Enable failover routing in payload

   let payload = getDefaultPayload();

   payload.isRoutingEnabled = true;

   payload.routingParams = {

   type: "failover",

   routeRef: "1233"

   };

2. Fetch list of routes

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

PreAuth and Capture Payment

1. Pre-Authorization

   let payload = getDefaultPayload();

   payload.transactionType = "PREAUTH";

2. Capture Payment

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

Payload Parameters

Parameter	Data Type	Mandatory
portOneKey	String	Yes
merchantDetails	Object	No
merchantOrderId	String	Yes
signatureHash	String	Yes
amount	Double	Yes
currency	String	Yes
countryCode	String	Yes
billingDetails	Object	No
shippingDetails	Object	No
orderDetails	Array	No
successUrl	String	Yes
failureUrl	String	Yes
expiryHours	Int	Yes
source	String	Yes
description	String	No
showShippingDetails	Boolean	No
showBackButton	Boolean	No
defaultGuestCheckout	Boolean	No
isCheckoutEmbed	Boolean	No
redirectUrl	String	Yes
environment	String	Yes

MerchantDetails

Parameter	Data Type	Optional
name	String	Yes
logo	String	Yes
returnUrl	String	Yes
merchantId	String	No

| mcc | String | No |

OrderDetails

Parameter	Data Type	Optional
title	String	Yes
description	String	Yes
quantity	Int	Yes
price	Double	Yes

BillingDetails

Parameter	Data Type	Optional
address	String	Yes
city	String	Yes
country	String	Yes
postalCode	String	Yes
phone	String	Yes

ShippingDetails

Parameter	Data Type	Optional
address	String	Yes
city	String	Yes
country	String	Yes
postalCode	String	Yes
phone	String	Yes

Support

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