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

Import the chaiport-sdk library
import Checkout from 'chaiport-sdk';
Initialize the checkout instance as below
<Checkout
ref={this.checkout}
env={"dev"} //Optional
callbackFunction={this.afterCheckout}
redirectUrl={"chaiport://"}
/>
Create the reference for checkout
constructor(props) {
this.checkout = React.createRef();
}
Capture the mobile number and OTP to fetch the saved cards for a particular user. To generate the OTP, call the method as below:
let response = await this.checkout.current.getOTP(this.state.formattedText);
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.
let response = await this.checkout.current.fetchSavedCards(
formattedText,
OTP
);
formattedText: Contains mobile number with Country code. (eg: ⁨‭+16625655248 , +918341234123)
OTP: OTP that received to the particular number given.
response:
Success case
{
"data": [
{
"token": "5ff6644dec554fdc8f6d2e161a0c662d",
"partial_card_number": "450875******1019",
"expiry_month": "05",
"expiry_year": "2021",
"type": "visa"
},
{
"token": "5ff6644dec554fdc8f6d2e161a0c662d",
"partial_card_number": "450875******1019",
"expiry_month": "05",
"expiry_year": "2021",
"type": "visa"
}
],
"status": 200,
}
Failure case:
{
"message": "OTP is a required Query Param!",
"status": 400,
}

Initiate payment with a new credit card for a particular number:#

Collect the card details and pass them to startPaymentWithNewCard method as below:
let response = await this.checkout.current.startPaymentWithNewCard(
cardDetails,
data,
);
- Params:
  - cardDetails: Contains card name, card number, expiry month, expiry year and CVV
    {
    card_number: "";
    expiry_year: "";
    expiry_month: "";
    cvv: "";
    card_holder_name: ""
    }
  - data
    {
    chaipayKey: "lzrYFPfyMLROallZ",
    paymentChannel: "MASTERCARD",
    paymentMethod: `MASTERCARD_CARD`,
    merchantOrderId: "MERCHANT" + new Date().getTime(),
    amount: totalAmount,
    currency: "INR",
    successUrl: "https://demo.portone.cloud",
    failureUrl: "https://demo.portone.cloud",
    signature_hash: "123",
    billingAddress: {
    billing_phone: mobileNumber,
    },
    }
- Response
  - Success case
    {
    "data": {
    "is_success": "true",
    "redirect_url": "",
    "channel_order_ref": "1xAEm5eZ4sbhzqaPEIV4tVoAXMm",
    "merchant_order_ref": "MERCHANT1629789647638",
    "order_ref": "1xAEm5eZ4sbhzqaPEIV4tVoAXMm",
    "message": "",
    "deep_link": "",
    "additional_data": null
    },
    "status": 200,
    }
  - Failure case:
    {
    "data": {
    "is_success": "false",
    "redirect_url": "",
    "channel_order_ref": "1xAFIwrpWxarXuHGu3PMe0syPg0",
    "merchant_order_ref": "MERCHANT1629789909578",
    "order_ref": "1xAFIwrpWxarXuHGu3PMe0syPg0",
    "message": "",
    "deep_link": "",
    "additional_data": null
    },
    "status": 400,
    }

Initiate payment with a saved credit card for a particular number#

Collect the card details and pass them to the startPaymentWithSavedCard method as below:
let response = await this.checkout.current.startPaymentWithSavedCard(
cardDetails,
data,
);
- Params:
  - cardDetails: Contains card name, card number, expiry month, expiry year and CVV
    {
    partial_card_number: "";
    expiry_year: "";
    expiry_month: "";
    cardType: "";
    token: ""
    }
  - data
    {
    chaipayKey: "lzrYFPfyMLROallZ",
    paymentChannel: "MASTERCARD",
    paymentMethod: `MASTERCARD_CARD`,
    merchantOrderId: "MERCHANT" + new Date().getTime(),
    amount: totalAmount,
    currency: "INR",
    successUrl: "https://demo.portone.cloud",
    failureUrl: "https://demo.portone.cloud",
    signature_hash: "123",
    billingAddress: {
    billing_phone: mobileNumber,
    },
    }
