Embed Checkout Token

Duck Creek Payments offers the ability to provide a payment solution to your customers through use of the Payments Checkout component. You can embed this component within your own website, as you would with any standard HTML tag.

Before you Start

Before you start following this guide, you should understand the concepts related to the Payments application. You should also have already created your intention for payment using Orders and Instructions.

How it works?

  1. You start by generating a Checkout token using the Whitelabel service API endpoint.
  2. Then you will load the Checkout component in your website and assign the token to the Checkout component.
  3. Once this is complete, your customers will be able to view the payment details and submit their Financial Instrument details. These informations are transmitted back to the Payments application.
  4. Payments will create a transaction using this information and process it.

How to Embed Checkout Token?

Step 1: Generate Checkout Token

After you have created an intention for payment, you need to share the intention to your customers. Payments offers a unique way to share this information by encrypting the information as Checkout token. Generate a checkout token using the Whitelabel service endpoint.

Step 2: Load Checkout Component

You can load the Checkout component by adding a script to your HTML page or by adding an App entry for your React App.

HTML Script SampleApp Entry for React App
<!-- Load the required imburse-checkout Checkout component. -->
<script src="https://js.imbursepayments.com/web/imburse-checkout/dist/imburse-checkout/imburse-checkout.js"></script>
import { applyPolyfills, defineCustomElements } from 'imburse-checkout/loader';

applyPolyfills().then(() => { defineCustomElements(window);}

Step 3: Initialize the Checkout Component

After you have generated your Customer Token and loaded the Payments Checkout component, it can then be embedded within your page as a HTML tag. The syntaxes are shown below:

HTML PageReact App
<imburse-checkout token = "<CHECKOUT_TOKEN>" return-url = "<RETURN_URL>" mode = "sandbox" />
// src/App.js
import '@imburseag/imburse-checkout'; 

render() { 
  return (
  <div className="App">
    <imburse-checkout token = "<CHECKOUT_TOKEN>" return-url = "<RETURN_URL>" mode = "sandbox" />
  </div> );

The Checkout component supports 5 attributes. See the table below to learn more about them.

The Checkout token that you've generated following the instructions in Step 1.
The URL to which your customer will be redirected. If your customer are redirected to this URL, the Checkout token will be appended as a part of the URL's token query string.

The page hosted on the return URL must have the Payments Checkout component embedded within for the transaction to continue. The appended token must be extracted from the URL query string and then passed to the Payments Checkout component.
modeSet the value of this attribute to sandbox, if you want to test the component in the Sandbox environment. In the Production environment, this attribute and its value should be removed.
The ID of the Theme template that you want to use to style the Checkout component. See Customize Checkout component's Theme for more information.
The two-digit code used to indicate the language used in the Checkout component. Following codes are supported.
  • EN indicates English.
  • DE indicates German
  • FR indicates French
  • ES indicates Spanish
  • IT indicates Italian
  • PT indicates Portugese

Events raised by the Payments Checkout component

The Payments Checkout component makes use of DOM Events to notify the parent of any transaction events. You can listen for these events to continue your customer's payment journey as desired. See the table below for a list of supported events.

imburse_checkout:payment_successEvent raised when the transaction has completed successfully.
imburse_checkout:payment_failedEvent raised if an error occured during the transaction.
imburse_checkout:component_loadedEvent raised when the Checkout component has completed loading.

You can implement these events as you see fit. Below are a few examples of how you can implement them.

JavaScript ImplementationReact Implementation
  var imburseCheckout = document.getElementsByTagName('imburse-checkout')[0];
  imburseCheckout.addEventListener('imburse_checkout:payment_success', function () { console.log('Success event received!');

  // Your code goes here.
  // src/App.js ...

  constructor(props) {
  this.imburseCheckout = React.createRef();

  componentDidMount() { this.imburseCheckout.current.addEventListener('imburse_checkout:
  payment_success', e => {
  // Your code goes here.
  }); }

  render() { return (
  <div className="App">
    <imburse-checkout ref = {this.imburseCheckout} token = "<CHECKOUT_TOKEN>" return-url = "<RETURN_URL>" />


The Checkout token has expired.

A Checkout token is valid for 120 minutes and can only be used once. If your Checkout token has expired, you can create a new token by following the instructions in Step 1: Generate Checkout Token.

The Checkout component failed to load.

There could be multiple reasons by the component failed to load.

  1. You might have entered incorrect schemeId to generate the Order.
  2. The Checkout token has expired.
  3. The payment method associated with the schemeId is invalid.

If you have entered the above details correctly and the Checkout component is still not loading, contact your Implementation Manager or Account Manager.

Copyright 2024 Duck Creek Technologies. All Rights Reserved.