All Collections
Building Blocks
Components
Stripe Checkout
Stripe Checkout

Streamline transactions and let flow visitors complete purchases directly from your heyflow.

Heyflow avatar
Written by Heyflow
Updated over a week ago

With the Stripe checkout block, you can add payments and transactions to your heyflow and let flow visitors complete one-time purchases without leaving the site.

This feature is not available to all Heyflow customers. Check our plan overview for more information.

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 screens 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.

Also, we don't support the block inside embedded flows yet.

Initial setup of Stripe Integration

  1. Click on your initials in the top right corner to open your Account settings and go to “Integrations”.

  2. Select “Add integration” and a pop-up window will appear. Here you need to select Stripe.

  3. You will be prompted to enter your Stripe credentials to authenticate your account.

  4. Now that you have connected Stripe, you can add the Stripe checkout block to any heyflow!

Adding the Stripe checkout block to your heyflow

  1. Drag the Stripe checkout block into the editing panel of your heyflow

  2. Click on the block to open the settings

  3. First, you need to select your Stripe account. If it’s not listed here, you first need to authenticate your account in the “Integrations” section of your account settings.

  4. Choose your currency and the amount, and set a success message if desired. Scroll to the “Appearance” Tab to select from different presets.
    Now your Stripe checkout block is good to go!

Important: If you change the price in the block settings, the new amount will be shown in your live flow immediately without the need to republish.

Customizing your Stripe checkout block

Beside the general appearance and behavior settings for blocks, you can change a few things about your Stripe checkout in the block settings.

  1. Change the wording of your "Pay now" button in the editing panel
    ​

  2. Select from different Stripe presets to change the design
    ​

  3. Decide whether flow visitors should be directed to the next or a particular screen, whether the payment should be the submit event or if they should be redirected somewhere else.
    ​

  4. Define the Success Message that should be displayed when the payment has been processed successfully.

❗ Important: The language of the block adjusts automatically depending on the user's browser language.

Edit Options

General

  • Stripe account: Select your Stripe account.

  • Currency: Choose wether the currency is EUR (€) or USD ($).

  • Price: Select the price of the payment.

    • Important: A change in the price leads to an immediate price change in the published flow.

  • Success message: Define the message that is displayed if the payment was successful.

Navigation

  • Navigation: Select the action that takes place after successful payment.

Spacing

  • Width: You can use this to adjust the maximum spread of the block and choose between S, M, L and maximum width.

  • Top, Bottom, Left and Right: You can use these options to set the distance to all sides. To do this, either use the slider or specify the exact number of pixels.

Appearance

  • Visibility: Here you can select whether the block is only displayed in the mobile or desktop version or whether it is hidden completely.

  • Background colour: You can select a colour to be used as the background for the block.

  • Layout: Select the layout of the block.

  • Stripe theme: Select the theme of the block.

Labels & Variables

Did this answer your question?