GuidesReferenceChangelogVideosDiscord
Sign UpLogin

Collect One-Time Payment (Stripe) Web Flow Template

stripe0.png

This Web Flow template has pre-configured components to process payments through a Stripe instance. 

Collect One Time Payment Web Flow template components

This Web Flow contains two Web Pages, each with a different set of components, for users to choose one or the other:

Comprehensive Collect Payment Form

  • Label controls providing instructions to the user.
  • A Container with a Label and a Button control ready to be set up for users to click and read the Terms and Conditions.
  • Labels controls ready to be set up to display the user’s remaining balance, if any.
  • Stripe container including the following fields to proceed with the payment via the integration:
    • A G Pay Button control.
    • A Save Button
    • The user’s credit card number and expiration date
  • Apple Pay and G Pay Buttons.
  • A Payment Details Confirmed Button.
  • A Checkbox control for users to confirm the displayed details.
  • A Signature Input field with its corresponding option Button controls:
    • Save signature
    • Clear signature
    • Draw signature
    • Type signature
  • A Submit Button control.

stripewebpage1combined.png

Simple Collect Payment Form

  • Label controls indicating where users should enter their name and the mount to be charged.
  • Text input controls to enter name and amount.
  • A Label control displaying an error message if payment status is FALSE.
  • A Credit Card control including the following:
    • A card number input field
    • A card expiration date input field
    • A card verification code input field
    • A Submit Payment Button control that runs the Payment Collected Event

If the payment cannot be processed, the error message will indicate customers to try again. 

stripewebpage2.png

Variables

The Simple Collect Payment Form Web Page includes the following Variables saving the information of the use:

Text

  • name
  • errorMessage

Number

  • amount

Events

The Submit Payment Button in the Simple Collect Payment Form runs the Payment Collected Event, which is created as a web flow event. In Journey Builder you can continue the application’s path by adding an action to these Events or adding nodes to the Journey after them.

Stripe Integration

This template is set up so that the payment is processed through a configured Stripe instance.

In Settings, scroll down to Integrations to set up the corresponding credentials. For more information, see Creating a Stripe Integration. 

stripeintegration.png

Use Cases

  • Collect one time payments and process them via a Stripe instance through a Journey.