The fine print
- While Stripe's testing mode is strictly for their product directly, rather than integrations like Leadpages, you can still test out your checkout widget within Leadpages. Learn more below ↘
- The Leadpages checkout widget is not compatible with Stripe's Checkout client integration. Disabling Stripe's Checkouts is required to use the Leadpages checkout widget. Learn how more below ↘
- Make note of our FAQ article on this widget.
Add a Checkout
To start selling your product, drag a Checkout from the widgets panel and place it on your page or pop-up. A basic form will appear, along with its settings sidebar.
Connect to Stripe
If it’s your first time using the Checkouts, click Connect Stripe Account in the left sidebar. Or, create a new account at https://dashboard.stripe.com/register if you’re not already using Stripe.
Sell a product
When you set up a Checkout, you’ll need to specify a product to sell. More specifically, each Checkout must have a product and a specific SKU, as shown below. Keep in mind, you must set up a product and SKU in Stripe before you can use it in a Checkout—review the section below for full details.
Disable Stripe's Checkouts
In order to utilize the Leadpages checkout widget, you'll want disable Stripe's own Checkout client integration. This will allow you to set your product to zero dollars for testing as well as allow you to turn off shippable fields.
To disable Stripe's Checkouts:
- Log in to your Stripe account and navigate to Settings.
- Click Checkout Settings under "Stripe Apps."
- Switch the toggle at the top-right corner to the Disabled position.
Add a product from Stripe
Stripe has in-depth resources that cover how to set up products (including best practices). We recommend taking a look at their “Orders Guide” as you configure your account:
About Products and SKUs
A product in Stripe can be a physical or digital item, such as a T-shirt, ebook, or even software. When you create a product, you can define attributes to describe various properties. For instance, if you’re selling a T-shirt, you might have color and size attributes.
An SKU is an instance of your product with specific attributes. To continue with the T-shirt example, a blue, medium T-shirt would make up one SKU. You can add SKUs in your product’s inventory section, as shown below.
Keep in mind, you’ll need at least one active product with one SKU in Stripe in order to use Checkouts. Once you do, here’s how to select your product in a Checkout’s settings:
- Click the form on your page or pop-up, and navigate to the “Payments” tab in the left-hand sidebar.
- Select your product and SKU from the drop-down menus.
If your chosen product is marked as “shippable” in Stripe, shipping-related fields will automatically be added to your form. These fields are controlled within Stripe. Follow the steps below if you have a product that does not require shipping fields.
Remove shipping fields
- Select Products under Orders from within Stripe.
- Choose the product you'd like to edit.
- At the bottom of the product editing page, uncheck the box next to "Shippable."
- Click "Save product."
- Open your Checkout in the Leadpages builder, refresh ⟳ your Stripe products.
- Make sure the right product is selected and Update your page.
Note that all active products will appear in Leadpages—if you don’t see your product listed, try clicking the refresh button and make sure your product is set to “active” in Stripe.
If you’d like to display information about your product on your form, be sure to toggle the switch next to “Add an itemized summary on your form”.
Test your Checkout
Not to be confused with Stripe's in-app testing mode, to test the purchase of a product on your page:
- Set your product to $0.00 in Stripe.
- Open your Checkout in the Leadpages builder and refresh ⟳ your Stripe products.
- Update your page at the top-right corner of the builder.
- Visit the page and purchase your product.
After you've finished testing and are set to start selling to your page visitors, make sure to follow these steps to get your product set back to the right price.
Additional form options
Add an integration
Besides processing transactions, you can use Checkouts to collect other information about your customers—just like you can with any other form. To do so, navigate to the “Integrations” tab in a Checkout’s settings sidebar. Then, add your email service provider, webinar service, or other integrations.
For a full guide on how to configure your form’s integrations, check out: Connect Integrations.
Checkouts collect the following required fields:
- Email Address (used for email receipts)
- Card Number
- Expiration Date
- Billing ZIP Code
To ensure that you can collect payments through Stripe, these fields are not customizable. If you select a shippable product to sell, your form will also include required shipping related fields.
You can add an integration (such as your email service provider) to collect additional information from your customers. Your customers’ email address will get sent to Stripe and any other integrations. However, other custom fields (such as name, phone number, etc.) will only get sent to additional integrations, not Stripe.
Customize a Checkout’s appearance
You can customize your buy button’s color, style, and hover state just like a regular form widget. It will automatically display “Pay X.XX.” The “Pay” text cannot be edited manually from within Leadpages and the price will always reflect information from Stripe and therefore also cannot be edited.
Frequently asked questions
For quick answers on everything from product setup to form customization, check out: Checkouts: Frequently Asked Questions.
Need more help?
You can always get in touch with our support team—just click help_circle in the top-right corner of your Leadpages dashboard, or submit a ticket ↗