Checkout Form

Checkout Form Overview, Features, & How-To's

Overview

The Billflow Checkout Form allows you to easily embed a payment form anywhere you need. Because it's connected directly to your Stripe account, you'll never have to worry about updating your website when you change your pricing.

You can customize the fields they need to enter, take payment for subscriptions or one-time payments, and automatically redirect to a page of your choosing.

The Checkout Form has a simple HTML/Javascript embed so it can be embedded into any website that will accept this common embed method.

Select a Service

A Service is a collection of Stripe Products & Prices that make up the tiers & intervals of a service offering. If you have not created a service already, you will have the option to create a 'demo' service. To learn how to create your own service and specific pricing model, continue reading here.

Select the service you wish to create a Pricing Page for.

Not seeing a service listed that you created in Stripe? Make sure you have that service in the same mode (Test or Live) as your billing page is in.

Choose a Tier & Interval

Checkout tier

Select the tier that the checkout form should be for.

Checkout interval

Select the billing interval that the checkout form should be for.

Checkout Form Settings

Checkout Layout

Choose to show the default horizontal checkout or a side-by-side checkout. Select one to see a preview of it.

Enable Product Image

Show the image configured on the Stripe product in the checkout form. If there is multiple products in the same plan, it will choose the image from the first line item.

Password

Turn on to request asking for a password. The password will be available in the handleResponse payload.

Custom Fields

Use the custom fields section to gather non-payment related information from your customers. You can assign a label and whether the field is required or not. This information will be available in the handleResponse function and is added to the Customer & Subscription metadata in Stripe. If a field is added for "Business Name?" for example, the metadata key "bf_cf_business_name" will be added to the Stripe Customer & Subscription with the value your customer entered on checkout.

Enable Coupon

Turn on to enable a button for users to add coupon codes. Coupons are created from the Stripe dashboard, to learn more about using coupons read along here.

Require Card on Signup

Turn this option on to always force a customer to enter their Credit Card information. By default, payment information will not be requested if a tier is free or has a free trial.

Use Stripe Styling

Turn this option on to use the default Stripe element styling. This only affects the Credit Card information field. You can fill the section with a Stripe Element style object exactly the same as how Stripe works. For an example, check this out.

Name on Card

Turn on to ask for Name in the Billing Information Section.

Billing Address Fields

Turn on Address fields to appear in the Billing Information section.

Enable Shipping Address Fields

Turn on to enable shipping fields, and select each field to appear in the Shipping Information section.

Terms & Conditions

Turn on to show a required Terms & Conditions checkbox on checkout. Once on you can configure the label, the link to your Terms & Conditions document, and the error if not checked.

Enable Quantity Selection

Turn on to enable the customer to change the quantity of a product on checkout. To use this feature, the metadata option sb_quantity_enabled: true must be on the Stripe Product. Learn more about this feature here.

Show total price in checkout

Turn on to show the total price to the customer when quantity is modified. Currently this only works with flat subscription models. Support for Volume and Graduated pricing models coming soon!

Enable Redirect URL

Turn on to enter a redirect URL when customers have successfully checkout out. This can be a full or or relative URL.

Limit One Subscription per Email

Turn on to limit one subscription per email. If a customer already has a subscription, an error will be shown. Stripe is queried to see if a subscription already exists for a customer with the entered email.

Set Customer Name from Card

Turn on to have the Customer object in Stripe to be populated with the value from the Name on Card field.

Dynamically Pass User's Identity

Turn on this option to dynamically pass in a customer's email or Stripe Customer ID. If a value is passed in, the checkout form will not ask the customer for an email.

If using this option, you must pass in a value to the embed snippet for either 'email' or stripe 'customer_id'. You will find it in the Billflow window settings of the embed snippet.

Enable Automatic Tax

Automatic Tax Calculation. Contact us for beta access to this feature.

Enable VAT ID Field

Collect a customer's VAT ID, it will be added to the Stripe Customer Object.

Select a VAT ID type

Select a VAT ID type. Eg: if you are in the EU, select the EU VAT option.

Language Settings

All Billflow billing pages have the ability to automatically detect the customer's browser language preference and translate the billing page accordingly. If the language is not supported by our page, a default language will be displayed. The default language is English US.

Automatically Detect User's Browser Settings

Turn on to automatically detect the customer's browser settings and translate the page. If not enabled, select your default language. Not seeing a language you need there? Contact us on the chat to request a translation.

Add a Custom Resource

Turn this option on to pass in your own translations. This can be used to host your own language files, but can also be used to change the text of specific sections to your desired text. To learn more about this option, read along here.

Advanced Settings

Enable Handle Response

Turn on to enable the handleResponse function. The function is used to handle events with custom code when events happen on the billing page like button clicks and actions performed. To learn more about events available and sample code snippets, read along here.

Debug Mode

Turn on to enable debug mode for extra console logging.

Embed

Embedding the Checkout Form is a one-step process. Just copy and paste the provided HTML snippet.

If you have a frontend framework, check out the samples of embedding with those.

Popular How-to's

pageCheckout Form Style TemplatespageUse CouponspageEnable Quantity Management

Developers

The Checkout Form has many more powerful features that can be unlocked with some simple coding. Check out the developer docs to learn more.

pageEmbed Configurations