Member Billing and Checkout with the Memberstack DOM Package

Article author
Josh Lopez
  • Updated

This article explains how to integrate billing and checkout functionality using the Memberstack DOM package. The Memberstack DOM package provides a Javascript API for integrating Memberstack into browser-based apps. It enables features like user authentication, management, and billing without needing to interact directly with Memberstack's API. We'll cover initiating checkout using Stripe, managing billing through Stripe's portal, and handling billing-related events. This article assumes you already have the Memberstack DOM package installed and configured in your Javascript application. It also assumes a basic understanding of JavaScript promises and async/await for dealing with asynchronous code.

Note: The Memberstack DOM Package can be accessed through the Webflow Package as well by using window.$memberstackDom.purchasePlansWithCheckout(...) instead of memberstack.purchasePlansWithCheckout(...).

Initiating Checkout

To begin the checkout process, call the purchasePlansWithCheckout method:

// Launch checkout for a specific price ID 
const checkoutResult = await memberstack.purchasePlansWithCheckout({ 
  priceId: "price_abc" 
});

This will initiate the Stripe checkout flow for the plan associated with the provided price ID. Some things to note:

  • The priceId parameter is required.
  • This returns a promise, so you need to await it or handle it with `.then()`.
  • You'll likely want to handle errors in a try/catch block.

There are additional optional parameters you can pass:

  • cancelUrl - This allows you to specify a URL to redirect users to if they cancel out of the checkout process. If no cancelUrl is provided, users will be redirected back to the current page.
  • successUrl - This allows you to specify a URL to redirect users to after they successfully complete the checkout process. If no successUrl is provided, users will be redirected back to the current page after checkout is complete.
  • autoRedirect - This boolean controls whether users are automatically redirected to the checkout flow or if the checkout URL is simply returned from the function instead. If autoRedirect is true (the default), users will be automatically redirected. If false, the function will return the checkout URL rather than redirecting.

Managing Billing

To open the member billing portal, use the launchStripeCustomerPortal method:

 const portalResult = await memberstack.launchStripeCustomerPortal(); 

This will open the Stripe customer billing portal for the current member. They can manage payment methods, subscriptions, invoices, etc from here.

Like checkout, this returns a promise so you'll need to await it or use `.then()`.

That covers the basics of integrating billing and checkout with Memberstack DOM! Let me know if any part needs further explanation.

 

Check out the other articles in this series:

  1. Getting Started with the Memberstack DOM Package (Front-end API)
  2. Working with Memberstack DOM Package Modals
  3. Managing App Data with the Memberstack DOM Package
  4. Member Authentication with the Memberstack DOM Package
  5. Member Billing and Checkout with the Memberstack DOM Package
  6. Member Management with the Memberstack DOM Package
  7. Events and Webhooks with Memberstack DOM

Was this article helpful?

Comments

0 comments

Please sign in to leave a comment.