Accepting Payments with Stripe in Formulayt


Formulayt’s Stripe integration lets you embed a PCI-compliant Stripe Payment Element directly inside any gate, so visitors can pay and submit in a single, seamless step. This guide walks you through:

  • Activating the Stripe app

  • Completing the “Basic settings” tab

  • Implementing the required Intent endpoint

  • Testing, troubleshooting, and optionally configuring events using the three Stripe data source values


(If you have never used Stripe before, first create a Stripe account and retrieve a publishable key – it always starts with pk_.)

1  Activate the Stripe App & Add It to a Gate

  1. In Apps ▸ Stripe toggle Active.

  2. Once you have completed the basic setup (detailed in the next steps), you will be able to add a Stripe payment element to any gate by using the Stripe gate type.

2  Complete the Basic settings Tab

Field

Description

Example

Public key

Your Stripe publishable key.

pk_live_51LX…

Intent endpoint URL

HTTPS endpoint you build (see Step 3). Formulayt will POST the first request and PUT subsequent updates.

https://pay.example.com/stripe/intent

Include fields with Intent request

Map gate-fields → JSON properties sent in every request.

amount → amount, currency → currency, product_id → product_id

Intent response client secret property name

Property that contains client_secret in the endpoint response.

clientSecret

Intent response payment ID property name

Property that contains PaymentIntent ID (e.g. pi_3Lx…). The same property is echoed back to the endpoint on PUT.

paymentIntentId

Intent response purchase description property name

HTML description shown under the Payment Element. If absent the payment area is hidden and the form is blocked.

purchaseDescription

Intent response field mapping

(Optional) Map any response property → gate field.

transactionAmount → amount

Payment response field

Hidden form-field that will receive the final PaymentIntent JSON after a successful payment.

stripeResponse

3  Build the Intent Endpoint


Your endpoint must:

  1. POST — Create a PaymentIntent

  2. PUT — Update the same PaymentIntent when Formulayt resends (the body will now include "paymentIntentId": "pi_...").


3.1  Incoming POST (create)

{  "amount": 1000,  "currency": "gbp",  "lang": "en" }

3.2  Expected POST response (2XX)

{  "clientSecret": "pi_3LxI…_secret_...",  "paymentIntentId": "pi_3LxI…",  "purchaseDescription": "You are buying <strong>Product X</strong> for £10" }

Any 4XX/5XX status code will cause the frontend gate to be hidden and an error to be displayed to the user("Error handling payment intent request from client endpoint") which can be customised in your translations area.


3.3  Subsequent PUT (update)

{  "paymentIntentId": "pi_3LxI…",  "amount": 2000 }

This endpoint is used to update the original payment intent, e.g. if the end user selects a different product to purchase. Respond with the same JSON schema as above. Omit purchaseDescription if you need to hide the payment box and keep the form blocked.

4  What Happens in the Gate

  1. On load

    • Formulayt POSTs to your endpoint.

    • If successful, the Payment Element renders; the visitor now sees card, Apple Pay, etc.

  2. On field changes

    • Mapped fields fire a PUT to the endpoint.

    • If the endpoint responds 2XX the element updates; if 4XX/5XX the gate is aborted.

  3. On submit press

    • Stripe Element is validated (elements.submit()).

    • Form is validated.

    • stripe.confirmPayment() runs.

    • On success, the full PaymentIntent object is serialized into Payment response field, the form  submits.

5  Events and Data Sources


The following events are also avalable in your events area to add your custom code to:

  • Intent received

  • Payment success

  • Payment failure


The below data sources are also available for you to use in your custom event code:

ID

Content

Typical Use

lastIntentObject

Every successful Intent response (POST or PUT).

Save pricing data to a CRM.

lastPaymentErrorObject

Any Stripe client-side error or stripe.confirmPayment error.

Send to Slack for failed attempts.

lastPaymentSuccessObject

PaymentIntent status =succeeded.

Trigger fulfilment email or digital-download delivery.



Use them exactly like any other Formulayt trigger in Goal Tracking or Automation.

6  Testing Tips

  • Use Stripe’s test cards (4242 4242 4242 4242, etc.) in test mode.

  • Add console.log(response) in your endpoint to verify JSON structure.

  • If the payment box vanishes, check your endpoint returned purchaseDescription.

  • A burst of 4XX/5XX responses will immediately abandon the gate—look for the error message “Error handling payment intent request from client endpoint” in your logs.

7  Going Live

  1. Switch your publishable key and endpoint to live mode.

  2. Ensure paymentResponseField is hidden (so users don’t see JSON).

  3. Submit a £0.50 live transaction to confirm everything from creation → confirmation → form submission works.


That’s it—your Formulayt gate is now taking secure payments with Stripe!