Checkout Redirects in Memberstack

This article provides an understanding of how checkout redirects work in Memberstack. Checkout redirects are a vital part of the user experience, guiding members to the appropriate page once they've completed their purchase.

Understanding Checkout Redirects

Checkout redirects occur after a user has successfully completed their purchase on the Stripe checkout page. Depending on the plan being purchased, the user is redirected to a specific page. This page is determined by the signup redirect for the plan being purchased.

The checkout flow typically follows this sequence:

1. Member clicks a checkout button on your site
2. Member completes payment on the Stripe checkout page
3. Stripe processes the payment and notifies Memberstack
4. Memberstack creates or updates the member's account and plan
5. Member is redirected to the specified redirect URL for that plan

Setting Up Checkout Redirects

To set up a checkout redirect, you'll need to configure the signup redirect for the plan being purchased. This can be done in the plan settings of your Memberstack dashboard.

1. Navigate to your Memberstack dashboard. Log into your Memberstack account and go to the 'Plans' page.

2. Select the plan. Choose the plan for which you want to set the checkout redirect.

3. Set the Signup Redirect. In the plan settings, locate the 'On Signup' field. Enter the URL of the page to which users should be redirected after completing their purchase.

URL Formatting for Redirects

When setting up redirect URLs, remember:

• Use relative URLs, not absolute URLs. For example:

  ✅ /dashboard
  ❌ https://yoursite.com/dashboard

• Include the leading slash. For example:

  ✅ /thank-you
  ❌ thank-you

• You cannot redirect to external domains. Redirects must be to pages on the same domain as your Memberstack implementation.

Common Redirect Scenarios

Thank You Page

A common scenario is redirecting members to a thank you page that confirms their purchase and provides next steps:

/thank-you

On this page, you can display personalized content using Memberstack's member data to welcome them by name and confirm their purchase details.

Onboarding Flow

For more complex membership sites, you might want to redirect new members to an onboarding sequence:

/onboarding/step-1

This allows you to guide new members through setup processes, profile completion, or other necessary steps.

Member Dashboard

For simpler sites, you might want to redirect directly to a member dashboard:

/dashboard

Make sure this page has appropriate content visibility settings so it's only accessible to members on the correct plan.

Testing Your Checkout Redirects

It's important to test your checkout redirects to ensure they're working as expected. You can do this by:

1. Use Stripe test mode. Make sure both Memberstack and Stripe are in test mode.

2. Complete a test purchase. Use Stripe's test card (4242 4242 4242 4242) to make a purchase.

3. Verify the redirect. After completing checkout, you should be redirected to your specified URL.

4. Test on mobile devices. Checkout redirects sometimes behave differently on mobile browsers, so test on multiple devices.

Troubleshooting Checkout Redirects

If your checkout redirects are not working as expected, here are the most common issues and their solutions:

Redirect Not Working At All

• Verify the Signup Redirect URL format. Make sure the URL follows the formatting guidelines above (relative URL with leading slash).

• Check for typos in the URL. Even a small typo in the redirect URL can cause the redirect to fail.

• Confirm the page exists. Navigate to the redirect URL directly to ensure the page exists and is accessible.

• Clear browser cache and cookies. Sometimes cached data can interfere with redirects.

Mobile-Specific Issues

• Cookie limitations. Some mobile browsers have stricter cookie policies that can affect authentication state during redirects.

  Solution: Ensure your site is using secure (HTTPS) connections and that cookies are set properly.

Wrong Redirect Destination

• Check the redirect priority. Review the redirect hierarchy (explained below) to understand which redirect is taking precedence.

• Verify plan-specific settings. Make sure you've set the redirect for the specific plan being purchased.

Authentication State Issues

• Member not logged in after checkout. Sometimes members complete checkout but aren't properly authenticated on the redirect page.

  Solution: Add code to your redirect page that checks authentication status and redirects to login if needed:

  <script>
    document.addEventListener('memberstack.ready', async function(event) {
      const member = await window.$memberstackDom.getCurrentMember()
      if (!member) {
        window.location.href = '/login?redirect=' + encodeURIComponent(window.location.pathname)
      }
    })
  </script>

Redirect Priority Hierarchy

Understanding how different redirects interact is crucial. Here's the priority order from lowest to highest:

1. Default redirects - Set in your Memberstack dashboard under Settings → Redirects. These affect all members on your site.

2. Plan-level redirects - Set in each plan's settings. These override default redirects for members on that specific plan.

3. Member-level redirects - Set for individual members (via member-specific login redirects). These override plan-level redirects.

4. Form-level redirects - Set in form attributes on your site. These override all other redirects but are not recommended for most cases as they can create confusion.

Visual Representation:

Default Redirects
   ↓ (overridden by)
Plan-level Redirects
   ↓ (overridden by)
Member-level Redirects
   ↓ (overridden by)
Form-level Redirects

Advanced Redirect Techniques

Using Query Parameters

You can add query parameters to your redirect URLs to pass information to the destination page:

/thank-you?plan=premium

This can be useful for customizing the content on the destination page based on the plan purchased.

Dynamic Redirects Based on Member Data

For more complex scenarios, you can implement custom JavaScript to determine where a member should be redirected based on their data:

<script>
  document.addEventListener('memberstack.ready', async function(event) {
    const member = await window.$memberstackDom.getCurrentMember()
    if (member) {
      const data = member.customFields
      if (data.onboardingComplete) {
        window.location.href = '/dashboard'
      } else {
        window.location.href = '/onboarding'
      }
    }
  })
</script>

This approach gives you more flexibility than static redirects, but requires custom code implementation.

Conclusion

Properly configured checkout redirects create a seamless experience for your members after they've made a purchase. By understanding the redirect hierarchy, testing thoroughly (especially on mobile), and implementing the troubleshooting tips in this guide, you can ensure your members are guided to the right place at the right time.

For more information about other types of redirects in Memberstack, see our comprehensive redirects documentation.