Nhảy tới nội dung

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#

  1. Import the chaiport-sdk library

    import Checkout from 'chaiport-sdk';
  2. Initialize the checkout instance as below

    <Checkout
    ref={this.checkout}
    env={"dev"} //Optional
    callbackFunction={this.afterCheckout}
    redirectUrl={"chaiport://"}
    />
  3. Create the reference for checkout

    constructor(props) {
    this.checkout = React.createRef();
    }
  4. 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

  5. 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:#

  1. 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#

  1. 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:

  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 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" />
    ```
  2. 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:#

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

    1.png

  2. Add inside the URL types

    2.png

  3. In the URL schemes, give the name to accept the URIs that begin with (eg: “momo://, zalopay://“)

    3.png

    4.png

  4. Should include the application URL schemes in info.plist

    6.png

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

  1. Add the library to the project.

    7.png

  2. Add the dependency in package.Json

    8.png

  3. 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",
    },
    },
    };
  4. Initialize the checkout instance as below:

    <Checkout
    ref={this.checkout}
    env={"dev"}
    callbackFunction={this.afterCheckout}
    redirectUrl={"chaiport://checkout"}
    />

Parameter Description Table

ParameterDescription
chaipayKeychaipay unique key provided to merchants
signature_hashSignature calculated using this link
merchantOrderIdMerchant order Id
amountProduct amount (eg 100000)
currencyMerchant currency used for transaction (eg. VND)
orderDetailsOrder Details (includes quantity, id, name, price)
paymentChannelName of the payment channel (eg. MOMOPAY, ZALOPAY)
paymentMethodPayment Method to be used (eg. MOMOPAY_WALLET, ZALOPAY_WALLET)
redirectUrlDeep link of the merchant’s app (eg. chaiport://checkout)
callbackFunctionreturns 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;
    }