Using Connect Checkout

Add an end-to-end checkout flow to your web page

The Checkout workflow is a set of prebuilt UI components that streamlines making a Payment. By starting a checkout session with the Workflows Javascript library, you can enable the full Checkout UI.


How it works

  1. Create a Public Key in the Connect Developer Portal.
  2. Embed the Checkout UI on your page, and supply it with your Public Key.
  3. Create a new Connect Checkout session when a user is ready to use the UI by supplying it with a secure Client Secret.
  4. Users follow the flow and create a Payment.

Setting up Connect Checkout

Include the Workflows Javascript library on your webpage:

  <script src=""></script>
  <div id='workflows-demo'></div>

Create a new Workflows instance in your page's Javascript:

const ConnectWorkflows = new window.ConnectWorkflows(result.publicKey, {
  environment: 'sandbox'

Generate a Client Secret for your user to make secure requests in a backend service call:

const response = await fetch("", {
  method: 'POST',
  headers: { api-key: 'your-api-key' }
const { clientSecret } = await response.json()

Create a new Checkout session with the Client Secret so that user can interact with the iFrame and make a Payment:



Connect Workflows will invoke the callback function you define when you create a new session with a full Connect API payload, so that you can handle the following events during the workflow: successfully creating a resource, errors when creating a resource.

ConnectWorkflows.create('checkout', {
  clientSecret: clientSecret,
  parentElement: '#workflows-demo',
  payer: {
    id: 'optional-payer-id',
  handlers: {
    onSuccess: function(event) {
      console.log('onSuccess Handler, event: ', event)
    onError: function(event) {
      console.log('onError Handler, ',