How to streamline membership plan signups with Stripe checkout for both new and existing users? Answered

• 

  Raquel Lopez

  • September 21, 2025 21:17

  Hi,

  The data-ms-form="signup" attribute is meant only for new users who don’t have an account yet.

  If you want to let existing users add a new membership, there are a few steps:

  1. The user must be logged in.
  2. You can then use a button with the data-ms-price:add attribute ( this will open the checkout for that logged-in user).

  In summary:

  1. New users: Use a signup form with a paid plan attribute. After signup, the checkout will launch automatically.
  2. Existing users (not logged in): Encourage them to log in first. On your signup page, you can add a link or button like “Already have an account? Log in.”
  3. Logged-in users: Use a button with data-ms-price:add to show the checkout.

  More details here:

  • How to change a member’s plan – Memberstack Doc
  • Getting Started with Plans & Prices

  Also, keep in mind that you can update a user’s custom fields by using the attribute data-ms-form="profile" on a form. When the user submits this form, all the custom fields included will be updated automatically.

  This is especially useful for onboarding flows right after signup, or for allowing users to edit their info on a profile page.

  Just remember: custom fields are tied to the user account, not to a specific plan.

  0
• 

  Nick Osborn

  • September 21, 2025 21:20

  Thanks for the reply. Ok for my scenario 2 (member logged in sign up process),if I have:

  • data-ms-price:add=priceidxxx attribute on a product page button shown only to logged in members
  • The above button links to a page with my form that now has data-ms-form="profile" in the Form block attributes - intention here is to check them to check/update their shipping address before completing the Stripe checkout. (NB: using Stripe checkout for the address is not an option as this only allows for billing address collection currently)

  Then when I click the product page button, it just fires up the Stripe checkout straight away, ignoring my form?

  Have I done something wrong, or is this by design, i.e. I will never be able to include what is basically a profile update form mid way through the checkout process for an existing user?

  Thanks for the links, that's a neat workaround to direct the member to complete signup with this https://www.memberstack.com/webflow/complete-checkout-message

  However I still need to understand how you'd recommend me gathering the shipping address in this scenario? That complete checkout message is going to send them straight to checkout, but I still need to get their shipping address?

  0
• 

  Raquel Lopez

  • September 21, 2025 21:24

  Hello again!

  I think collecting the address information before sending users to checkout is a great idea. It gives you more control over the user journey in Webflow.

  You might want to explore Memberstack’s onboarding components — just note that the _"Return to Checkout" _component you just shared is designed to show a message to users who visited the checkout but didn’t finish their purchase. It’s not meant for guiding users through missing steps in your onboarding flow.

  In your case, you’ll need to handle the purchase intent manually by sending users to an address collection form before checkout.

  Here’s how you can structure it:

  • After signup, redirect users to the address collection form.
  • If a logged-in user selects a plan (e.g., from your pricing table), also redirect them to the address collection form.

  To launch the checkout after users submit their address, you’ll need a small custom script. This works best if the user has already selected a plan before arriving at the address page.

  Example flow:

  1. On your pricing page, when a user clicks a plan, send them to the URL where you're hosting the address collection form:

     /purchase/address-collection?priceid=prc_123
     

     Replace prc_123 with the actual Memberstack plan price ID.
  2. On your address collection page, just before the closing </body> tag, add this code:

     <script>
     
     document.querySelector('#YOUR_SUBMIT_BUTTON_ID').addEventListener('click', function () { 
     const urlParams = new URLSearchParams(window.location.search); 
     const priceId = urlParams.get('priceid'); 
     
     if (!priceId) { 
     window.$memberstackDom._showMessage('priceId does not exist', true); 
     return;
      } 
     
     window.$memberstackDom.purchasePlansWithCheckout({ 
     priceId: priceId, 
     }); 
     });
     </script>

  
  Replace `#YOUR_SUBMIT_BUTTON_ID` with the actual ID of your form’s submit button.

  This way, **checkout will only be triggered after users complete the address form**, ensuring you always collect that information first.

  When setting up the redirect always make sure to add the query parameters using the URL option

  

  0
• 

  Nick Osborn

  • September 21, 2025 21:32

  Amazing work again Raquel, thank you! That works perfectly to launch the checkout. One last bit of logic I need - if a user doesn't need to update their address, or edits just one field but doesn't click out of that field, then the profile form submit button remains disabled. I did try a workaround by adding a separate non-submit button to proceed to checkout, but realised this was a bad idea as it would miss address updates if the user never clicks the submit for the profile form. From a bit of ChapGPT I believe I need the submit button to be valid as long as required form fields are filled, and not wait for any input - that way, if the users current address is valid, they can just click submit to hit the checkout.

  I think I found a workaround for this - I've added a tick box to the form for "Tick to confirm you've checked your shipping details", this activates the button, albeit with a delay of about 15 seconds for the button to become clickable, although I'm hoping this is just due to testing.

  Update: It was the Webflow form bot detection causing a delay on the button being activated! Hope this helps anyone else getting frustrated on why some form buttons sit unclickable for a random amount of time.

  0

Please sign in to leave a comment.