Using Connect Checkout

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

Suggest Edits

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.

1200

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:

<head>
  ...
  <script src="https://workflows.connect.sandbox.plastiq.com/libraries/start-workflows.js"></script>
</head>
<body>
  ...
  <div id='workflows-demo'></div>
</body>

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("https://connect.sandbox.plastiq.com/api/v2/client-secrets", {
  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:

📘

Callbacks

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, event.data: ', event.data)
    }
  },
})

Updated 18 days ago