React Native SDK(v2) - Merchant's checkout
Please follow steps below to setup React Native SDK and start accepting payment via PortOne.
For initial SDK installation set up refer here
#
Access saved cards via React Native SDKImport the chaiport-sdk library
Initialize the checkout instance as below
Create the reference for checkout
Capture the mobile number and OTP to fetch the saved cards for a particular user. To generate the OTP, call the method as below:
Response: contains data, status
Status code :
200 - Success
400 - Failed due to incorrect OTP or wrong params passed
After successfully entered the OTP, the captured mobile number and OTP should pass to the fetchSavedCards as below to fetch the saved cards for the particular number.
formattedText: Contains mobile number with Country code. (eg: +16625655248 , +918341234123)
OTP: OTP that received to the particular number given.
response:
Success case
Failure case:
#
Initiate payment with a new credit card for a particular number:Collect the card details and pass them to startPaymentWithNewCard method as below:
Params:
cardDetails: Contains card name, card number, expiry month, expiry year and CVV
data
Response
Success case
Failure case:
#
Initiate payment with a saved credit card for a particular numberCollect the card details and pass them to the startPaymentWithSavedCard method as below:
Params:
cardDetails: Contains card name, card number, expiry month, expiry year and CVV
data
Response
Success case
Failure case:
#
Initial Setup for React native Project#
Enable deep linking in Android platform: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 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.
To accept the URIs that begin with “chaipay://checkout“
#
Enable deep linking in iOS platform:To add the URL schemes to the app, Go to ProjectSettings -> info
Add inside the URL types
In the URL schemes, give the name to accept the URIs that begin with (eg: “momo://, zalopay://“)
Should include the application URL schemes in info.plist
LSApplicationQueriesSchemes - Specifies the URL schemes you want the app to be able to use with the canOpenURL: method of the UIApplication class.
#
How to use the version-1 library?Add the library to the project.
Add the dependency in package.Json
Import the library as below:
Sample Payload containing the payment details:
Initialize the checkout instance as below:
Parameter Description Table
Parameter | Description |
---|---|
chaipayKey | chaipay unique key provided to merchants |
signature_hash | Signature calculated using this link |
merchantOrderId | Merchant order Id |
amount | Product amount (eg 100000) |
currency | Merchant currency used for transaction (eg. VND) |
orderDetails | Order Details (includes quantity, id, name, price) |
paymentChannel | Name of the payment channel (eg. MOMOPAY, ZALOPAY) |
paymentMethod | Payment Method to be used (eg. MOMOPAY_WALLET, ZALOPAY_WALLET) |
redirectUrl | Deep link of the merchant’s app (eg. chaiport://checkout) |
callbackFunction | returns the response payload after payment completion |
callBackFunction - returns the success and failure callback.
#
Initiate payment with a particular WalletCollect the Wallet and product details and pass them to the startPaymentwithWallets method as below:
Params:
data
Sample Response Payload:
Success callback :
Failure Callback:
Steps for Signature Hash Generation