Stripe

The Stripe integration will exchange credit card info for a token your server can use to create a charge, or save a credit card for later use.

Setup

Copy your Publishable Key from your Stripe Dashboard. In the Mason Builder's Configure Mode, click on Stripe under Integrations and paste in your Publishable Key.

Next, switch to Design Mode, and drag out a Credit Card Form from the Elements panel in the left sidebar.

Finally, switch to Configure Mode and select the form named stripe. Do not rename the form. The Stripe integration will only process forms named stripe. Set the form's action to be whatever server-side destination you want to receive the Stripe token Mason retrieves.

That's it! You're ready to start collecting credit card data with Stripe.

Additional Fields

By default, the Credit Card Form element contains only the required credit card fields. If you'd like to add additional fields, they will be sent to your server after the credit card data is sent to Stripe, along with the Stripe token. If you'd like to provide additional data to Stripe, it must match the Stripe tokenData object keys. Ensure your input names match the Stripe keys exactly.

Payload

The default payload for a Stripe-integrated form is your serialized form fields, and a stripeToken string which you can use to create a charge or customer object with Stripe's API on your server. Assuming a POST request, the body will be

{
  email: '[e-mail]',
  name: 'John Doe',
  stripeToken: 'tok_XXXXXX',
}