Triggering a stripe checkout through webflow form submission Answered
I want to trigger a stripe checkout when webflow form submission is being triggered, getting a price id from dropdown
what's the best way to do that.
I want to trigger a stripe checkout when webflow form submission is being triggered, getting a price id from dropdown
what's the best way to do that.
Comments
12 comments
https://www.loom.com/share/8f5585be121043f58f69b4678c1bd483
<script> // Get the form element and dropdown element const submit = document.querySelector('#submit-me'); const dropdown = document.querySelector('#dropdown'); // Listen for changes in the dropdown selection dropdown.addEventListener('change', () => { // Update the data attribute value with the selected option value submit.setAttribute('data-ms-price:add', dropdown.value); }); </script>Thanks Julian Galluzzo so I am working on little complex version of this code, I binded a
price ID with the button click, because I want to get the price ID into different page using quary params.
so when user clicks on any plan item, it redirects to waiver form (where user enters all the info etc..)
on form submitting > Data pushes to webflow form [Not related to to MS] & after few seconds, plan is to redirect to stripe checkout using MutationObserver. [which is not triggering]
adding a script for waiver page: https://slater.app/128/291.js
https://www.loom.com/share/d6104471a1954395924f819f4416ef59
is the user signed in at this point, or not yet?
Yup user is signed in at this point, only set this form for logged in members
& if someone grabs a link from somewhere & its not logged in, redirecting to homepage using this
window.$memberstackDom.getCurrentMember().then((member) => {if (member.data) {
console.log("there is a member", member);
// do logged in logic here
} else {
console.log("no member", member);
window.location.replace("/");
}
});
const memberstack = window.$memberstackDom window.$memberstackDom.getCurrentMember().then(async ({ data: member }) => { await memberstack.purchasePlansWithCheckout({ priceId: priceidvalue, // required }); });in that case, I'm thinking you can set a hidden button attribute on the page using the method I sent (instead of setting the submit button value), and then set it to automatically click this hidden button 1 or 2 seconds after the form submit event happens
Yeah, that's a good solution too, I am thinking I am making some mistake here in MS documentation, Price ID should be inside ""Commas, but I am getting a value dynamically, so not sure how to do that
If you just trigger the button click with an attribute applied, you won't need this as it will all happen automatically
then it's simple, you aready have everything set up to save and present the price ID, all you need to do is automatically add it to a hidden button and then make JS "click" that button 1s after the form submission
Yup, now trying that way 🌝
Julian Galluzzo finished via form submit button on click event
https://www.loom.com/share/3bf9d7fa6ea4447ca66d72ec4c968916
not sure if its a good method or not since we are not actually validating it if form is "success" or not.
I think this is overall OK and there shouldn't be many problems
a safer way would be to trigger it with some code on the form submit event instead of the button click, but I would leave this as-is for now and then improve it down the road if problems do occur
Yeah totally, also last question, is it possible to get a plan for member signing up them using email ID & not password.
so instead of user logging into site, they directly choose a plan & do the checkout.
I don't believe this is possible, you could do passwordless login or social auth though
gotcha, will try to convince client 😅
Please sign in to leave a comment.