Discord x Stripe : Simple payment integration ⚡️

Discord x Stripe : Simple payment integration ⚡️

Quentin LAFFONT's photo
Quentin LAFFONT

Published on Aug 31, 2020

3 min read

I have created a service who is called OnlyDfans to make this configuration for you ! More information to onlydfans.io

As a developer, I have coded many bot with Discord.js.

I have created a bot recently, “Discord Protector”. It’s a Global Ban Management bot with many extra features (https://discord-protector.qlaffont.com).

I want to enable extra features with subscription quickly and in a simple way. Solution: Stripe

Let’s start !Let’s start !

If you are interested and you want to have a solution like this, I can do it ! Contact me at

Todo-list

To enable extra features, I need to achieve this todo-list :

1 — 💳 Redirect user to Stripe to pay subscription

2 — 👨‍💻 Create a customer platform to manage subscriptions

3 — 🖥 Receive Stripe webhook to enable extra features

I. 💳 Stripe Checkout

For people who don’t know, Stripe is a payments infrastructure. It’s a famous platform and many website use it (Deliveroo, Banking, Asos, etc.).

One of the most famous product is Stripe Checkout. This product create for you a checkout page with everything (Branding, Product details, etc.).

Stripe CheckoutStripe Checkout

This product will reduce for me a lot of coding time.

After reading Stripe Checkout Documentation, I know that I need to create a Stripe Customer and generate a Stripe URL when user want to pay his subscription. (In this case, when user type in channel !banp pay)

const stripeUser = await stripe.customers.create();

//Save stripe customer id in db -> stripeUser.id

const session = await stripe.checkout.sessions.create(
{
      payment_method_types: ["card"],
      line_items: [
        {
          price: PRODUCT_PRICEID,
          quantity: 1,
        },
      ],
      customer: stripeUser.id,
      mode: "subscription",
      success_url: "MY_SUCCESS_URL",
      cancel_url: "MY_CANCEL_URL"
});

// Url to send to user in private message
url = `/payment-page?CHECKOUT_SESSION_ID=${session.id}`;

And I have created a webpage to redirect user to checkout page :

<html>
  <head>
    <script src="https://js.stripe.com/v3/"></script>
  </head>
  <body>
    <script>
      var stripe = Stripe('MY_STRIPE_KEY');

      var urlParams = new URLSearchParams(window.location.search);

      stripe.redirectToCheckout({
      sessionId: urlParams.get('CHECKOUT_SESSION_ID')
      });
    </script>
  </body>
</html>

Step 1 - Done

II. 👨‍💻 Stripe Billing Customer Portal

Recently, I have seen on ProductHunt a post for Stripe Billing Customer Portal.

Stripe Billing Customer PortalStripe Billing Customer Portal

It’s a new product released by Stripe Team who create a Stripe-hosted page for customers to manage subscriptions (Change Plan, Cancel Plan) and to manage invoices.

Perfect, now I know that this step is simple like step 1.

After reading Stripe Billing Customer Portal, I know that I just need to communicate a stripe url to user.

const session = await stripe.billingPortal.sessions.create({
   customer: server.stripeCustomerId,
   return_url: "MY_RETURN_URL",
});

//Send url to user in private message -> session.url

Step 2 - Done

III. 🖥 Stripe Webhook Integration

To handle Stripe Webhook, I need to create an HTTP Route to receive events. To do that, I use Fastify but you can use what you want to make an HTTP Server.

f.post("/webhook", async (request: FastifyRequest, reply: FastifyReply) => {
    const event = request.body;
    switch (event.type) {
      case "checkout.session.completed":

        //Save Customer ID and save the fact that now he can use Stripe Billing Customer Portal

        break;
      case "customer.subscription.updated":

        // Check product id and save subscription date end (event.data.object.current_period_end)

        break;
      case "customer.subscription.deleted":

        // Check product id and save subscription date end (event.data.object.current_period_end)

      default:
        // Unexpected event type
        return reply.status(400).send();
    }

    reply.send({ received: true });
  });

Step 3 - Done

(Step 4 - Test with Stripe testing cards to check if everything work.)

Conclusion

It tooks me less than 1 day to integrate payment in my Discord.js bot.

Stripe documentation is simple and integration is very fast ⚡️. Now you know how to integrate Stripe in Discord.js bot without any website to create.

If you have any question, you can contact me on Twitter @qlaffont 😎

 
Share this
Proudly part of