Express checkout flow quickstart

Before you begin

Make sure you have the following:

• A Centrobill merchant account with at least one website configured. Check out how to configure websites here.
• Public key (PK) generated for a specific website (provided by the Merchant Support team).
• Access to the prod environment.
• Check the Express checkout flow overview guide for domain restrictions.

Step 1: Add the JS SDK

Add the SDK script to your HTML page:

<script src="https://api.centrobill.com/expressCheckout/button.js?pk={PUBLIC-KEY}"></script>

pk is the public key that you receive from the Merchant support team. Note: A single website can have multiple public keys (PKs) assigned to it. This allows you to render multiple checkout buttons on the same site, with each button linked to a unique PK (one button = one PK). You cannot use the same PK for multiple websites.

Step 2: Render the checkout button

Use the cbCheckout.render() method to create and configure the checkout button:

cbCheckout.render({
    containerId: "CBButtonContainer",
    pk: "{PUBLIC-KEY}",
    amount: 1.23,
    currency: "EUR",
    orderId: "fake-order-id-123",
    callbacks: {
        buttonLoad: function (payload) {
            console.log('### button loaded', JSON.stringify(payload));
        },
        checkoutOpen: function (payload) {
            console.log('### checkout opened', JSON.stringify(payload));
        },
        checkoutClose: function (payload) {
            console.log('### checkout closed', JSON.stringify(payload));
        },
        paymentSuccessful: function (payload) {
            console.log('### payment successful', JSON.stringify(payload));
        },
        paymentDeclined: function (payload) {
            console.log('### payment declined', JSON.stringify(payload));
        },
        paymentPending: function (payload) {
            console.log('### payment pending', JSON.stringify(payload));
        }
    }
});

The render method automatically inserts the checkout button into the specified container (CBButtonContainer).

Step 3: Handle the checkout

When the user clicks the button, the Gateway checkout page opens in a new window. The user enters their payment details and completes the payment on the Centrobill-hosted page. No action is required from your side during this step.

Step 4: Handle the callbacks

After the payment completes, the JS SDK automatically triggers the appropriate callback with a payload object containing the payment result.

For the full payload object structure, supported callbacks reference, and shipping field details by country, see the Express checkout overview.

Support

For further assistance, contact the Merchant Support team at [email protected].