Payment Checkout with inai

At the end of this guide you will be able to setup your checkout page to accept card payments.

These steps describe the flow for an e-commerce flow. Though not documented here, the same steps are easily tweaked to support subscriptions too.

Checkout is a 3 step process

  1. Setup
  2. Create an order
  3. Initialize the inai SDK

An Order contains details you need to accept a payment from your customer. These include, but are not limited to, the amount and currency, your customer's details, and any additional information you wish to capture. In an e-commerce flow, think of the order as your cart total.

1. Setup

Before we begin, you will need your client-username and client-password. They are available from your inai merchant dashboard in the left navbar under "Settings" > "Credentials".

Add inai's payment widget to your checkout flow

Adding the payments form to your checkout flow is as easy as copy/paste. Copy the following snippet of code and ensure it loads with your checkout page:

<script
   src="https://assets.inai.io/checkout/v1/inai.js"
   type="text/javascript">
</script>

Place the following div in your checkout page where you want to display the payment widget. Note the id and its value.

<div id="inai-widget"></div>

With these preliminaries, you're ready.

2. Create an order

To create an order, use our Order API documented at https://docs.inai.io/reference/post_v1-orders. Once you've created your order, note the order_id sent in the API response, you need it to initialize the inai checkout SDK.

3. Initialize the inai SDK

Initialize the inai SDK as shown below. We'll discuss the details in the following section.

inai.initialize({
  containerId: "inai-widget", // the div where the widget will show up
  token: "<your client-username>", // as documented above
  orderId: "<your order_id>",    // as documented above
  styles: { // documented below
    container: {},
    cta: {}, 
    errorText: {}
  },
  ctaText: "Pay Now" // you can customize this
}).then((response) => { // discussed below
  // handle a successful transaction
}).catch((error) => { // discussed below
  // handle a failed transaction
});

The inai's widget is initialized as shown in line 1 above. After initialization, your customers will be presented with payment options. These payment options are determined based (1) on the configuration in your inai dashboard and (2) your customer's location.

The SDK supports customization documented at Customizing the checkout widget.

Response handling

After your customer does a payment, you can customize what happens in success and error scenarios using the .then and the .catch callbacks. The most common scenarios we've encountered are redirection on successful payments and communicate error on failed transactions. The response object will be of the following format

{
  "message": "Payment Success",
  "transaction_id": "...",
}

Customizing the checkout widget

The widget may be styled and customized in various ways. These steps are documented at Customizing the checkout widget.

Conclusion

That's it! Accepting payments has never been easier thanks to inai's easy integration.