⭐ Available in the following bundle: Conversion Bundle (incl. in Growth, Scale)
⭐ Available on the following plans: Business
👀 Not sure which plan you're on? Check your subscription here.
Let your visitors complete purchases directly from your heyflow with the Stripe Checkout block. Integrate payments and transactions with ease, making the entire process secure, convenient, and hassle-free for your heyflow visitors. Let flow visitors complete one-time purchases without leaving the site!
❗Are you currently trialing Heyflow? For security reasons, this feature is not available during the trial period. If you have any questions or need support, feel free to reach out via the chat or email us at [email protected].
❗Important: The Stripe Checkout Block is only visible in live mode and the published flow, but not in the edit mode.
How does it work
The design of your Stripe block depends on your Stripe presets. You can select from different Stripe presets in the “Appearance” tab in the block settings.
For security reasons, you can only set one amount per checkout block. If you would like to add multiple checkout options with different amounts to your heyflow, we recommend, including multiple pages with Stripe checkout blocks and routing your flow visitors to the applicable one with conditional logic.
For now, the Stripe checkout block only accepts credit cards. Other forms of payment (e.g. PayPal, Bank Account) cannot be used.
Moreover, we don't support the block inside embedded flows yet.
❗ Please note: This feature will initially be released as a Beta version, providing Heyflow customers with free access. Please note that in the future, we may introduce a revenue share or flat fee pricing structure.
Initial setup of Stripe Integration
Click on your initials in the top right corner to open your Account settings and go to “Integrations”.
Select “Add integration” and a pop-up window will appear. Here you need to select Stripe.
You will be prompted to enter your Stripe credentials to authenticate your account.
Now that you have connected Stripe, you can add the Stripe checkout block to any heyflow!
Update the Content
After clicking on a building block, you’ll find the Content section on the right.
First, update the Button label you'd like to show to the users. Finally, specify the Success message, which is the text displayed to users once their payment has been completed successfully.
🔎 The Stripe Block button color is always the secondary color. Learn more about the general flow theme here.
Change the Settings
After clicking on a building block, you’ll find the Settings section on the right. This is where you can customize the block’s style, appearance, and behavior to tailor it perfectly to your flow.
General
In the General settings, you can configure all details related to processing payments. First, select the Stripe account you want to connect.
Then choose the currency for the transaction, either EUR (€) or USD ($). Next, define the price of the payment. You can also send values from your flow to Stripe, e.g. name, email, and phone.
❗ Important: Keep in mind that any change to the price takes effect immediately and updates the published flow without delay.
Navigation
Under Navigation you can select what happens after the Stripe payment:
Next page: Go to next page in order
Go to page: Choose a specific page
Redirect: Navigate to another webpage
Submit: Submit the form
Appearance
Set the block’s visibility to show only on mobile, desktop, or hide it completely. Additionally, you can select a background color for the block.
For the layout you can choose between Automatic, Tabs and Accordion. Also, you can select a different Stripe Theme, e.g. Night, Flat, Minimal, Ninety Five, Bubble Gum or Dark Blue Theme.
❗ Important: The language of the block adjusts automatically depending on the user's browser language.
Spacing
Control the block’s layout by adjusting its width (S, M, L, or maximum) and setting the block's padding from the top, bottom, left, and right.
Labels & Variables
System Labels define how your data is stored and organized.
Tracking
If Tracking is activated for that block, you can give the successful payment an event name that will be sent to your connected tracking tools. You can find more information about tracking here.
