Checkout Form
Checkout Form Overview, Features, & How-To's
Last updated
Checkout Form Overview, Features, & How-To's
Last updated
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.
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.
Select the tier that the checkout form should be for.
Select the billing interval that the checkout form should be for.
Choose to show the default horizontal checkout or a side-by-side checkout. Select one to see a preview of it.
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.
Turn on to request asking for a password. The password will be available in the handleResponse payload.
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.
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.
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.
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.
Turn on to ask for Name in the Billing Information Section.
Turn on Address fields to appear in the Billing Information section.
Turn on to enable shipping fields, and select each field to appear in the Shipping Information section.
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.
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.
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!
Turn on to enter a redirect URL when customers have successfully checkout out. This can be a full or or relative URL.
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.
Turn on to have the Customer object in Stripe to be populated with the value from the Name on Card field.
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.
Automatic Tax Calculation. Contact us for beta access to this feature.
Collect a customer's VAT ID, it will be added to the Stripe Customer Object.
Select a VAT ID type. Eg: if you are in the EU, select the EU VAT option.
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.
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.
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.
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.
Turn on to enable debug mode for extra console logging.
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.
The Checkout Form has many more powerful features that can be unlocked with some simple coding. Check out the developer docs to learn more.
