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
- Create a Public Key in the Connect Developer Portal.
- Embed the Checkout UI on your page, and supply it with your Public Key.
- Create a new Connect Checkout session when a user is ready to use the UI by supplying it with a secure Client Secret.
- 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