Digital Wallet payments with React Stripe Elements and Netlify Functions
Modern browser APIs, like the Payment Request API, allow you to access payment credentials stored in your customer's digital wallets like Apple Pay, Google Pay, or even Chrome.
Stripe provides a Payment Request Button Element that securely tokenizes these stored credentials for a convenient checkout experience on mobile devices.
Demo
- https://react-elements-netlify-serverless.netlify.com
- Written tutorial
- Live coding session on learnwithjason.dev
Features:
- Implement shopping cart logic via
use-shopping-cart. - Collect payment and address information from customers who use Apple Pay, Google Pay, Microsoft Pay, and the Payment Request API.
- Create Payments in a Netlify Functions.
- Process Stripe webhook events with Netlify Functions to handle fulfillment.
How to run locally
Prerequisites
- Node >= 10
- Netlify CLI
- Stripe CLI
Follow the steps below to run locally.
1. Clone and configure the sample
git clone https://github.com/stripe-samples/react-elements-netlify-serverless
Copy the .env.example file into a file named .env:
cp .env.example .env
You will need a Stripe account in order to run the demo. Once you set up your account, go to the Stripe developer dashboard to find your API keys.
REACT_APP_STRIPE_PUBLISHABLE_KEY=<replace-with-your-publishable-key>
STRIPE_SECRET_KEY=<replace-with-your-secret-key>
2. Run Netlify Functions locally:
You can run the Netlify Functions locally with Netlify Dev:
npm install
netlify dev
3. Test the Payment Request Button:
To test the Payment Request Button your page must be served via HTTPS. See the full list of requirements in the docs.
4. [Optional] Run a webhook locally:
If you want to test the using-webhooks integration with a local webhook on your machine, you can use the Stripe CLI to easily spin one up.
Make sure to install the CLI and link your Stripe account.
In a separate tab run
stripe listen --forward-to localhost:8888/.netlify/functions/webhooks
Or use the shorthand npm run webhook
The CLI will print a webhook secret key to the console. Set STRIPE_WEBHOOK_SECRET to this value in your .env file.
You should see events logged in the console where the CLI is running.
When you are ready to create a live webhook endpoint, follow our guide in the docs on configuring a webhook endpoint in the dashboard.
💫 Deploy with Netlify
Get support
If you found a bug or want to suggest a new [feature/use case/sample], please file an issue.
If you have questions, comments, or need help with code, we're here to help:
- on Discord
- on Twitter at @StripeDev
- on Stack Overflow at the stripe-payments tag
- by email
Sign up to stay updated with developer news.