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:
- 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
- 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.
- 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.
Installation
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-loaderInstall 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
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-reactInstall WhenThen React Checkout SDK wrapper package from npm public registry using npm or yarn.
Content Security Policy
If your checkout page is using the Content-Security-Policy header, you'll need to allow the following policies:
script-srchttps://static.whenthen.com/connect-srchttps://api.whenthen.com/
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.
Types
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.
