Stripe payment
Integration with Stripe checkout (Stripe-hosted checkout page) to allow customers to pay after product registrations/claims
The overview
Integrate with Stripe 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 should be available in the Stripe dashboard, please read the latest Stripe doc 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
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)
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) 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
Last updated
