Stripe Payment

The Stripe Payment element requires at-least one connection to an active Stripe account. For more information please click here.

The Stripe Payment element provides a turn-key solution to accept payments inside your app.

The Stripe Payment is a widget element with the following characteristics:

  • It exhibits content dynamically upon page load. Within the page editor, it will showcase a placeholder that denotes the designated content area. To preview the element's appearance on your page, utilize the Page Preview feature.

  • It will span the entire width of their parent element horizontally.

The Stripe Payment element uses the Test Mode keys when you preview the page and uses the Live Mode keys when your page is normally loaded by your app's users.

The information about successful payments are posted to the Stripe service Connection Data.


Example

The image below shows a stripe payment element placed inside in the right layout column. For demonstration the left layout column is styled with a green dashed border, and the right layout column is styled with a red dashed border.

In the page editor, the stripe payment element is rendered with a place holder as shown below.

When the page is previewed or loaded by the user, the stripe payment element is rendered as shown below.


Options

The Options tab settings for this element are described below:

Stripe Connection

Select the Stripe service connection you want to use for the element.

Sendgrid Connection for Email

This is an optional setting. If you want the customer to receive a payment receipt email from your app, select the Sendgrid service connection here.

Require Shipping Address

Turn this ON if you want the stripe payment element to ask the user for their address.

Email Payment Receipt to Customer

Turn this ON if you want the customer to receive a payment receipt email from your app. This works in conjunction with the Sendgrid Connection for Email setting.

Email Notification

Turn this ON if you want a payment notification email to be sent to the address set in the Notification Address setting.

Notification Address

Specify the email address you want the payment notification to be sent to.

Amount

Provide the amount you want to charge using the payment element. If you need to calculate the amount dynamically when the user is using the app, enter 0 and use Page Flow to set this value.

Last updated