Getting Started

Get your API Keys

To get started building your checkout there are 3 configuration values you need. These can all be found under Settings -> Developers:

  1. Public Key - API keys are meant solely to identify your account with WhenThen, they aren't secret. In other words, you can safely publish them in places like your frontend code, or in an Android or iPhone app. You will also us them with our frontend SDKs
  2. Private Key - API keys must be kept confidential and only store them on your own servers. You must not share your secret API key with any third parties. Your account's secret API key can perform any API request to WhenThen without restriction. If WhenThen believes that your secret API key has been compromised, we may cancel and re-issue it, potentially resulting in an interruption to your WhenThen services.
  3. Flow Id - the flow id determines which payment processing automation your checkout will use.

Generating a Client Token

Next you need to generate a client token for each checkout session.


The WhenThen Checkout SDK is available on npm. See @whenthen/sdk-loader for an API reference.

npm install --save @whenthen/sdk-loader
# or
yarn add @whenthen/sdk-loader

Install WhenThen SDK loader package from npm public registry using npm or yarn.

Import the WhenThen SDK Loader

import WhenThenSdkLoader from '@whenthen/sdk-loader';

window.addEventListener('load', async () => {
  const checkoutSdk = await WhenThenSdkLoader.loadCheckoutSdkDropIn(elementOrSelector, options);

Import WhenThen SDK loader and load Checkout SDK DropIn from WhenThen CDN.

React Installation

info icon

We also provide a wrapper for React. See @whenthen/checkout-sdk-react for an API reference.

npm install --save @whenthen/checkout-sdk-react
# or
yarn add @whenthen/checkout-sdk-react

Install WhenThen React Checkout SDK wrapper package from npm public registry using npm or yarn.

Content Security Policy

info icon

If your checkout page is using the Content-Security-Policy header, you'll need to allow the following policies:

  • script-src
  • connect-src

Choose the Right Checkout for you ?

Haven’t chosen a checkout option yet? Refer to our comparison table in the Overview page to help you out.


When it comes to accepting payments there are a number of ways you can integrate with WhenThen's API. From Drop-In to Elements - choose the right checkout experience for you.