This version of our Documentation is for the eyes of employees and select merchants only.
API Reference

Our reference library for integrating with our API

Classic Docs

Documentation for our Classic API

Checkout.js customization guide

Display your company's logo, use custom fonts and add some color to represent your brand's personality β€” it’s putty in your hands.

The Checkout.js experience is made up of two parts: the payment widget, and the payment lightbox.

Checkout.js is a legacy solution. Upgrade to Hosted Payments Pageβ€”our easiest integration method.

The payment widget

The payment widget includes a Pay Now button and icons for all accepted payment methods. Depending on your preferences, you can configure the payment widget for three different display options:



Payment icons and the Pay Now button (both)

2Payment icons (only)

3Pay Now button (only)

Style the payment widget

Why not add a bit of color to your Checkout.js widget? Match every element to the colors of your brand with just a few lines of code. Here's a list of the data-key attributes and JavaScript keys used to style the widget:

Data-key attributeJavaScript keyDescriptionDefault value
data-widget-colorwidgetColorChoose a #HEX value for your widget color.#333333
data-button-colorbuttonColorChoose a #HEX value for your button color.#00b660
data-button-label-colorbuttonLabelColorChoose a #HEX value for your button's text color.#ffffff

String value to insert the text inside the widget button.

Maximum characters: 12.

Pay Now
  • 0 = All
  • 1 = Pay button only
  • 2 = Icons only
  • 3 = Active icons only (clicking an icon opens the payment lightbox)

Try customizing your widget with this JSFiddle (click Edit in JSFiddle). To make it simple, we've filled in the configurable keys for you. Study the code and play with the colors to make it look awesome.

The payment lightbox

Once a customer clicks the Pay Now button, the payment lightbox opens. The payment lightbox supports credit and debit card payments (by default), and it can also be customized to offer alternative payment options.

In its standard form, the payment lightbox looks like this:

Styling the payment lightbox

You can configure the payment lightbox to display text, colors and even a custom logo. The table below shows the data-key attributes and JavaScript keys used to customize your payment lightbox.

Data-key attributeJavaScript keyDescriptionDefault value
data-titletitleThe title of your payment form.N/A
data-subtitlesubtitleThe subtitle of your payment form.N/A
data-logo-urllogoUrlThe URL of your company logo beginning with https (must be 180 x 36 pixels).The logo
data-theme-colorthemeColorChoose a #HEX value for your theme.#00b660

A string value that sets the text inside the lightbox's submit button. 

Maximum characters: 12.

Checkout Now

Sets the color scheme of the lightbox.

  • standard = blue 
  • light = white

Use the code excerpt below to understand how to customize the widget and lightbox fully. We've pre-entered all the customizable parameters for you β€” they're the attributes between these comments:

// Customizable attributes start
// Customizable attributes end

Make sure you remove these comments from your own code.

<form class="payment-form" method="POST" action="">
    window.CKOConfig = {
      publicKey: 'pk_test_6ff46046-30af-41d9-bf58-929022d2cd14',
      paymentToken: 'pay_tok_SPECIMEN-000',
      customerEmail: '',
      value: 100,
      currency: 'EUR',
      cardFormMode: 'cardTokenisation',
      paymentMode: 'cards' || 'mixed' || 'localpayments',
      countryCode: 'DE',
      renderMode: 0 || 1 || 2 || 3,
// Customizable attributes start
      buttonLabel: 'BUY NOW',
      widgetColor: '#123123',
      buttonColor: '#123123',
      buttonLabelColor: '#123123',
      title: 'Merchant',
      subtitle: 'Merchant Subtitle',
      logoUrl: '',
      formButtonLabel: 'Complete Purchase',
      theme: 'light',
// Customizable attributes end
  <script async src=""></script>