Customizing the checkout widget

This document describes ways to customize your inai checkout widget.

Styling the checkout widget

In this section we describe ways to stylize your checkout widget. For instructions on integrating the checkout widget itself, visit Self checkout with inai.

inai.initialize({
  ...
  "styles": {
    "container": { // the section where your customers make payments
      "backgroundColor": string, // any CSS color or name
      "color": string, // any CSS color code or name
      "fontSize": string,
      "fontWeight": number,
      "width": string,
      "height": string,
      "margin": string,
      "padding": string
    },
    "cta": { // describes your submit button
      "backgroundColor": string,
      "color": string,
      "fontWeight": number,
      "fontSize": string, 
      "minWidth": string,
      "borderRadius": string,
      "border": string,
      "outline": string,
      "padding": string,
      "cursor": string
    },
    "errorText": { // if the payment fails
      "color": string,
      "fontSize": string,
      "fontWeight": number
    }
  },
  ...
})

Behavioral changes

In this section, we describe ways to influence the checkout SDK's behavior.

Fill customer attributes

You can pre-populate the customer's details in the checkout page by passing in a customer object during initialization. An example customer object is shown below.

inai.initialize({
  ...
  customer: {
    email: "[email protected]", //customer email
    phoneNumber: "919876543210" // customer phone number
  },
  ...
});

Set initial location

By default, the inai SDK determines your customer's location based on their GeoIP. The payment options shown to the customer are based on this location.

If you would like to show a default location to the customer, you can set the location attribute as shown below.

inai.initialize({
  ...
  "countryCode": "USA" // ISO 3166-1 alpha-3 code
  ...
});

The countryCode should be specified as an ISO 3166-1 alpha-3 country code. Briefly, this is the 3 letter country code for countries -- India is IND, USA is, unsurprisingly, USA, Brazil is BRA and so on.

Disable location change

Even if you specify an initial location for the checkout widget, your customer can change the location themselves. You can enable or disable this as shown below.

inai.initialize({
  ...
  "changeLocation": "disabled" // default is "enabled"
  ...
});