The simplest possible payment implementation - for static websites.
Implementation of Stripe's Direct Charge payment using all 3 available methods. Any one would suffice, however all are included to demonstrate. These include:
- Stripe Elements - pre-built UI components for building checkout flow
- Payment Request Button - supporting Apple Pay, Google Pay and the Payment Request API
- Stripe Checkout - embeddable payment form popup
Secure, back-end communication to stripe performed in a Firebase Function, implemented using a http trigger.
Example front-end code uses Firebase Hosting, but can be hosted anywhere.
Further reading:
- Stripe Elements Method: https://stripe.com/docs/stripe-js
- Stripe Payment Request Method: https://stripe.com/docs/stripe-js/elements/payment-request-button
- Stripe Checkout Method: https://stripe.com/docs/checkout
- Firebase HTTP Triggers: https://firebase.google.com/docs/functions/http-events
See file public/index.html for all html and js code.
See file functions/index.js for the code.
The dependencies are listed in functions/package.json.
To test this integration:
- Create a Firebase Project using the Firebase Developer Console
- Enable billing on your project by switching to the Blaze or Flame plan. See pricing for more details. This is required to allow requests to non-Google services within the Function.
- Install Firebase CLI Tools if you have not already, and log in with
firebase login. - Configure this sample to use your project using
firebase use --addand select your project. - Install dependencies locally by running:
cd functions; npm i; cd - - Add your Stripe API Secret Key to firebase config:
firebase functions:config:set stripe.token=<YOUR STRIPE SECRET KEY>
- Pass your Stripe publishable key to the
STRIPE_PUBLIC_KEYvariable inpublic/index.html - Deploy your function using
firebase deploy --only functions - Pass your new Firebase Function URL to the
FIREBASE_FUNCTIONvariable inpublic/index.html - Deploy your hosting using
firebase deploy --only hosting - Test your Stripe integration by viewing your deployed site
firebase open hosting:site