Checkout.js

A simple way to integrate Checkout.com's full suite of payment options into your website.

Checkout.js is one of the quickest ways to get started accepting payments. It's a widget that sits on your website and provides all the tools for collecting a customer's card details and sending them straight to us for tokenization - tokenization - The industry standard process for protecting sensitive data by replacing it with an algorithmically generated number called a token. At Checkout.com we use tokenization to protect our customers' confidential payment information from fraudsters. Payment information is substituted with randomly generated numbers — the tokens — and passed to us over the internet. Using the token, we can locate the payment details from our secure vault and complete the request without the need to transfer any sensitive data. it's super safe, they never even touch your server. Subsequently, a card token is returned to you, enabling you to create a payment request.

Take a look at the default Checkout.js payment widget below! If it's a bit cumbersome for you, try using a custom button instead.

Checkout.js is a quick and simple approach. If you'd prefer your own customizable payment form, then take a look at Frames.

Checkout.js demo

Why not give Checkout.js a test run? Click the Pay Now button below, and you'll see the form spring to life. Use the following details to fill in the form:

  • email address — we have completed this for you
  • use one of our test cards, for example, 4242 4242 4242 4242
  • use any future expiry date (mm/yy)
  • and the CVV is 100

Don't worry. It's just a test, we won't charge anyone's card.

Please note:

Checkout.js doesn't process a payment automatically, but it provides the first steps for obtaining a card token. To finish the payment process, you need some server-side code included on your page.

Payment methods

Don't miss out on a sale! Checkout.js accepts all your favorite payment methods:

The two-step process

Try our 2-step process to get started with Checkout.js. Then, when you're ready, have a go customizing it to your brand.

Step 1: Pick a display method

The first step to using Checkout.js is to pick a display method. Your requirements and technical know-how will significantly influence this decision. Our recommended and the most straightforward option is window.CKOConfig, but take a look at our integration options and decide which solution is best for you.

Step 2: Add the code

To add Checkout.js, insert a supplied snippet of code to your page, and then change the action attribute to submit the form to your server-side code. Below is an example for window.CKOConfig, your integration method may be different, but the core process is the same.

<form class="payment-form" method="POST" action="https://merchant.com/successUrl">
    <script>
        window.CKOConfig = {
            publicKey: 'pk_test_6ff46046-30af-41d9-bf58-929022d2cd14',
            paymentToken: 'pay_tok_SPECIMEN-000',
            customerEmail: 'user@email.com',
            value: 100,
            currency: 'GBP',
        };
    </script>
    <script async src="https://cdn.checkout.com/sandbox/js/checkout.js"></script>
</form>

In the code, you must replace the example’s publicKey with your own. You can find this in The Hub. The publicKey enables us to identify you and allows you to test integration using your Hub account.

At this point, you're ready to collect some tokens. Have a go authorizing a payment or verifying a card.

Customize your widget

The next step, is to customize the appearance to match your brand. Luckily, Checkout.js gives you the flexibility to adjust its look and feel to your page. Learn how to configure the Checkout.js Payment Widget and Payment Lightbox.

Can we help?

Thanks for using Checkout.com. If you need any help or support, then message our support team at support@checkout.com.


Checkout.js