React Native SDK - Embed(V3)

1. Overview

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. Integrate the PortOne React Native SDK to start accepting payments via PortOne.

2. 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

3. Sample App

Check out the sample app for integration on GitHub.

4. 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.

5. Integration Steps

5.1. Configure iOS for Deep Linking

1. Update info.plist

   • Add URL schemes

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

   • Add URL schemes for other apps

     <key>LSApplicationQueriesSchemes</key>

     <array>

     <string>itms-appss</string>

     <string>zalopay</string>

     <string>line</string>

     <string>ascendmoney</string>

     </array>

   • Enable HTTP connections

     <key>NSAppTransportSecurity</key>

     <dict>

     <key>NSAllowsArbitraryLoads</key>

     <true/>

     <key>NSAllowsLocalNetworking</key>

     <true/>

     <key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>

     <true/>

     </dict>

5.2. Configure Android for Deep Linking

1. Update AndroidManifest.xml

   • Add intent filter

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

5.3. Install the SDK

1. Create .npmrc File

   Add the following to the .npmrc file in your project directory

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

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

2. Install SDK and Dependencies

   Run the following commands in your project terminal

   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

5.4. Obtain JWT Token

1. Generate JWT Token

   Implement server-side logic to generate a JWT token using portoneKey.

2. Retrieve Token in iOS

   Implement logic in your iOS app to fetch and securely store the JWT token.

   JWT Authentication Guide

5.5. Generate Signature Hash

1. Generate Signature

   Use HmacSHA256 to create a signature hash for your payload.

   Signature Guide

5.6. Initialize PortOne SDK

1. Import SDK

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

2. Initialize Checkout

   <Checkout

   callbackFunction={this.afterCheckout}

   redirectUrl={"chaiport://"}

   environment={"sandbox"} // Optional

   />

---

6. Checkout Using Web (v3)

PortOne's web checkout simplifies the integration by handling the payment UI within the SDK.

1. Open Checkout UI

   Checkout.openWebCheckoutUI(payload, JWTToken);

2. Handle Response

   afterCheckout = transactionDetails => {

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

   // Handle response

   };

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 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"

  }

---

7. Troubleshooting

• INVALID_UNAUTHORIZED_JWT_TOKEN_ERROR

  • Verify PortOne Key and Secret Key.
  • Ensure JWT token starts with Bearer.

• INVALID_UNAUTHORIZED_TRANSACTION_SIGNATURE_ERROR

  • Confirm payload parameters and PortOne Key match.

• INVALID_UNAUTHORIZED_TRANSACTION_IAMPORTKEY_ERROR

  • Check PortOne Key alignment.

• INVALID_PAYMENT_CHANNEL

  • Verify payment channels and methods are enabled.

• INVALID_ENVIRONMENT

  • Ensure environment is set to sandbox or live.

• Order Value Mismatch

  • Confirm total amount matches the sum of items, shipping charges, and discounts.

---

For further assistance, refer to the official documentation or contact support