Extension Events with Stripe and MessageBird

Introduction

Previously in our introduction to Extension Events, we had a quick look at how we can hook into the official Firestore Payments Stripe Extension. In that example, we used events to add a simple Slack notification whenever a successful product has been added!

In this edition, we are no going to link the official MessageBird extension, which will allow us to enhance our E-commerce applications even further by automating communication between our products and users!

MessageBird defines itself as:

An omnichannel communications platform built for a global scale.

To put it simply, this API can provide a way of providing communications between ourselves and users, whether SMS or WhatsApp, for example.

Getting started

Ok, sounds great. So you now need to integrate the two systems so that we can automate messages when an event happens on our E-commerce platform.

Installing Stripe

If you already have the Stripe extension installed, feel free to skip this step.

First, navigate to Firestore Stripe Payments and select the required Firebase project to start the installation.

For the installation, you will only need two updates to make.

1. Add your Stripe API key.
2. Ensure that new users are automatically synced with Stripe via Sync new users to Stripe customers and Cloud Firestore.
3. Enable events. To make things easy, we can choose to select all.

Create your secret with the Secret Manager and click “Install extension”.

Adding a Stripe Web-hook

As stated in the instructions, we haven’t quite finished the installation yet. The final part includes adding our newly created cloud function and adding it into our Stripe Dashboard this will allow us to sync any Stripe events to our database.

Once the extension has been installed, navigate to how this extension works and scroll down to configure Stripe web-hooks.

Follow the instructions for adding the new web hook and re-configure the extension with your newly created web-hook secret.

Now we are ready

Setting up MessageBird

A number of extensions exist for this provider, in this instance, we are going to be using the Rates extension.

Let’s start the installation, click here to add to your project:

To install this Extension we will need a MessageBird API key, signup here if you require a new account.

Once an account has been set up, we can access our `test` and `live` API keys on the MessageBird dashboard.

Finally, we need the carrier ids that we are going to use to generate rates.

For this example, we will be using the test key.

Let’s add those details to our configuration and installation.

Configuring MessageBird events

Events are Google’s new solution to pub-sub via Eventarc. This allows developers to decouple and extend functionality via cloud functions. If you would like to know more, we have recently published an article on this new feature.

Before setting up this integration, we are going to need the MessageBird channel that you would like to send messages through.

A full list of options can be found here.

For this example, we are going to use the WhatsApp channel.

Navigate to the WhatsApp sandbox and follow the instructions for setting up WhatsApp messaging.

Following step 1 via the QR code or manually typed message, you receive a text confirmation

The MessageBird console will now update with the required phone numbers and the channel Id.

To automate messages via MessageBird, we are going to create a cloud function that will listen for updates from our Stripe Extension. To do this create a new Cloud function using the channel Id that we have provided above.

const admin = require("firebase-admin");

admin.initializeApp();
const db = admin.firestore();

const channelId = "YOUR_CHANNEL_ID";

exports.sendmessagebirdorderconfirmation = eventarc.onCustomEventPublished(
  "com.stripe.v1.checkout.session.completed",
  async ({ data }) => {
    const { phone } = data.customer_details;

    if (phone) {
      await db.collection("messages").add({
        channelId,
        to: phone,
        type: "text",
        content: {
          text: `Subscription added!`,
        },
      });
    }
  }
);

Creating a Checkout Session

For this step, we have quite a few options on how to create a checkout session.

• Use the Stripe Extension through a web app.
• The example is listed through the Stripe API documentation.

For simplicity, we are going to use Javascript based on the code examples provided in the Stripe Firebase Extension.

First, let’s create a new user through Firebase authentication:

The Stripe extension will automatically sync this user with Stripe and update the Firestore customer’s document with the newly generated StripeId.

Next, we can create a new checkout session to generate a checkout URL

const admin = require("firebase-admin");

(async () => {
  admin.initializeApp();

  const db = admin.firestore();

  await db
    .collection("customers")
    .doc("xxxxx") // Insert yout Firebase User Id / Customer Document Id
    .collection("checkout_sessions")
    .add({
      phone_number_collection: {
        enabled: true,
      },
      line_items: [{ price: "price_xxxxx", quantity: 2 }], //Add a product price
      mode: "payment",
      success_url: "https://example.com",
      cancel_url: "https://example.com",
    });
})();

There are a couple of details to note here:

Firstly, follow the link above and use the example provided for your own project. You may need to create an example product to test the checkout with.

Additionally, based on the example from Stripe; we have added an additional line to ensure that the phone number collection has been included.

The Firestore document now includes a new URL. Open this in a browser to start the checkout process.

Viewing our messages collection will now generate real-time updates on sending a message to our customers.

Phew! Now if you check your phone, you will have a confirmation message sent via MessageBird.

Summary

So there we are! With a functioning deployment, we are now able to connect our Extensions, allowing us to automate further features to our E-commerce application!

This is just the tip of the iceberg and, hopefully, the start of many more integrations that can further enhance applications.

This series will look to expand more features and integrations, showing even more ways to add automated features to enhance our apps further.

Stay tuned for more updates and exciting news that we will share in the future. Follow us on Invertase Twitter, Linkedin, and Youtube, and subscribe to our monthly newsletter to stay up-to-date. You may also join our Discord to have an instant conversation with us.