- Response
  - Success case
    {
    "data": {
    "is_success": "true",
    "redirect_url": "",
    "channel_order_ref": "1xAEm5eZ4sbhzqaPEIV4tVoAXMm",
    "merchant_order_ref": "MERCHANT1629789647638",
    "order_ref": "1xAEm5eZ4sbhzqaPEIV4tVoAXMm",
    "message": "",
    "deep_link": "",
    "additional_data": null
    },
    "status": 200,
    }
  - Failure case:
    {
    "data": {
    "is_success": "false",
    "redirect_url": "",
    "channel_order_ref": "1xAFIwrpWxarXuHGu3PMe0syPg0",
    "merchant_order_ref": "MERCHANT1629789909578",
    "order_ref": "1xAFIwrpWxarXuHGu3PMe0syPg0",
    "message": "",
    "deep_link": "",
    "additional_data": null
    },
    "status": 400,
    }

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.
```jsx
<category android:name="android.intent.category.DEFAULT" />
<category android:name="android.intent.category.BROWSABLE" />
```
To accept the URIs that begin with “chaipay://checkout“
<data android:scheme="chaiport"
android:host="checkout" />
<data android:scheme="zalopay"
android:host="pay" />
<data android:scheme="momo"
android:host="pay" />

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:
import Checkout from 'chaiport-sdk';
Sample Payload containing the payment details:
var payload = {
chaipayKey: "lzrYFPfyMLROallZ",
paymentChannel: ZALOPAY,
paymentMethod: ZALOPAY_WALLET,
merchantOrderId: 'MERCHANT1628666326578',
amount: 4499999,
currency: "VND",
signature_hash:"+qGV+YhWEituu7Cf0coqdEgLtcH6qWKXXMDLI2jhxQU=",
orderDetails: [
{
"id": "knb",
"name": "kim nguyen bao",
"price": 4499999,
"quantity": 1
}
],
billingAddress: {
billing_name: "Test mark",
billing_email: "markweins@gmail.com",
billing_phone: "+919998878788",
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",
},
},
};
Initialize the checkout instance as below:
<Checkout
ref={this.checkout}
env={"dev"}
callbackFunction={this.afterCheckout}
redirectUrl={"chaiport://checkout"}
/>

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

Collect the Wallet and product details and pass them to the startPaymentwithWallets method as below:
let response = await Checkout.startPaymentwithWallets(data);
Params:
- data
```jsx
{
chaipayKey: "lzrYFPfyMLROallZ",
paymentChannel: "VNPAY",
paymentMethod: "VNPAY_ALL",
merchantOrderId: "MERCHANT" + new Date().getTime(),
amount: totalAmount,
currency: "VND",
successUrl: "https://demo.portone.cloud",
failureUrl: "https://demo.portone.cloud",
signature_hash: "123",
secretKey: 0e94b3232e1bf9ec0e378a58bc27067a86459fc8f94d19f146ea8249455bf242,
billingAddress: {
billing_phone: mobileNumber,
},
}
```
  Sample Response Payload:
  Success callback :
  {
  "chaipay_order_ref": "1wc00XMK4uKy3EeYBAvRPlkfjkZ",
  "channel_order_ref": "210812000000171",
  "merchant_order_ref": "MERCHANT1628742344516",
  "status": "Success",
  "status_code": "2000",
  "status_reason": "SUCCESS"
  }
  Failure Callback:
  {
  "chaipay_order_ref": "1wa0choxhAy2QtE9ix8aNt8T3Mf",
  "channel_order_ref": "0",
  "merchant_order_ref": "MERCHANT1628681469666",
  "status": "Initiated",
  "status_code": "4000",
  "status_reason": "INVALID_TRANSACTION_ERROR"
  }
Steps for Signature Hash Generation
createHash: (
key,
amount,
currency,
failureUrl,
merchantOrderId,
successUrl,
secretKey,
) => {
let mainParams =
'amount=' +
encodeURIComponent(amount) +
'&client_key=' +
encodeURIComponent(key) +
'&currency=' +
encodeURIComponent(currency) +
'&failure_url=' +
encodeURIComponent(failureUrl) +
'&merchant_order_id=' +
encodeURIComponent(merchantOrderId) +
'&success_url=' +
encodeURIComponent(successUrl);

let hash = HmacSHA256(mainParams, secretKey);
let signatureHash = Base64.stringify(hash);

return signatureHash;
}