# Stripe payment ### The overview Integrate with [Stripe checkout](https://stripe.com/docs/payments/checkout) to collect payment after form submission Here is simply overview of the steps to setup the integration * Get the API key from Stripe admin dashboard * Customise the Stripe checkout in the Stripe admin * Create a new form for testing * Go to Form's Design to add a payment field and customise it * Save the form design * **Test the whole flow from customer point of view** * Do it on a live form when its all working Its always good idea to test things before making it live! ### How to get the Stripe API Sign up to a Stripe account if you don't already have one The [API key](https://stripe.com/docs/keys) should be available in the Stripe dashboard, please read the [latest Stripe doc ](https://stripe.com/docs/keys#reveal-an-api-secret-key-live-mode)for getting the key, normally it shoudl bein the Stripe dashboard > Developers > API keys > Get the key from there
While at the Stripe dashboard, might be good idea to customise the payment checkout, because that's what the app will be using Stripe-hosted checkout page, the customisation is in the Stripe dashboard > Settings > Payments > Checkout, to setup the branding and how it should be look like etc ### Setup the integration Once the Stripe API key is obtained, it need to put in the App admin > App Settings > Integration > Stripe payment > API key ### Setup the payment field Once the payment integration is validated and saved, the payment field will appear in the Form's Design (normally the payment field is not available if there is no payment integration) ![](/files/1VlkBWSnnjsUizePugSr) Add the payment field to the page - **ONLY ONE PAYMENT IS ALLOWED PER FORM**
The following field is required * Product name - this is the product name customer will see on the Stripe checkout * Price * Currency Its also possible to provide the messages for when the payment successfully paid or cancelled in the payment field options Save the form design after setup the payment field ### The frontend - what the customer see Once the form is saved, customer will present with the form without the payment field and customer will fill out the form normally and then will be redirect to payment checkout when the form data is saved **Customer submit the form -> Present with successfully saved data -> Redirect to payment checkout -> Customer enter the credit card or other method to pay -> Show payment success or cancelled message** Here is the example payment checkout (its possible to customise the looks an feels of [Stripe payment checkout](https://stripe.com/docs/payments/checkout/customization)) will be shown to customer after submit the form
**In the above the product name, price and description is set in the payment field** Once its successfully paid, it will present with the success message in the payment field ### Emails and Statuses By default when the customer submitted the form, the submission entry will have status **Requested** (its possible to chagne in the form's settings) and will automatically send out an email to customer (its cusotmizable in the Form's settings or disable the email) After the payment integration is enabled (with valid api key), the app will create two new status **paid** and **unpaid**, this will be like normal status you added manually When the customer go through the payment, the app will automatically change the entry's status to **Paid** when the payment is successfully, or **unpaid** when its not paid If you want to send out email after success payment, then you need to customise the email template in the App settings > Statuses > paid/unpaid status > add on email template ### Why you want payment integration? There are a lots reason why payment is needed after submit the form (e.g after registration and claim), here are some examples * Need to pay for the registration * Sometimes its desirable for customer to pay for part of the product when make claim * Need to pay for the shipping of the claim --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.productcares.com/integrations/stripe-payment.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.