RN Embed
Integrate with React Native SDK
You can use PortOne SDK to integrate the PortOne Payment Gateway with your React native Application.
Video Tutorial
Sample App
Check the sample app to integrate on GitHub
Prerequisites
- Create an account on PortOne
- Enable Payment Channels and Methods which you want to use
- Login to the portone portal where you can access the API Keys (client key and secret key) for integrations under Settings -> API tab.
Integration
Steps to integrate your React native application with PortOne React native SDK.
1. Enable deep link in iOS
-
To open your application, add the url schemes to the app, Go to ProjectSettings -> info
-
Add url schemes and identifier inside the URL types.
You can see the scheme and identifier details in info.plist as below:```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> ```
-
To open the other applications, should include the url schemes in info.plist
<key>LSApplicationQueriesSchemes</key> <array> <string>itms-appss</string> <string>zalopay</string> <string>line</string> <string>ascendmoney</string> </array>
LSApplicationQueriesSchemes - Specifies the URL schemes you want the app to be able to use with the canOpenURL: method of the UIApplication class.
-
To support HTTP connections, add this source code in app 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
-
To create a link to your app content, add an intent filter that contains these elements and attribute values in your AndroidManifest.xml:
-
Include theÂ
BROWSABLE
 category. It is required in order for the intent filter to be accessible from a web browser. Without it, clicking a link in a browser cannot resolve to your app.Also include theÂ
