Use Stripe Checkout To Accept Payments with Formeezy

What is Stripe Checkout?

Stripe Checkout is the easiest way to credit card accept payments online without having to manage and build the complexities involved in a front-end checkout system. However, there is still quite a bit of backend work that you must do to get up and running.

The Formeezy Stripe Integration takes care of everything you need to coordinate payments using Stripe Checkout. By simply adding a price_id field and assigning it a value, you can start collecting payments in minutes.

Our integration offers you the ability to send your customers to a Stripe hosted checkout page, as well as the ability to manage their account, plan, payment methods, and download an invoice immediately post-sale. Start collecting one-time and recurring payments in minutes - the easy way!

No JavaScript packages required

How to use Stripe Checkout with Formeezy

Getting started will take just a few minutes if you already have a live Stripe account.

• Connect your Stripe Account to your Formeezy account
• Enable Stripe Checkout in your Stripe Account
• Enable Stripe Portal(Optional) if you would like to offer the ability to manage their subscriptions and payment methods post-sale.
• Create your Product and Price in Stripe
• Add your Price ID to your Form (Examples below)

Connect Stripe to your Formeezy account

Connect your Stripe account in just a few steps by visiting your Formeezy account page. You can disconnect from inside the app, or inside Stripe at any time.

Finding your Price ID

Once you've configured Stripe to allow Checkout and connected your Stripe account, you're ready to find your Price ID and build your form. To find your Price ID navigate to Products, click on your product, and scroll down to "Pricing". You should see a list of all IDs configured for this product.

Copy the ID you'd like to add to your form and you're ready to go.

Using Stripe Checkout with an HTML Form example

Below is an example HTML form that can be used on simple and static websites. All you need to get this example working the the price_id and your Formeezy endpoint.

Copy
<!--
* Add your Stripe Price ID
* Process payments with Stripe Checkout
* ...That was easy!
-->

<form action="{Fomeezy-Endpoint}" method="POST">
  <input name="price_id" type="hidden" value="price_1234567890abcdef"></input>
  <button type="submit">BUY</button>
</form>

Using Stripe Checkout with a React form example

The example below shows a simplified React example using the FormData method to capture values and submit. The price_id can also be manually added to state, omitting the need to include an input at all.

Copy

import React from 'react';
import axios from 'axios';

function Form(){
  async function handleSubmit(e){
    e.preventDefault();

    // Use fetch or axios to submit the form
    await axios
      .post({FORMEEZY-ENDPOINT}, new FormData(e.target))
      .then(({ data }) => {
        const { redirect } = data;
        // Redirect used for reCAPTCHA and/or thank you page
        window.location.href = redirect;
      });
  }

  return (
    <form onSubmit={handleSubmit}>
      <input name="price_id" type="hidden" value="price_1234567890abcdef"></input>
      <button type="submit">BUY</button>
    </form>
  )
}

Adding multiple Stripe products to a form

You may need to add multiple Stripe products to a form. For example a one-time set-up fee and a monthly recurring subscription. Our forms support this out of the box by simply adding a comma between your Price IDs.

Below is an example HTML form that shows how multiple products can be added to a Stripe Checkout session.

Copy
<!--
* Add a comma between your Price IDs: price_xxxxxxxxxxxxx, price_xxxxxxxxxxxx
-->

<form action="{Fomeezy-Endpoint}" method="POST">
  <input name="price_id" type="hidden" value="price_1234567890abcdef, price_0987654321abcdef"></input>
  <button type="submit">BUY</button>
</form>

Notes

• You must use live products to test the Checkout integration.
• If you are creating a pricing page or something similar, we recommend using multiple forms to accomplish this. For example:

Copy
<!-- Plan 1 -->
<form action="{Fomeezy-Endpoint}" method="POST">
  <input name="price_id" type="hidden" value="price_1xxxxxxxxxxxx"></input>
  <button type="submit">BUY Basic Plan</button>
</form>

<!-- Plan 2 -->
<form action="{Fomeezy-Endpoint}" method="POST">
  <input name="price_id" type="hidden" value="price_2xxxxxxxxxxxx"></input>
  <button type="submit">BUY Plus Plan</button>
</form>

<!-- Plan 3 -->
<form action="{Fomeezy-Endpoint}" method="POST">
  <input name="price_id" type="hidden" value="price_3xxxxxxxxxxxx"></input>
  <button type="submit">BUY Pro Plan</button>
</form>