How To Add a Direct Checkout Buttons to your Webflow Website

Buy Now PayStand Button Add to Cart


One of the most exciting ways to offer payments, donations, and items in your Webflow website is with PayStand's Direct Checkout Buy Buttons. Again each of your PayStand's items automatically has button code that can be copied and pasted into your website as easy as embedding a YouTube video. When these buttons are clicked, an inline 1-click checkout receipt appears over your website for directly checkout.

Sample Website: Sample PayStand + WebStand Website

Step 1: Setup Your WebFlow

To learn how to setup your new page go to WebFlow University: Once you have your initial WebFlow website setup, find a place you would like to put a Add To Cart or Payment Button.

Step 2: Choose Where to Place Your Buttons

Your buttons can be placed anywhere on your website. You can take a donation or a payment from the header, you can put product items under images, or even build an entire product page around each buy button. Placement options are up to your imagination and creativity. No matter where you decide to place your buttons, once clicked a 1-click direct checkout receipt will appear over your site.

Step 3: Drag & Drop an "Embed" icon from "Layout Menu" into Select Areas

PayStand Add to cart Button Embed on Webflow WebsiteFrom the right "Add" menu with the "+" icon, drag & drop the "Embed" icon into the area you wish to embed your PayStand Button.

Step 4: Copy your PayStand Button Embed Code

PayStand Buy Now Button for WebFlow WebsiteFrom your PayStand Dashboard find the item you'd like to add a button for. Hover over that item until you see the card flip over. Click the "Share Item" button to bring up the embed/share promote options.PayStand Embed Code for Buy Now Button - Add to cart After hovering over "Buy Button" copy the button embed code you would like to show up on your page. You can grab the embed code for other items in a similar fashion.

Step 5: Paste your PayStand Button Embed Code to WebFlow Website

Paste PayStand Button Embed Code into WebFlow Website After double clicking the Embed section on your WebFlow website page, paste your PayStand embed code into the popup HTML code widget. Pro Tip: In the embed code, you can change the text that appears on the button (ie. Change "Pay" to "Online Payment")

Step 8: Publish your Page to See New Buttons

Publish your Webflow Website with PayStand Stores and Payments Click on the Rocketship Icon in the upper left hand corner to publish your site. Enjoy easy stores and payments with direct checkout in your Webflow website. Manage your store from your PayStand dashboard and changes are instantly made wherever you have your PayStand available.

Step 9: Bonus: Customize your Direct Checkout Experience

Your receipt and direct checkout experience can be customized to match the look and feel of your WebFlow website. Checkout our blog on Customizing your WebStand to learn more.

Step 10: Congratulations! Tell Everyone About your New Site

Have more questions? Submit a request


Please sign in to leave a comment.
Powered by Zendesk