DEFAULT
 category. This allows your app to respond to implicit intents. Without this, the activity can be started only if the intent specifies your app component name.```java <category android:name="android.intent.category.DEFAULT" /> <category android:name="android.intent.category.BROWSABLE" />
To accept the URIs that begin with portone://checkout“
if redirectionUrl= "**portone://checkout"**
then host = "**checkout"**
`scheme = "**portone"**`
<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. Add following steps to use the librbary
-
Add .npmrc file to the project directory
-
In that file, add the following code and save it
@iamport-intl:registry=https://npm.pkg.github.com/ //npm.pkg.github.com/:_authToken=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
-
Go to project terminal, run the following code
npm install @iamport-intl/portone-sdk@latest
After successful installation, it will be shown in package.json under dependencies
-
Add peer dependencies
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. Have a setup to get JWT token from the server
On the server side, a JWT token must be constructed that accepts portoneKey as input. Further information on JWT token generation is described in the link below.
5. Generate Signture Hash
Generate a Signature Hash using HmacSHA256 which needs to be included in the payload.
createHash = (
key,
amount,
currency,
failureUrl,
merchantOrderId,
successUrl,
secretKey,
) => {
let mainParams =
'amount=' +
encodeURIComponent(amount) +
'&client_key=' +
encodeURIComponent(key) +
'¤cy=' +
encodeURIComponent(currency) +
'&failure_url=' +
encodeURIComponent(failureUrl) +
'&merchant_order_id=' +
encodeURIComponent(merchantOrderId) +
'&success_url=' +
encodeURIComponent(successUrl);
console.log('currency', currency);
let hash = HmacSHA256(mainParams, secretKey);
let signatureHash = Base64.stringify(hash);
return signatureHash;
};
6. Initialise PortOne RN SDK and authorise it.
- Import library of portone SDK
import {Checkout} from '@iamport-intl/chaiport-sdk';
- Initialize the checkout instance as below:
<Checkout
callbackFunction={this.afterCheckout}
redirectUrl={"chaiport://"}
environment={"sanbox"} //Optional
/>
Checkout using web
-
To get the payment link to use the SDK checkout UI, call the openCheckoutUI method from SDK as below:
let response = await helpers.getOTP(mobileNumber);
-
Web view response will be given back to the callbackFunction
afterCheckout = transactionDetails => { console.log('Response from webview', transactionDetails); // Do the needful };
Sample JWT Token
let jwtToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJDSEFJUEFZIiwic3ViIjoibHpyWUZQZnlNTFJPYWxsWiIsImlhdCI6MTYzMjM5MDkyMCwiZXhwIjoyNzMyMzkwOTIwfQ.IRgiM-zjAdJEVDuPSNfxmDszZQi_csE1q7xjVRvPvoc';
Sample Response
let response = await helpers.fetchSavedCards(
mobileNumber,
OTP
);
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
Payload
All of the web checkout request's parameters are listed here, along with the appropriate data type.
Parameters | Data Type | |
---|---|---|
portOneKey | String | mandatory |
merchantDetails | object | |
merchantOrderId | String | mandatory |
signatureHash | String | mandatory |
amount | Double | mandatory |
currency | String | mandatory |
countryCode | String | mandatory |
billingDetails | object | Optional |
shippingDetails | object | Optional |
orderDetails | array | Optional |
successUrl | String | mandatory |
failureUrl | String | mandatory |
expiryHours | Int | mandatory |
source | String | mandatory |
description | String | Optional |
showShippingDetails | Boolean | Optional |
showBackButton | Boolean | Optional |
defaultGuestCheckout | Boolean | Optional |
isCheckoutEmbed | Boolean | Optional |
redirectUrl | String | mandatory |
environment | String | mandatory |
**MerchantDetails**
Parameters | Data Type | |
---|---|---|
name | String | Optional |
logo | String | Optional |
back_url | String | Optional |
promo_code | String | Optional |
promoD_discount | Int | Optional |
shipping_charges | Double | Optional |
**BillingDetails**
Parameters | Data Type | |
---|---|---|
shipping_name | String | Optional |
shipping_email | String | Optional |
shipping_phone | String | Optional |
shipping_address | Object | Optional |
**ShippingDetails**
Parameters | Data Type | |
---|---|---|
billing_name | String | Optional |
billing_email | String | Optional |
billing_phone | String | Optional |
billing_address | Object | Optional |
**Address**
Parameters | Data Type | |
---|---|---|
city | String | Optional |
country_code | String | Optional |
locale | String | Optional |
line_1 | String | Optional |
line_2 | String | Optional |
postal_code | String | Optional |
state | String | Optional |
**OrderDetail**
Parameters | Data Type | |
---|---|---|
id | String | Optional |
price | Double | Optional |
name | String | Optional |
quantity | Int | Optional |
image | String (in the form of web url) | Optional |
Probable Errors:
INVALID_UNAUTHORIZED_JWT_TOKEN_ERROR
INVALID_UNAUTHORIZED_JWT_TOKEN_ERROR
- Check whether PortOne Key and the Secret Key are of the same account
- Check whether the Secret Key is not modified
- Check whether
Bearer
keyword is added before the generated token with a white space.Bearer $jwtToken
- Verify if the expiration time should be greater than the current time
INVALID_UNAUTHORISED_TRANSACTION_SIGNATURE_ERROR
INVALID_UNAUTHORISED_TRANSACTION_SIGNATURE_ERROR
- Check whether all params match with the payload/request
- Check whether the portone key match with the payload and the account
INVALID_UNAUTHORISED_TRANSACTION_IAMPORTKEY_ERROR
INVALID_UNAUTHORISED_TRANSACTION_IAMPORTKEY_ERROR
- Check whether the portone key match with the payload and the account
INVALID_PAYMENT_CHANNEL
INVALID_PAYMENT_CHANNEL
- Make sure the payment channels and payment methods which are added in the payload are enable from the portone portal
INVALID_ENVIRONMENT
INVALID_ENVIRONMENT
- Make sure you have added environment either
sandbox
orlive
Summation of order value, tax, duties, shipping and discount is equal to amount
Summation of order value, tax, duties, shipping and discount is equal to amount
- If items are provided then please verify the values provided should match the total amount:Â
sum(items price * items quantity) + shipping charge - discount = amount
- Mandatory params in payload:
price
promo_discount (0 is also acceptable)
shipping_charges (0 is also acceptable)
Updated 12 days ago