How to use Stripe with React and Firebase - reactjs

Question

So I'm using firebase as my database and hosting service and I've written the application in React.
Now I'm trying to add Stripe to the application so I can charge customers. But there is an issue, Stripe seems to need a separate server, which is a bit of an issue because I'm using Firebase.
I've read the documentation (here - https://firebase.google.com/docs/use-cases/payments) and watched the videos from firebase (here - https://www.youtube.com/watch?v=BrLTF4QdRrM and here - https://www.youtube.com/watch?v=BrLTF4QdRrM) and I'm still lost.
I have no idea where I'm meant to include the Stripe Publishable Key and I've worked myself into such a knot I'm going to have to spend the next few hours undoing the last few hours of effort.
If you can point me in the direction of a simple guide or just tell me where the Publishable Key needs to go, that would be hugely helpful!
This may confuse more than help but here is the code that I've created to create a stripe customer and stripe charge etc.
mport * as stripe from "stripe";
import * as functions from "firebase";
import getFirestoreDb from "../firebase/firestore/getFirestoreDb";
// import {firestore} from "#firebase/firestore/dist/packages/firestore/test/util/api_helpers";
// const admin = require('firebase-admin');
// admin.initializeApp();
// const logging = require('#google-cloud/logging')();
// const currency = functions.config().stripe.currency || 'USD';
const db = getFirestoreDb();
//START CUSTOMER CHARGE //
// Charge the Stripe customer whenever an amount is created in Cloud Firestore
export const createStripeCharge = functions.firestore
.document('stripe_customers/{userId}/charges/{autoId}')
.onCreate(async ( snap, context) => {
const val = snap.data();
try {
//Look up the Stripe customer id written in createStripeCustomer
const snapshot = await
db.collection('stripe_customers')
.doc(context.params.userId).get();
const snapval = snapshot.data();
const customer = snapval.customer_id;
// Create a charge using the pushId as the idempotency key
// protecting against double charges
const amount = val.amount;
const idempotencyKey = context.params.id;
const currency = "USD";
const charge = {amount, currency, customer};
if (val.source !== null) {
charge.source = val.source;
}
// setSourceOrDefault(charge, snap.data().source)
const response = await stripe.charges.create(charge, {idempotency_key: idempotencyKey} );
//if the result is successful, write it back to the database
return snap.ref.set(response, {merge:true});
} catch(error) {
// We want to capture errors and render them in a user-friendly way, while
// still logging an exception with StackDriver
await snap.ref.set({error: userFacingMessage(error)}, {merge:true});
// return reportError(error, {user: context.params.userId});
}
});
// END CUSTOMER CHARGE //
// When a user is created, register them with Stripe
export const createStripeCustomer = functions.auth.user().onCreate(async (user) => {
const customer = await stripe.customers.create({email: user.email});
return db.collection('stripe_customers').doc(user.uid).set({customer_id: customer.id});
});
// Add a payment source (card) for a user by writing a stripe payment source token to Cloud Firestore
export const addPaymentSource = functions.firestore.document('/stripe_customers/{userId}/tokens/{pushId}').onCreate(async (snap, context) => {
const source = snap.data();
const token = source.token;
if (source === null){
return null;
}
try {
const snapshot = await db.collection('stripe_customers').doc(context.params.userId).get();
const customer = snapshot.data().customer_id;
const response = await stripe.customers.createSource(customer, {source: token});
return db.collection('stripe_customers').doc(context.params.userId).collection("sources").doc(response.fingerprint).set(response, {merge: true});
} catch (error) {
await snap.ref.set({'error':userFacingMessage(error)},{merge:true});
// return reportError(error, {user: context.params.userId});
}
});
// When a user deletes their account, clean up after them
export const cleanupUser = functions.auth.user().onDelete(async (user) => {
const snapshot = await db.collection('stripe_customers').doc(user.uid).get();
const customer = snapshot.data();
await stripe.customers.del(customer.customer_id);
return db.collection('stripe_customers').doc(user.uid).delete();
});
// To keep on top of errors, we should raise a verbose error report with Stackdriver rather
// than simply relying on console.error. This will calculate users affected + send you email
// alerts, if you've opted into receiving them.
// // [START reporterror]
// function reportError(err, context = {}) {
// // This is the name of the StackDriver log stream that will receive the log
// // entry. This name can be any valid log stream name, but must contain "err"
// // in order for the error to be picked up by StackDriver Error Reporting.
// const logName = 'errors';
// const log = logging.log(logName);
//
// // https://cloud.google.com/logging/docs/api/ref_v2beta1/rest/v2beta1/MonitoredResource
// const metadata = {
// resource: {
// type: 'cloud_function',
// labels: {function_name: process.env.FUNCTION_NAME},
// },
// };
//
// // https://cloud.google.com/error-reporting/reference/rest/v1beta1/ErrorEvent
// const errorEvent = {
// message: err.stack,
// serviceContext: {
// service: process.env.FUNCTION_NAME,
// resourceType: 'cloud_function',
// },
// context: context,
// };
//
// // Write the error log entry
// return new Promise((resolve, reject) => {
// log.write(log.entry(metadata, errorEvent), (error) => {
// if (error) {
// return reject(error);
// }
// return resolve();
// });
// });
// }
// [END report error]
function userFacingMessage(error) {
return error.type ? error.message : 'An error has occurred, developers have been alerted';
}
stripe.setPublishableKey("STRIPE_KEY");

Answer 1

You have to set the publishable key on the client side.
For example, using React Native and tipsi-stripe (stripe client sdk) you can do as following:
import stripe from 'tipsi-stripe'
stripe.setOptions({
publishableKey: 'YOUR-PUBLISHABLE-KEY',
})
You just need to initialize the stripe client sdk you are using with your publishableKey.