Integrating Stripe into Formspree

[smakosh]

What's new?

• Add support for Stripe

Demo usage:

Underneath: https://stripe.com/docs/payments/accept-a-payment-synchronously?html-or-react=react

yarn add @formspree/react

import { useForm, FormspreeProvider, CardElement } from '@formspree/react';
// document that this is just passing CardElement through

const useOptions = () => {
  const options = useMemo(
    () => ({
      style: {
        base: {
          color: "#424770",
          letterSpacing: "0.025em",
          fontFamily: "Source Code Pro, monospace",
          "::placeholder": {
            color: "#aab7c4"
          }
        },
        invalid: {
          color: "#9e2146"
        }
      }
    }),
    []
  );

  return options;
};

function SignupForm() {
  const options = useOptions();
  const [state, handleSubmit] = useForm('hashid');

  return (
    <form onSubmit={handleSubmit}>
      <label htmlFor="email">Email</label>
      <input id="email" type="email" name="email" />
      <CardElement options={options} />
      <button disabled={state.submitting}>Pay</button>
    </form>
  )
}

const App = () => (
  <FormspreeProvider stripePK="asdfklajsdf">
    <SignupForm />
  </FormspreeProvider>
)

Use cases:

• Event registration
• Application Fee
• Paywall on a digital/physical product

https://github.com/stripe/stripe-js/issues/43#issuecomment-643840075

Takeaways:

• In the stripe-v2 dispatcher make sure validation errors are being returned as a valid ErrorPayload (use “paymentMethod” for the field)
• Implement the third approach (FormspreeProvider is optional)

Next steps:

• [x] Move the Stripe form submission logic within formspree-core
• [x] Handle rendering errors
• [x] Prepare few a simple example and demo
• [x] Record a video and written tutorial on how to quickly charge money to signup to an event using Formspree and React

Propositions

• Handle fetching the price from Formspree

  So that the user can fetch the price that has been set from Formspree in case they wanted to control that from one place rather than hard coding it.

• Support different Stripe payment methods, not only CC

• Use Turborepo and group all Formspree TypeScript libraries in one monorepo with examples/docs folders

[smakosh]

Build is failing because @formspree/core PR needs to be merged first to upgrade the package, so that the new types will be accessible here

[smakosh]

Is this good to be merged?