Customer Checkout

Pre-release documentation

This functionality is currently not available for general release. While you can reference this guide to begin your integration with early access, please be aware that all endpoints, logic, and component attributes are subject to change. Known pending changes are flagged throughout this document.

Customer Checkout

This endpoint can be used to build a checkout flow for when a customer logs in before completing the transaction. It does not have the same constraints as Direct Checkout, so it can be used when the customer needs to be known — for example, purchasing memberships, receiving membership benefits, using ticket vouchers, or collecting gift aid declarations. Best for transactions that require an authenticated customer, such as applying member discounts, redeeming vouchers, or collecting gift aid declarations.

This requires a customer to be authenticated (applicable to both web and system owner modes) or by adding a customer directly to the basket (applicable to system owner mode only).

Working with custom domains

Below, links will be referenced as originating from system.spektrix.com. Whether you are working in system owner or web / public mode, replace system.spektrix.com with your chosen custom domain. Use client-side requests in Web/Public mode, and server-side requests in System Owner mode.

Endpoint:

Web / Public mode
System Owner mode

POST
system.spektrix.com/{clientname}/basket/initiate-customer-payment

POST
system.spektrix.com/{clientname}/baskets/{basketId}/initiate-customer-payment

Request body:

{
    "originDomain": "tickets.mytheatre.com",
    "billingAddressId": "12345ABCDTGGQPPPTRVGVMSDRVTUVWXYZ",
    "storeCard": "false"
}

Field	Type	Required	Description
originDomain	string	Yes	The domain where your web component is hosted (e.g. tickets.mytheatre.com)
billingAddressId	string	Yes	The ID of the customer's billing address
storeCard	string	No	`"true"` or `"false"` - whether to save the card for future use

Response:

{
    "paymentToken": "<short-lived-token>"
}

Returns a paymentToken string. This token is short-lived and specific to the current basket total and state. This payment token must be passed into the web component payment-token attribute.

Basket state persistence

Any change to a basket (e.g. updating delivery methods, adding/removing items) requires a new payment token to be generated. Therefore, initiate-customer-payment should always be the last step prior to the customer completing a payment.

Once you have the payment token, render the <spektrix-payments> web component and listen for payment events after the Customer completes the order.

Web component sample for Customer Checkout:

<spektrix-payments
    id="paymentsComponent"
    custom-domain="{tickets.yourdomain.com}"
    system-name="{clientName}"
    billing-address-id="{billingAddressId}"
    payment-token="{paymentToken}"
></spektrix-payments>

See Payments API — Web Component for full component setup, attribute reference, and event handling.

For managing a customer's stored cards, see Card Management

For component styling and Apple Pay domain setup, see Payments Component.

Customer Checkout​

Customer Checkout