Discord x Stripe : Simple payment integration ⚡️

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

Image for post
Image for post
Let’s start !

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.).

Image for post
Image for post
Stripe 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.

Image for post
Image for post
Stripe 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 😎

Image for post
Image for post

Written by

Full Stack JS Developer, Tournament Organiser | Discord Partner | https://qlaffont.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store