Membership Checkout

Open a checkout flow for membership purchases.

Basic Usage

Open the membership checkout with all available membership types:

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

This opens a modal where users can browse available memberships, select options, and complete their purchase.

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

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 class="card">
    <h3>View All Options</h3>
    <button onclick="Loby.checkout({ type: 'MEMBERSHIP' })">
      Browse Memberships
    </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' })
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