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.

{
  "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
    }
  }
}

Prefill customer details on checkout

In this section, we describe the attributes with which you can prefill customer information during checkout

customer: {
    email: "[email protected]", //customer email
    phoneNumber: "919876543210" // customer phone number
  }