How to Embed a Stripe Payment Button in Webflow
It's easy to create and embed a Stripe payment button into your Webflow website, just follow these steps:
Pre-requisite: Please watch Embed custom HTML - Webflow tutorial
Video: Here is the guide in video format (same as steps shown below with images)
Video: Here is the guide with text and images:
1.) In Paid Members App, click Setup Checklist
2.) Connect to Stripe if you have not done so yet.
3.) Click 'Create payment buttons'
4.) Click either One-time Payment or Subscription
5.) Click either Legacy Payment Button or New Checkout Button
6.) Fill in your button details and choose the Stripe plan for which you want to make a payment button. If you don't see all your plans, click the 'Sync w/ Stripe' button to pull in your updated plans. *You may see the word "SKU" or "Plan" or "Price" depending on which type of button you are making.
7.) If you do not yet have a Stripe plan, click '+ New Plan' to create a new plan. This will generate a new plan in your Stripe account too. Amazing! *You may see the word "SKU" or "Plan" or "Price" depending on which type of button you are making.
8.) Click 'Create Button'
9.) Click 'Copy to Clipboard'
10.) Make sure you are logged into your Webflow editor.
11.) Click on the pages panel on the left and choose a page or create a new page:
13.) In the Elements section in the Components area, drag in the 'Embed' element
14.) Delete any exsiting text in the HTML box and then paste in your code and click 'Save'.
15.) Then close the 'HTML Content' box. You may or might not see you button in the Webflow code editor, so simply click 'Publish' and look at your live website page.
16.) On your published page you will have a Stripe button. If you used our original Stripe payment button, it will pop up on your website. If you chose Stripe's Checkout button, it will redirect your customer to Stripe for payment.
