Firebase One Time Payment


Live Demo ↗   |   Get ZIP ↗

Firebase One Time Payment

1 Overview


This article will describe how to complete an one time payment of digital download with firebase and stripe, using jekyll template.

2 Download Project


  • Live Demo : In the live demo, the purchase process was completed by this project.

  • Get ZIP : Directly fetch the download link.

Unzip the project to your local disk.


3 Setup Jekyll


Notice that:

If you are not using Jekyll to build your website, you can directly use the files inside _site folder.

Otherwise, you can config the jekyll environment as follow.

  • Install Ruby, using following command to check installation.

$ ruby -v
ruby 2.2.4p230 (2015-12-16 revision 53155) [i386-mingw32]

  • Install Jekyll using following command:

$ gem install jekyll

  • Start jekyll server as follow.

$ cd projectfolder
$ jekyll serve

  • Open the browser : http://localhost:4000/ , see more detail

4 Setup Email Extenstion


In order to send email to your customer, you can use following firebase Extension:

TriggerEmailExtenstion

This exenstion will auto send email when you write the collection. In the demo project, two collections are used.

TriggerEmail

Use this extenstion, you also need a SMTP connenct URL. I am using Mailgun to do this.


5 Setup Firebase and Stripe Config


Modify webconfig.js

// Your web app's Firebase configuration
const firebaseConfig = {
  apiKey: "***********************************",
  authDomain: "easycomplex-website.firebaseapp.com",
  databaseURL: "https://easycomplex-website-default-rtdb.firebaseio.com",
  projectId: "easycomplex-website",
  storageBucket: "easycomplex-website.appspot.com",
  messagingSenderId: "********************",
  appId: ""***********************************","
};

// Replace with your cloud functions location
const functionLocation = 'us-east1';

// Initialize Firebase
const firebaseApp = firebase.initializeApp(firebaseConfig);
const db = firebaseApp.firestore();

// https://dashboard.stripe.com/apikeys
const STRIPE_PUBLISHABLE_KEY = '************************';
const stripe = Stripe(STRIPE_PUBLISHABLE_KEY);

FirebaseSDKConfig

  • Fetch STRIPE_PUBLISHABLE_KEY on Stripe:

StripteAPIKey


6 Setup Product and Customer Firestore


Add a product in the stripe dashboard

StripeProduct

Enable the stripe client-only intergration setting.

StripeClientOnlyInteragtion

Goto Firebase Console, add collection “onetime_customers” and “products_index” in Firestore. Add the stripe product (using above stripe proudct API ID ) into “products_index” collection as follow.

FirestoreCol

Using following security rules for your firestore.

  • Customer can only read their own record in the the “onetime_customers” collection.

  • Only product owner can read product detail in the “products_index” collection.

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /onetime_customers/{email} {
    	allow read: if request.auth.token.email == email;
      
      match /ownproducts/{id} {
      	allow read: if request.auth.token.email == email;
      }
    }  
    match /products_index/{id} {
    	allow read: if request.auth != null && exists(/databases/$(database)/documents/onetime_customers/$(request.auth.token.email)/ownproducts/$(id));
    }
    
    match /mail/{uid} {
      allow read, write: if request.auth.uid == uid;
    }  
  }
}

7 Deploy Firebase Cloud Function


While stripe checkout completed, customer data needs to be wrote back to firestore which will be completed by Cloud Function.



> cd projectfolder
> firebase init functions
> cd functions
> npm install
> firebase functions:config:set stripe.secret="stripekey" stripe.hooksecret="webhookkey"
> firebase deploy --only functions

Fetch above “stripekey” in the stripe dashboard.

StripeSecretKey

StripeSecretKeyAuth

Fetch above “webhookkey” in the stripe dashboard as well.

WebhookStripe

Notice you should update the above webhook endpoint url after cloud function deploy success in firebase. Using below link as your webhook endpoint url.

Webhook

  • If you want to host your website in firebase, using following command to deploy your website.
> firebase deploy --only hosting

8 Create Product Page


Create a html file as “checkout_onetimepayment.html” in the project folder. Replace following price id with your own product price id in in the stripe dashboard.

---
layout: checkout
---

  <script type="text/javascript">
    
    firebase.auth().onAuthStateChanged((firebaseUser) => {
      initCheckout(
        firebaseUser, //user
        'price_1IZqARDrT2ErSlwXTMS2K88z', //product price id
        'https://easycomplex-website.web.app/updateresource.html?id=price_1IZqARDrT2ErSlwXTMS2K88z', //pay successful jump to, fetch firebase data in this page
        'https://easycomplex-website.web.app/'  //cancel payment
        );  
    }); 

  </script>
 

Product

Let’s begin to reveive your payment on your own!


Buy Me a Coffee: Buy me a coffee


References

[1] Host your own blog with Jekyll on Firebase and Travis CI

Vistied:
Share: Twitter Facebook LinkedIn