Checkout Flows

Open a custom checkout flow that you authored in Loby Cloud. A flow can mix memberships, gift cards, tickets, events, products, donations, and marketing consent in the order you defined.

Membership add-ons on a MEMBERSHIP step work the same way as on the hosted checkout flow page.

Basic Usage

Copy
await Loby.waitForCheckoutReady()
Loby.checkout({
  type: 'CHECKOUT_FLOW',
  checkoutFlowId: '08b0a9fb-6696-48c9-a9dd-6accd3c7ecaf'
})

Call waitForCheckoutReady() before checkout. If checkout is not ready, checkout returns without opening a dialog and without throwing.

Parameters

The id is the last segment of the checkout flow URL in Loby Cloud:

/manage/:museumId/checkout-flows/:checkoutFlowId

The flow must belong to the museum of your SDK clientId, and its test mode must match Loby.init({ testMode }). A live SDK cannot open a test-mode flow, and a test-mode SDK cannot open a live flow.

If the id is missing, the flow is not found, it belongs to another museum, test mode does not match, or no sellable steps remain, the SDK logs an error to the console and does not open checkout.

Example: Buy Button for a Named Flow

Copy
<button id="buy-combo">Buy tickets and membership</button>

<script>
  document.getElementById('buy-combo').addEventListener('click', async () => {
    await Loby.waitForCheckoutReady()
    Loby.checkout({
      type: 'CHECKOUT_FLOW',
      checkoutFlowId: '08b0a9fb-6696-48c9-a9dd-6accd3c7ecaf'
    })
  })
</script>

Handling Completed Orders

Listen for the orderCompleted event to respond when a purchase is completed:

Copy
Loby.addEventListener('orderCompleted', () => {
  console.log('Order completed!')
})

User Flow

1. User clicks your button
2. You call Loby.checkout({ type: 'CHECKOUT_FLOW', checkoutFlowId })
3. SDK loads that checkout flow and displays the checkout modal
4. User completes the steps in the flow and pays
5. SDK emits orderCompleted