Skip to main content

Checkout SDK (Embedded Checkout)

The Monek Checkout SDK — also known as embedded checkout or checkout-js — lets you take card payments directly on your own website, inside your own checkout page.

Instead of redirecting your customer to a Monek-hosted payment page, the SDK places secure card fields into a spot you choose on your page. Your customer never leaves your site, but the sensitive card details never touch your servers — they go straight to Monek from a secure frame the SDK manages for you. This keeps your PCI compliance burden low while giving you full control of the look and feel of your checkout.

What it is​

In practical terms, the SDK is a single JavaScript file you add to your page:

<script src="https://checkout-js.monek.com/monek-checkout.iife.js"></script>

Once loaded, it gives you a Monek() function. You initialise it with your public key, tell it where on the page to put the card fields, and provide a few callbacks that answer simple questions like "how much is this payment?" and "who is the customer?". The SDK handles everything else — the card form, validation, 3-D Secure authentication, and the payment itself — then tells you whether it succeeded or failed through callbacks you control.

You can also add an optional express checkout component, which shows an Apple Pay button to customers whose device supports it, letting them pay in one tap.

When to use it​

Choose the Checkout SDK when:

  • You want payment to happen on your own page. The customer stays on your site from basket to confirmation — no redirect to an external payment page.
  • You want your checkout to match your brand. The SDK supports theming (light/dark, colours, border radius and more), so the card fields blend into your design.
  • You want to keep PCI compliance simple. Card details are entered into a secure frame hosted by Monek, so they never pass through your website or servers.
  • You want Apple Pay as a one-tap option alongside standard card payments.
  • You are currently using Hosted Fields. The SDK is its modern replacement — see Migrating from Hosted Fields.

Consider a different integration when:

  • You'd rather not write any JavaScript. The Checkout Page is a Monek-hosted payment page you simply redirect (or iframe) your customers to — the fastest way to get live.
  • You are PCI DSS accredited and want full control of the payment journey server-to-server. See the Payments API.
  • You use a shopping cart platform such as WooCommerce — use our plugins instead.
Checkout PageCheckout SDKPayments API
Where the customer paysMonek-hosted page (redirect or iframe)Your page (embedded fields)Your page (you build everything)
Coding requiredMinimalSome JavaScriptFull integration
Branding controlLimited (CSS URL)ThemeableTotal
PCI burdenLowestLowHighest (accreditation required)
Apple PayYes (domain registration needed for iframe)Yes (express component)Build your own

How to use it​

Before you start​

You'll need a Checkout Access Token (your public key). Log in to the Monek Portal, go to Settings → Integrations, and click the + icon under Checkout Access Tokens to create one.

1. Add the SDK script to your page​

<script src="https://checkout-js.monek.com/monek-checkout.iife.js"></script>

2. Add a container where the card fields should appear​

Place an empty <div> inside your checkout form, and make sure your form has a normal submit button:

<form id="payment-form">
  <div id="checkout-container"></div>
  <button type="submit">Pay now</button>
</form>

The SDK will render the secure card fields inside this container.

3. Initialise the SDK and mount the card fields​

<script>
  (async () => {
    // Initialise with your public key from the Monek Portal
    const sdk = await Monek('your-public-key');

    const options = {
      callbacks: {
        // How much to charge, and in what currency (ISO-4217: 826 = GBP)
        getAmount: () => ({ major: '25.00', currency: '826' }),

        // A short description of the order
        getDescription: () => 'Order #12345',

        // Who the customer is
        getCardholderDetails: () => ({
          name:  'Jane Smith',
          email: 'jane@example.com',
          billingAddress: {
            addressLine1: '1 High Street',
            city:         'Lichfield',
            postcode:     'WS13 6AA',
            country:      '826'
          }
        })
      },

      completion: {
        mode: 'client',
        // What to do when the payment succeeds, fails, or is cancelled
        onSuccess: (ctx, { redirect }) => redirect('/thank-you'),
        onError:   (ctx, { reenable }) => {
          reenable();
          alert(ctx?.payment?.Message || 'Payment failed. Please try again.');
        },
        onCancel:  (ctx, { reenable }) => reenable()
      },

      countryCode: '826' // Your store's country
    };

    const checkout = sdk.createComponent('checkout', options);
    await checkout.mount('#checkout-container');
  })();
</script>

That's it. When the customer presses your submit button, the SDK intercepts the submission, takes the payment (including any 3-D Secure step), and calls onSuccess, onError, or onCancel with the outcome.

tip

In a real integration, read the amount and customer details from your page or basket instead of hard-coding them — for example document.querySelector('[name="billingEmail"]').value.

4. (Optional) Add Apple Pay express checkout​

Add a second container above your card fields and mount the express component:

<div id="express-container"></div>
<div id="checkout-container"></div>
const express = sdk.createComponent('express', options);
await express.mount('#express-container');

The Apple Pay button appears automatically for customers on a compatible device with Apple Pay set up, and stays hidden for everyone else. Your Monek account needs Apple Pay enabled — contact Monek Support if it isn't yet.

info

The separate Apple Pay domain registration steps apply to embedding the hosted Checkout Page in an iframe. The Checkout SDK's express component doesn't require you to host the domain registration file yourself.

5. (Optional) Match your branding​

The SDK can be themed using a styling object and CSS variables:

const options = {
  styling: {
    theme: 'light', // or 'dark'
    core:   { backgroundColor: '#ffffff', borderRadius: 8 },
    inputs: { inputBackgroundColor: '#f9f9f9' }
  },
  // ...callbacks and completion as above
};
:root {
  --monek-input-focus: #0ea5e9;
}

Next steps​