Stripe Machine Example

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.

Backend is provided via a Netlify Function

Demo

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.

Usage

Clone this repository to your local environment

git clone https://github.com/jacobparis/stripe-machine-example my-project

Install node modules

npm install

Replace Stripe keys in functions/create-customer.js with your own stripe keys

Commands

• npm run build to compile and drop the bundle in the dist directory

• npm run serve to start a local webserver