Skip to content

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.

Notifications You must be signed in to change notification settings

jacobparis/stripe-machine-example

Repository files navigation

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

ezgif-6-962f898f1d51

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.

Screen Shot 2020-05-23 at 10 08 27 PM

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

About

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.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages