stripe-samples / react-elements-netlify-serverless

Digital Wallet payments with React Stripe Elements and Netlify Functions

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.

Authors

• jlengstorf
• thorsten-stripe

react-elements-netlify-serverless's Issues

Returning error When creating payment intent

Bug report

Describe the bug

Getting error when runing sample on demo and local .
A clear and concise description of what the bug is.

To Reproduce

{"error":{"type":"StripeInvalidRequestError","raw":{"code":"parameter_invalid_integer","doc_url":"https://stripe.com/docs/error-codes/parameter-invalid-integer","message":"Invalid integer: NaN","param":"amount","type":"invalid_request_error","headers":{"server":"nginx","date":"Sun, 17 Jan 2021 12:55:58 GMT","content-type":"application/json","content-length":"240","connection":"keep-alive","access-control-allow-credentials":"true","access-control-allow-methods":"GET, POST, HEAD, OPTIONS, DELETE","access-control-allow-origin":"","access-control-expose-headers":"Request-Id, Stripe-Manage-Version, X-Stripe-External-Auth-Required, X-Stripe-Privileged-Session-Required","access-control-max-age":"300","cache-control":"no-cache, no-store","idempotency-key":"stripe-node-retry-857c1ad1-a0d4-4f62-92c9-148a2cc06ad3","original-request":"req_XTlAWwP4B1qSLk","request-id":"req_XTlAWwP4B1qSLk","stripe-version":"2020-03-02","x-stripe-c-cost":"0","strict-transport-security":"max-age=31556926; includeSubDomains; preload"},"statusCode":400,"requestId":"req_XTlAWwP4B1qSLk"},"rawType":"invalid_request_error","code":"parameter_invalid_integer","doc_url":"https://stripe.com/docs/error-codes/parameter-invalid-integer","param":"amount","headers":{"server":"nginx","date":"Sun, 17 Jan 2021 12:55:58 GMT","content-type":"application/json","content-length":"240","connection":"keep-alive","access-control-allow-credentials":"true","access-control-allow-methods":"GET, POST, HEAD, OPTIONS, DELETE","access-control-allow-origin":"","access-control-expose-headers":"Request-Id, Stripe-Manage-Version, X-Stripe-External-Auth-Required, X-Stripe-Privileged-Session-Required","access-control-max-age":"300","cache-control":"no-cache, no-store","idempotency-key":"stripe-node-retry-857c1ad1-a0d4-4f62-92c9-148a2cc06ad3","original-request":"req_XTlAWwP4B1qSLk","request-id":"req_XTlAWwP4B1qSLk","stripe-version":"2020-03-02","x-stripe-c-cost":"0","strict-transport-security":"max-age=31556926; includeSubDomains; preload"},"requestId":"req_XTlAWwP4B1qSLk","statusCode":400}}
Steps to reproduce the behavior, please provide code snippets or a repository:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior

A clear and concise description of what you expected to happen.

Screenshots

If applicable, add screenshots to help explain your problem.

System information

• OS: [e.g. macOS, Windows]
• Browser (if applies) [e.g. chrome, safari]
• Server environment [e.g. Go, Java, Node, PHP, Python, Ruby, TypeScript]

Additional context

Add any other context about the problem here.

Switch demo keys

@jlengstorf https://react-elements-netlify-serverless.netlify.com/ uses the "Learn with Jason" Stripe test account, can you switch the keys to use the "Netlify Stripe Checkout" test account that https://checkout-netlify-serverless.netlify.app/ uses?