Membership Checkout

Open a checkout flow for membership purchases.

Basic Usage

Open checkout for the first membership type that is available in the online store (sorted by order):

Copy
Loby.checkout({ type: 'MEMBERSHIP' })

If you omit membershipTypeId, the SDK does not open a browse-all picker. It auto-selects that first eligible type and opens checkout for it.

Specific Membership Type

To open checkout for a specific membership type:

Copy
Loby.checkout({
  type: 'MEMBERSHIP',
  membershipTypeId: '08b0a9fb-6696-48c9-a9dd-6accd3c7ecaf'
})

This is useful when you have a "Buy Now" button for a specific membership tier.

Parameters

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

Example: Membership Purchase Buttons

Copy
<div class="membership-cards">
  <div class="card">
    <h3>Basic Membership</h3>
    <p>$49/year</p>
    <button onclick="buyMembership('basic-uuid')">Buy Now</button>
  </div>
  <div class="card">
    <h3>Premium Membership</h3>
    <p>$99/year</p>
    <button onclick="buyMembership('premium-uuid')">Buy Now</button>
  </div>
</div>

<script>
  function buyMembership(membershipTypeId) {
    Loby.checkout({
      type: 'MEMBERSHIP',
      membershipTypeId: membershipTypeId
    })
  }
</script>

Handling Completed Orders

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

Copy
Loby.addEventListener('orderCompleted', () => {
  console.log('Order completed!')
  // Update UI, show confirmation, etc.
})

User Flow

1. User clicks your "Buy Membership" button
2. You call Loby.checkout({ type: 'MEMBERSHIP', membershipTypeId }) (or omit membershipTypeId to use the first online membership)
3. SDK displays the checkout modal
4. User selects membership options and enters payment details
5. SDK processes the payment
6. SDK emits orderCompleted event
7. User sees confirmation and modal closes