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

Hi, I'm Jacob

Hey there! I'm a developer, designer, and digital nomad with a background in lean manufacturing.

About once per month, I send an email with new guides, new blog posts, and sneak peeks of what's coming next.

Everyone who subscribes gets access to the source code for this website and every example project for all my tutorials.

Stay up to date with everything I'm working on by entering your email below.

Unsubscribe at any time.