Checkout Integration

When a customer is ready to complete their purchase, redirect them to the hosted checkout page. The checkout process is handled by our secure checkout system.

Checkout URL

Construct the checkout URL with the required query parameters:

https://{checkout-domain}/checkout?basketId={basketId}&returnUrl={returnUrl}&successCallbackUrl={successCallbackUrl}

Parameters

Parameter	Required	Description
basketId	Yes	The basket identifier from your storefront
returnUrl	Yes	URL to redirect to if the customer cancels or navigates back
successCallbackUrl	Yes	URL to redirect to after successful payment

Important

The checkout domain is specific to your sales channel configuration. Contact our support if you don't know your checkout domain.

Building the Checkout URL

function buildCheckoutUrl(basketId, checkoutDomain) {
  const returnUrl = window.location.href;
  const successCallbackUrl = window.location.origin + "/order-confirmation";

  const checkoutUrl = new URL(checkoutDomain + "/checkout");
  checkoutUrl.searchParams.set("basketId", basketId);
  checkoutUrl.searchParams.set("returnUrl", returnUrl);
  checkoutUrl.searchParams.set("successCallbackUrl", successCallbackUrl);

  return checkoutUrl.toString();
}

Checkout Button Example

function updateCheckoutButton(basketId, checkoutDomain) {
  const checkoutButton = document.getElementById("btn-checkout");
  if (!checkoutButton) return;

  const checkoutUrl = buildCheckoutUrl(basketId, checkoutDomain);
  checkoutButton.setAttribute("href", checkoutUrl);
}

<a href="#" id="btn-checkout" class="checkout-button"> Proceed to Checkout </a>

Handling Checkout Completion

After a successful checkout, the customer is redirected to your successCallbackUrl. At this point:

1. The basket's stage will be set to Settled
2. The BasketUpdated event will fire with the settled basket
3. Your application should create a new basket for future purchases

Order Completion Handler

connection.on("BasketUpdated", (basket) => {
  if (basket.stage === "Settled") {
    // Clear the stored basket ID
    localStorage.removeItem(getBasketKey());

    // Create a new basket for future purchases
    const newBasketId = generateBasketId();
    localStorage.setItem(getBasketKey(), newBasketId);

    // Update UI
    clearCartDisplay();
    showOrderConfirmation();
  }
});

Returning Customers

If a customer returns to your storefront with an existing basketId in the URL (e.g., after canceling checkout), your application should:

1. Read the basketId from the URL
2. Store it in local storage
3. Call ResumeShopping to restore the basket state

function getBasketId() {
  const urlParams = new URLSearchParams(window.location.search);
  const basketIdFromUrl = urlParams.get("basketId");

  if (basketIdFromUrl) {
    localStorage.setItem(getBasketKey(), basketIdFromUrl);
    return basketIdFromUrl;
  }

  return localStorage.getItem(getBasketKey()) || generateBasketId();
}