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

Prerequisites

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>

To initialize your widget, you must create an order. To create an order, you can use our API Reference at https://docs.inai.io/reference/post_v1-orders. Note the order_id for the following steps.

The last step is initializing inai's widget. It can be done with the code shown below. First we'll see the code and we'll discuss it in the section that follows.

inai.initialize({
  container_id: "inai-widget",
  token: "<your_client-username>", // as documented above
  order_id: "<your_order_id>",    // as documented above
  styles: { // documented below
    container: {},
    cta: {}, 
    errorText: {}
  },
  customer: {
    email: "[email protected]",
    phoneNumber: "919876543210"
  }
  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 2 above. After initialization, your customers will be presented with payment options. These payment options are determined based on the configuration in your inai dashboard.

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.