Managing payments in your app: incorporating Stripe — the code

See how to implement inventory items to Stripe

Who knew payment processing could be so much fun?? Source

Are you new to this series? Check out the first blog for an introduction and a table of contents!

Get caught up

If you’re interested in the rationale behind this code, then check out this blog!

To briefly summarize, Checkout creates a secure, Stripe-hosted payment page that lets you collect payments quickly. To use the Checkout API, you first need to create Product and Price objects that represent your products and the price of your products. I will show you how to do this using the Stripe API.

Set up

With that in mind, let’s explore the checkout function. Navigate to the part-1-set-up-stripe folder and take a look at the contents.

• index.js
• package.json
• product_img folder
• README.md

You’ll need a Stripe account and project. Sign in to your account or create a new one.

Head to the Stripe Dashboard and find your secret key.

Add your key as an environment variable, just like we did earlier with your Google credentials.

export STRIPE_SECRET_KEY="sk_yoursecretkey"

The code

Let’s take a look at how this code works.

First, initialize Stripe and the Admin SDK. This is where that Stripe secret key is needed.

const stripe = require('stripe')(process.env.STRIPE_SECRET_KEY);
const admin = require('firebase-admin');
admin.initializeApp({
  credential: admin.credential.applicationDefault(),
});
const db = admin.firestore();
let collectionSnapshot;

All of our product information is currently stored in Firestore, so get the items in the socks collection.

collectionSnapshot = await db.collection('socks').get();

Iterate through the document snapshots in the collection.

collectionSnapshot.forEach(async (item) => {
  const thisItem = item.data();
  console.log(thisItem.name); // just for fun, log the items

For each item, create a Stripe product by passing the name, description, and an image array to the create function. I could have just passed thisitem.images as the value for images since it’s an array, but I chose this format to emphasize that although we only have one image for each item, this value is always an array.

const stripeProduct = await stripe.products.create(
  {
    name: thisItem.name,
    description: thisItem.description,
    images: [thisItem.images[0]]
  });

The resulting Stripe product has a unique id.

const product = stripeProduct.id;

Use this ID and the item’s price to create a Stripe price.

// create a price object for the item
await stripe.prices.create({
  product: product,
  unit_amount: thisItem.price,
  currency: 'sd',
});

Finally, to keep Firestore and Stripe in sync, add that product ID to the item’s document in Firestore.

// add resulting product ID to the item
await db.collection('socks').doc(thisItem.name).set({product: product}, {merge: true});

Run it

Run the code using the command node index.js.

Then go to the Stripe dashboard to verify that items have been uploaded.

Your dashboard will look like this

Next steps

You did it! Crochet pattern info is now saved in both Cloud Firestore and Stripe. With Product and Price items now synced in Stripe, we can perform the Checkout action to initialize a purchase.

• Check out the next blog post
• See links to all posts in the first blog