Skip to main content

RN: PaymentSDK Initial setup

Enable deep linking in ANDROID:

  1. To create a link to your app content, add an intent filter that contains these elements and attribute values in your AndroidManifest.xml:
    1. 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.

      <category android:name="android.intent.category.DEFAULT" />
      <category android:name="android.intent.category.BROWSABLE" />
    2. To accept the URIs that begin with ÔÇťchaipay://checkoutÔÇť

      <data android:scheme="chaipay"
      android:host="checkout" />
      <data android:scheme="zalopay"
      android:host="pay" />
      <data android:scheme="momo"
      android:host="pay" />

Enable deep linking in iOS:

  1. To add the url schemes to the app, Go to ProjectSettings -> info

    RN%20PaymentSDK%20Initial%20setup%20146fb00374014808aa63afd2ceca5721/Screenshot_2021-08-11_at_4.45.54_PM.png

  2. Add inside the URL types

    RN%20PaymentSDK%20Initial%20setup%20146fb00374014808aa63afd2ceca5721/Screenshot_2021-08-11_at_5.15.07_PM.png

  1. Should include the application url schemes in info.plist

RN%20PaymentSDK%20Initial%20setup%20146fb00374014808aa63afd2ceca5721/Screenshot_2021-08-11_at_7.48.36_PM.png

LSApplicationQueriesSchemes - Specifies the URL schemes you want the app to be able to use with the canOpenURL: method of the UIApplication class.

To use the library:

  1. Add .npmrc file to the project
  • In that file, add the following code and save it Screenshot 2022-05-09 at 4.49.31 PM.png
@iamport-intl:registry=https://npm.pkg.github.com/
//npm.pkg.github.com/:_authToken=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

Screenshot 2022-05-09 at 4.49.56 PM.png

  1. Go. to project terminal, run the following code
npm install @iamport-intl/chaipay-sdk@latest

After successful installation, it will be shown in package.json under dependencies

Screenshot 2022-05-09 at 4.50.21 PM.png

  1. Import the library as below:
import Checkout from 'chaipay-sdk';
  1. Sample Payload containing the payment details:
var payload = {
"key": "lzrYFPfyMLROallZ",
"pmt_channel": ZALOPAY,
"pmt_method": ZALOPAY_WALLET,
"merchant_order_id": 'MERCHANT1628666326578',
"amount": 4499999,
"currency": "VND",
"signature_hash":"+qGV+YhWEituu7Cf0coqdEgLtcH6qWKXXMDLI2jhxQU=",
"order_details": [
{
"id": "knb",
"name": "kim nguyen bao",
"price": 4499999,
"quantity": 1
}
],
};
  1. Initialise the checkout instance as below:
<Checkout
ref={this.checkout}
env={"dev"} //Optional
callbackFunction={this.afterCheckout}
redirectUrl={"chaiport://"}
secretKey={SECRET_KEY} // Secret Key
chaipayKey={CHAIPAY_KEY} // chaipay key
/>
ParamsData typeMandatoryDescription
envStringyesenv type. e,g "dev" "prod"
callbackFunctionfuncyesreturns the success and failure callback.
redirectUrlStringyesredirect url for the app
secretKeyStringyesprovided secret key
chaipayKeyStringyesprovided chaipaykey

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 Generationhttps://www.docs.chaipay.io/getting_started/signatures/payment_request.html

Subpages#