react-native-inai-sdk

React Native Wrapper for Inai Checkout SDK

Installation

npm install react-native-inai-sdk --save

Initialization

Inai Checkout has different methods that can be used to execute different types of operations related to payments. Let's discuss them in detail. Import the InaiCheckout as given below:

import  InaiCheckout  from  "react-native-inai-sdk";

Config Parameters

InaiConfig object is required to be passed onto the interfaces. InaiConfig takes the following parameters.

| Variables | Description | | :-------- | :-------------------------------------------------------------------------------------------- | | token | The client username can be obtained from the dashboard: Settings > Credentials | | orderId | The orderId refers to the inai order created by the merchant backend. | | countryCode | The countryCode should be specified as an ISO 3166-1 alpha-3 country code. | | styles | The optional styles object can be used to customize various UI elements on the checkout page. | | locale | This adds localization to the SDK method that is being called. e.g "en" for English, "fr" for french. |

  let styles = {
    container: { backgroundColor: "#fff" },
    cta: { backgroundColor: "#123456" },
    errorText: { color: "#000000" }
  };

 let inaiConfig = {
    token: "token",
    orderId: "orderId",
    countryCode: "countryCode",
    styles: styles,
    locale: locale
  };  
  

Drop-In Checkout

Present Checkout

Inai Checkout presents the customer with a list of configured payment method options for the country of checkout.

InaiCheckout.presentCheckout(inaiConfig).then((response) => {
    // Handle Success
}).catch((err) => {
    // Handle Failure
});

Present Add Payment Method

The addPaymentMethod interface presents the customers a view with a list of configured payment method options for the country of checkout which enables them to save it. Once saved, payment_method_id that gets returned from the addPaymentMethod call can be used for subsequent payments eliminating the need for the customer to re-enter the payment details for each payment request.

InaiCheckout.addPaymentMethod(inaiConfig, "card").then((response) => {
  // Handle Success
  // Store response["payment_method_id"] 
}).catch((err) => {
  // Handle Failure
});
  

Present Pay with Saved Payment Method

When a customer has saved a payment method, the payment_method_id of the same can be used to invoke the presentPayWithPaymentMethod interface. This enables the customers to leverage saved payment_method_ids for faster checkout.

InaiCheckout.payWithPaymentMethod(inaiConfig, <paymentMethodId>).then((response) => {
  // Handle Success
}).catch((err) => {
  // Handle Failure
});

For additional information regarding Drop-In Checkout, please check the link.

Headless Checkout

Validate Fields

This interface is used to validate payment details entered by the customer.

validateFields takes 3 parameters -

• inaiConfig represents the inaiConfig object that we declared initially
• paymentMethodOption represents the payment method option the user chose to complete the payment.
• paymentDetails represents the payment details that are required to complete the payment for the payment method option specified. For Payment Method Options with empty form_fields, this must be set as an empty object {} A promise will be returned that will resolve or reject based on the input validation or payment status. Appropriate success/error messages can be presented to the customer based on the response.

let paymentMethodOption = "card"

let paymentDetails = {
  "fields": [{
    "name": "number",
    "value": "5123456789012346"
  },{
    "name": "cvc",
    "value": "123"
  },{
    "name": "expiry",
    "value": "12/25"
  },{
    "name": "holder_name",
    "value": "John Doe"
  },{
    "name": "contact_number",
    "value": "01010101010"
  },{
    "name": "first_name",
    "value": "John"
  },{
    "name": "last_name",
    "value": "Doe"
  },{
    "name": "contact_email",
    "value": "[email protected]"
  }]
}

InaiCheckout.validateFields(inaiConfig, paymentMethodOption, paymentDetails
).then((response) => {
  // Handle Success
}).catch((err) => {
  // Handle Failure
});

Make Payment

This interface is used to do headless payments.

makePayment takes 3 parameters -

• inaiConfig represents the inaiConfig object that we declared initially
• paymentMethodOption represents the payment method option the user chose to complete the payment.
• paymentDetails represents the payment details that are required to complete the payment for the payment method option specified. For Payment Method Options with empty form_fields, this must be set as an empty object {} A promise will be returned that will resolve or reject based on the input validation or payment status. Appropriate success/error messages can be presented to the customer based on the response.

InaiCheckout.makePayment(inaiConfig, <paymentMethodOption>, paymentDetails).then((response) => {
    // Handle Success
  }).catch((err) => {
    // Handle Failure
  });

For additional information regarding Headless Checkout, please check the link.