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

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

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.

<!-- 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:

<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.

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.

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

  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) {
  super(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>" />
  </div>
  );

Troubleshooting

The Checkout token has expired.

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.