Jacob Paris
← Back to all content

Animate a Stripe Checkout with Framer and React

An animated stripe checkout using XState and React. This uses the Stripe API and the Stripe Elements tools to create an actual payment. You can swap out the test keys for your own keys and and accept payments with this code.

The backend is provided via a Netlify Function

You can view the source on GitHub

Demo

An animated credit card, where the details are inputs. As they are entered, the card flips to allow editing the CVV, then the card flies into an envelope and off-screen as it's submitted.

State Machine

Using XState to handle application logic is a very effective pattern that leaves React in charge of nothing more than rendering UI. All of the logic to instantiate the stripe API and orchestrate its requests is handled by the state machine.

A state machine with submachines for the above animation and for the underlying Stripe checkout logic

Professional headshot
Moulton
Moulton

Hey there! I'm a developer, designer, and digital nomad building cool things with Remix, and I'm also writing Moulton, the Remix Community Newsletter

About once per month, I send an email with:

  • New guides and tutorials
  • Upcoming talks, meetups, and events
  • Cool new libraries and packages
  • What's new in the latest versions of Remix

Stay up to date with everything in the Remix community by entering your email below.

Unsubscribe at any time.