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:

  2. 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" />
    ```
  3. To accept the URIs that begin with portone://checkoutÔÇť

    ```java
    <data android:scheme="portone"
    android:host="checkout" />
    <data android:scheme="zalopay"
    android:host="pay" />
    <data android:scheme="momo"
    android:host="pay" />
    ```

Enable deep linking in iOS:

  1. To open your application, 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

  3. To open the other applications, should include the 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.

  4. To support HTTP connections, add this source code in app info.plist

    <key>NSAppTransportSecurity</key>
    <dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
    <key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
    <true/>
    <key>NSAllowsLocalNetworking</key>
    <true/>
    </dict>

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

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

    Screenshot 2022-05-09 at 4.50.21 PM.png

  3. 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. Import the library as below:

    import {Checkout} from '@iamport-intl/portone-sdk';
  5. Initialise the checkout instance as below:

    <Checkout
    callbackFunction={this.afterCheckout}
    redirectUrl={"chaiport://"}
    env={"dev"} //Optional
    environment={"sandbox"} //Optional
    />
    ParamsData typeMandatoryDescription
    envStringNoenv type. e,g "dev" "prod"
    callbackFunctionfuncyesreturns the success and failure callback.
    redirectUrlStringyesredirect url for the app
    environmentStringNosandbox, live
  6. Sample Payload containing the payment details:

    var orderDetails = [ {
    id: `${item.key}`,
    price: item.price,
    name: item.name,
    quantity: item.quantity,
    image: item.img,
    }];
    var payload = {
    portOneKey: KEY,
    merchantDetails: {
    name: 'Chaipay Cart',
    logo: 'https://demo.portone.cloud/images/chikku-loafers.jpg',
    back_url: 'https://demo.chaipay.io/checkout.html',
    promo_code: 'Downy350',
    promo_discount: promoDiscount,
    shipping_charges: shipping,
    },
    merchantOrderId: merchantOrderId,
    signatureHash: this.createHash(
    KEY,
    totalAmount,
    CURRENCY,
    failureURL,
    merchantOrderId,
    successURL,
    SECRET_KEY,
    ),
    amount: totalAmount,
    currency: CURRENCY,
    countryCode: 'VN',
    billingDetails: {
    billing_name: 'Test React native',
    billing_email: 'markweins@gmail.com',
    billing_phone: '+660956425564'
    billing_address: {
    city: 'VND',
    country_code: 'VN',
    locale: 'en',
    line_1: 'address',
    line_2: 'address_2',
    postal_code: '400202',
    state: 'Mah',
    },
    },
    shippingDetails: {
    shipping_name: 'xyz-Testing',
    shipping_email: 'xyz@gmail.com',
    shipping_phone: '+910830443596',
    shipping_address: {
    city: 'testing city',
    country_code: 'VN',
    locale: 'en',
    line_1: 'Testing line 1',
    line_2: 'Testing line 2',
    postal_code: '400202',
    state: 'Mah',
    },
    },
    environment: ENVIRONMENT,
    orderDetails: orderDetails,
    successUrl: successURL,
    failureUrl: failureURL,
    redirectUrl: 'demo://checkout1',
    expiryHours: 2,
    source: 'mobile',
    description: 'test RN',
    showShippingDetails: true,
    showBackButton: false,
    defaultGuestCheckout: false,
    isCheckoutEmbed: false,
    };

Sample Response Payload:

Success callback :

```jsx
{
"chaipay_order_ref": "1wc00XMK4uKy3EeYBAvRPlkfjkZ",
"channel_order_ref": "210812000000171",
"merchant_order_ref": "MERCHANT1628742344516",
"status": "Success",
"status_code": "2000",
"status_reason": "SUCCESS"
}
```

Failure Callback:

```jsx
{
"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

```jsx
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;
}
```

Subpages#