capacitor-inai

Capacitor wrapper around Inai Checkout Android and iOS SDK's

Installation

npm install capacitor-inai

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 'capacitor-inai'

Drop-In Checkout

Present Checkout

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

To invoke presentCheckout, pass an object with the following properties,

• token key represents the client username can be obtained from the dashboard: Settings > Credentials.
• orderId key represents the orderId refers to the inai order created by the merchant backend.
• countryCode key represents the countryCode should be specified as an ISO 3166-1 alpha-3 country code.
• styles key represents the optional styles object can be used to customize various UI elements on the checkout page.
• locale key represents 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" },
    components: [{ component: "cta", style: { backgroundColor: "#AA0082", border: "", color: "", fontSize: "14px", fontWeight: 400, margin: "0px", marginTop: "8px" } }]
  };

InaiCheckout.presentCheckout({
    token: "token",
    orderId: "orderId",
    countryCode: "countryCode",
    styles: styles,
    locale: locale
  }).then((response) => {
    // Handle Success
}).catch((err) => {
    // Handle Failure
});

Headless Checkout

Make Payment

This interface is used to do headless payments.

To invoke makePayment, pass an object with the following properties,

• token key represents the client username can be obtained from the dashboard: Settings > Credentials.
• orderId key represents the orderId refers to the inai order created by the merchant backend.
• countryCode key represents the countryCode should be specified as an ISO 3166-1 alpha-3 country code.
• paymentMethodOption key represents the payment method option the user chose to complete the payment.
• paymentDetails key 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.

const paymentMethodOption = "card"

const paymentDetails = {
            "fields": [{
              "name": "number", 
              "value": "4242424242424242"
            },{
              "name": "cvc", 
              "value": "123"
            },{
              "name": "expiry", 
              "value": "12/25"
            },{
              "name": "holder_name", 
              "value": "Test Account "
            },{
              "name": "contact_email", 
              "value": "[email protected]"
            }]
          }

InaiCheckout.makePayment({
    token: "token",
    orderId: "orderId",
    countryCode: "countryCode",
    paymentMethodOption, 
    paymentDetails}).then((response) => {
    // Handle Success
  }).catch((err) => {
    // Handle Failure
  });

Validate Fields

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

To invoke validateFields, pass an object with the following properties,

• token key represents the client username can be obtained from the dashboard: Settings > Credentials.
• orderId key represents the orderId refers to the inai order created by the merchant backend.
• countryCode key represents the countryCode should be specified as an ISO 3166-1 alpha-3 country code.
• 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.

const paymentMethodOption = "card"

const 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({ 
    token: "token",
    orderId: "orderId",
    countryCode: "countryCode",
    paymentMethodOption, 
    paymentDetails}).then((response) => {
  // Handle Success
}).catch((err) => {
  // Handle Failure
});

Get Card Info

This interface is used to get the card information.

To invoke getCardInfo, pass an object with the following properties,

• token key represents the client username can be obtained from the dashboard: Settings > Credentials.
• orderId key represents the orderId refers to the inai order created by the merchant backend.
• countryCode key represents the countryCode should be specified as an ISO 3166-1 alpha-3 country code.
• cardNumber represents the card number entered by the user.

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.

const cardNumber = "424242"

InaiCheckout.getCardInfo({ 
    token: "token",
    orderId: "orderId",
    countryCode: "countryCode",
    cardNumber}).then((response) => {
    // Handle Success
  }).catch((err) => {
    // Handle Failure
  });

Get Installment plans

This interface is used to get the installment plans available for that payment.

To invoke getInstallmentPlans, pass an object with the following properties,

• token key represents the client username can be obtained from the dashboard: Settings > Credentials.
• orderId key represents the orderId refers to the inai order created by the merchant backend.
• countryCode key represents the countryCode should be specified as an ISO 3166-1 alpha-3 country code.
• 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.

const paymentMethodOption = "card"

const 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.getInstallmentPlans({ 
    token: "token",
    orderId: "orderId",
    countryCode: "countryCode", 
    paymentMethodOption, 
    paymentDetails}).then((response) => {
    // Handle Success
  }).catch((err) => {
    // Handle Failure
  });