Open Checkout

Description

The openCheckout action navigates the user directly to the Shopify checkout page inside the Superfans app.
It allows customers to review their cart items, apply discounts, and complete their purchase — all within the in-app experience.

Function Signature

Superfans.actions.openCheckout()

Structure of Response

Example Usage

document.getElementById('promoBanner').addEventListener('click', () => {
    Superfans.actions.addToCart([
        {
            variantId: "45253067702457", // Example variant ID
            quantity: 1
        }
    ]).then(() => {
        Superfans.actions.openCheckout();
    });
});

.promo-banner {
  background-color: #ffcc00;
  color: #333;
  padding: 20px;
  text-align: center;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.promo-banner:hover {
  background-color: #e6b800;
}

<div class="promo-banner" id="promoBanner">
  <h3>Exclusive Offer!</h3>
  <p>Click here to checkout with our special deal.</p>
</div>

Best Practices

1. Trigger only with items in cart: Always verify the cart isn’t empty before opening checkout.
2. Combine with validation: Ensure customer details and discount codes are applied first.
3. Pair with enableCheckoutButton / disableCheckoutButton: Use these to manage checkout access state.
4. Handle asynchronous flow: Await the Promise to control subsequent UI updates.

Caveats

1. Active cart required: The user must have at least one product in their cart for checkout to initialize.
2. App-only navigation: Checkout opens within the Superfans app, not in an external browser.
3. No post-checkout event: The SDK doesn’t emit an event when checkout completes or closes.
4. Payment handling: Checkout uses Shopify’s native payment flow — not customizable via SDK.
5. Asynchronous behavior: Always handle errors or user interruptions gracefully.