Checkout.js offers your customers a quick, easy payment experience.

How it works

Checkout.js is a widget that sits on your checkout page and provides all the tools you need to securely collect a customer's card details and send them straight to us for tokenization—they never even touch your server. We'll then send you a card token, allowing you to request a card payment.

Try it out

Why not give Checkout.js a test run? Click the Pay Now button below and the form will spring to life. Use the following details to complete the form:

• email address — we've filled this in for you
• one of our test cards, for example, 4242 4242 4242 4242
• any future expiry date (mm/yy)
• a CVV of 100

Integrate Checkout.js

Before you start

Make sure you have your public_key. You can find it in the Hub, under Settings > Channels. If you don't have an account with us yet, sign up for your free test account now.

Step 1: Pick a display method

First, you need to choose a display method. We offer three ways to integrate Checkout.js into your website, so you can pick the one that best fits your requirements:

Step 2: Add the code snippet to your site

Next, copy the code snippet for your chosen method and add it to your checkout page.

You'll need to replace the example publicKey with your own, and edit the required key-value pairs to reflect the order details (see the JavaScript keys table) below for details).

The card token will be posted via the URL specified in the form's action attribute.

<form class="payment-form" method="POST" action="https://merchant.com/successUrl">
  <script>
    window.CKOConfig = {
      publicKey: 'pk_test_6ff46046-30af-41d9-bf58-929022d2cd14',
      customerEmail: 'user@email.com',
      value: 100,
      currency: 'GBP',
      paymentMode: 'cards',
      cardFormMode: 'cardTokenisation',
      cardTokenised: function(event) {
        console.log(event.data.cardToken);
      }
    };
  </script>
  <script async src="https://cdn.checkout.com/sandbox/js/checkout.js"></script>
</form>

<script src="https://cdn.checkout.com/sandbox/js/checkout.js"></script>
<form class="payment-form" method="POST" action="https://merchant.com/successUrl">
  <script>
    Checkout.configure({
      publicKey: 'pk_test_6ff46046-30af-41d9-bf58-929022d2cd14',
      customerEmail: 'user@email.com',
      value: 100,
      currency: 'GBP',
      paymentMode: 'cards',
      cardFormMode: 'cardTokenisation',
      cardTokenised: function (event) {
        console.log(event.data.cardToken);
      }
    });
    Checkout.open();
  </script>
</form>

<script src="https://cdn.checkout.com/sandbox/js/checkout.js"></script>
<form class="payment-form" method="POST" action="https://merchant.com/successUrl">
  <script>
    Checkout.configure({
      publicKey: 'pk_test_6ff46046-30af-41d9-bf58-929022d2cd14',
      customerEmail: 'user@email.com',
      value: 100,
      currency: 'GBP',
      payButtonSelector: '.customButton' || '#customButton',
      paymentMode: 'cards',
      cardFormMode: 'cardTokenisation',
      cardTokenised: function (event) {
        console.log(event.data.cardToken);
      }
    });
    Checkout.open();
  </script>
</form>

<script src="https://cdn.checkout.com/sandbox/js/checkout.js"></script>
<form class="payment-form" method="POST" action="https://merchant.com/successUrl">
  <script>
    Checkout.render({
      publicKey: 'pk_test_6ff46046-30af-41d9-bf58-929022d2cd14',
      paymentToken: 'pay_tok_SPECIMEN-000',
      customerEmail: 'user@email.com',
      value: 100,
      currency: 'GBP',
      cardFormMode: 'cardTokenisation',
      cardTokenised: function(event) {
        console.log(event.data.cardToken);
      }
    });
  </script>
</form>

JavaScript keys 

These are the JavaScript keys you need to use when embedding Checkout.js.

Make Checkout.js your own

Configuration options

You'll find a list of all the possible configuration options, plus some examples, in our Checkout.js reference guide.

Customization

Checkout.js gives you the flexibility to adjust its look and feel to suit your brand and checkout page. You can display your company's logo, use custom fonts and add some color to represent your brand's personality. Check out our customization guide for more details.

Next step

Now that you've got your card token, you're ready to request your first card payment.