Integration Method

Integrating to Collect Checkout is meant to be as simple as possible. The simplest way to integrate is with the button generator in your merchant control panel (coming soon). If you are building your own integration, then here’s a quick setup guide.

Quick Setup

1. Create your products

   Create products you’ll sell through Collect Checkout.

2. Create a checkout security key

   Set up a “Checkout” security key in your control panel under public keys.

3. Add your success and cancel URLs

   Add any URLs you will be using for success and cancel URLs to the Allowlist.

4. Add the checkout code to your site

   Copy, modify, and paste the below code sample to your website.

Once this is complete, you should be able to click the payment button on your website and be redirected to the Collect Checkout cart page.

<!-- This loads the Collect Checkout JS file. Make sure to use your Checkout key. -->
<script src="https://gateway.bancedge.com/token/CollectCheckout.js"
        data-checkout-key="checkout_public_12345678901234567890123456789012"></script>

<!-- This is the element on your page that we’re using to trigger Collect Checkout. -->
<button id="checkout_button">Checkout Now</button>

<!--
    You must run CollectCheckout.redirectToCheckout to send the customer to your cart.
    This is using a click on a specific div, but you can make this anything you like.
    All configuration happens in an object passed into redirectToCheckout.
-->
<script>
document.getElementById('checkout_button').addEventListener('click', function (e) {
    CollectCheckout.redirectToCheckout({
        lineItems: [{
            sku: "0001",
            quantity: 1
        }],
        type: "sale",
        collectShippingInfo: true,
        customerVault: {
            addCustomer: true
        },
        successUrl: "https://example.com/receipt/?transid={TRANSACTION_ID}",
        cancelUrl: "https://example.com/",
        receipt: {
            showReceipt: true,
            redirectToSuccessUrl: true
        }
    }).then((error) => {
        console.log(error);
    });
});
</script>

A few quick notes on this integration:

• Make sure the checkout key you are using is attached to a user who can run sale and auth transactions.
• Likewise, ensure the user has Customer Vault access to use the add to vault functionality.
• The “checkout_button” div in this example would be styled by CSS to look like a button. Alternatively, you could use any element on a page, or even use something totally different to trigger the redirectToCheckout function.
• If you 100% must have the customer be redirected to your website after a successful sale, we recommend not showing a receipt. In that case, the sale will approve and the customer will be immediately redirected to your successUrl.
• If you are using Kount, the data collector will be active after enabling the service. No further integration work is necessary for the service to run.