# Stripe Payment

<div align="left"><figure><img src="https://3401585094-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmnBepgycwgisXr9ya1N4%2Fuploads%2F84kFylRfkLILjdBaorxO%2Fimage.png?alt=media&#x26;token=b5baa1ed-c94a-496c-ac07-d33e1f3b8c01" alt="" width="62"><figcaption><p>Stripe Payment</p></figcaption></figure></div>

{% hint style="info" %}
The Stripe Payment element requires at-least one connection to an active Stripe account. For more information please click [here](https://docs.zingy.ai/app-editor/connections/services/stripe).
{% endhint %}

The **`Stripe Payment`** element provides a turn-key solution to accept payments inside your app.&#x20;

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](https://docs.zingy.ai/app-editor/page-editor/page-preview) feature.
* It will span the entire width of their parent element horizontally.

The Stripe Payment element uses the [Test Mode keys](https://docs.zingy.ai/connections/services/stripe#test-mode-publishable-key) when you preview the page and uses the [Live Mode keys](https://docs.zingy.ai/connections/services/stripe#live-mode-publishable-key) when your page is normally loaded by your app's users.&#x20;

The information about successful payments are posted to the [Stripe service](https://docs.zingy.ai/app-editor/connections/services/stripe) 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.&#x20;

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

<figure><img src="https://3401585094-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmnBepgycwgisXr9ya1N4%2Fuploads%2FH3i4KZ3UtIxZw4lLQO4M%2Fimage.png?alt=media&#x26;token=8d5f4847-bc72-4253-ba2f-0aeb00905775" alt=""><figcaption><p>Example showing Stripe Payment placeholder in the page editor.</p></figcaption></figure>

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

<figure><img src="https://3401585094-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmnBepgycwgisXr9ya1N4%2Fuploads%2FAaB2s6HtXPDQ7HfPTKTL%2Fimage.png?alt=media&#x26;token=5402a496-5aa6-4065-bdde-197e91f311ed" alt=""><figcaption><p>Example showing Stripe Payment element when the page is loaded</p></figcaption></figure>

***

## Options

The [Options tab](https://docs.zingy.ai/app-editor/page-element-settings#options-tab) settings for this element are described below:

### `Stripe Connection`

Select the Stripe service connection you want to use for the element.&#x20;

### `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.

<div align="left"><figure><img src="https://3401585094-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmnBepgycwgisXr9ya1N4%2Fuploads%2Ftkk98wsyGF8CHpSwLhqX%2Fimage.png?alt=media&#x26;token=a7be0c06-c7b9-44e2-89e6-bc99002509e2" alt="" width="375"><figcaption><p>Stripe Payment: Require Address</p></figcaption></figure></div>

### `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](#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](#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](https://docs.zingy.ai/app-editor/page-flow) to set this value.