Handling Payments with TypeScript and Stripe

Are you looking to integrate payment functionality into your TypeScript application? Stripe is a powerful payment gateway that makes it easy to accept payments online, and TypeScript can help you write cleaner and more maintainable code.

In this tutorial, we'll walk you through the process of setting up a TypeScript application with Stripe, so you can start accepting payments from your customers.

Set up your Stripe account

The first step is to create a Stripe account if you don't already have one. Once you've signed up, you'll need to retrieve your API keys from the Stripe dashboard. You'll need both the public and secret keys for this tutorial.

Install Stripe dependencies

Next, we'll install the Stripe library for TypeScript. You can do this by running the following command in your terminal:

npm install stripe @types/stripe

This command will install the Stripe library and its corresponding TypeScript types.

Create a payment form

Now that we have the Stripe library installed, we can create a payment form that will allow our users to enter their payment information. Here's an example HTML form:

<form>
  <label>
    Card number
    <input type="text" data-stripe="number"/>
  </label>
  <label>
    Expiration (MM/YYYY)
    <input type="text" data-stripe="exp"/>
  </label>
  <label>
    CVC
    <input type="text" data-stripe="cvc"/>
  </label>
  <button type="submit">Pay</button>
</form>

Notice that we've added data-stripe attributes to each of the input fields. These attributes tell Stripe which field corresponds to which piece of payment information.

Set up the Stripe client-side code

Now that we have our payment form, we need to add some client-side JavaScript code that will handle the payment submission. Here's an example:

import Stripe from 'stripe';

const stripe = new Stripe('your_stripe_secret_key');

const form = document.querySelector('form');
form.addEventListener('submit', async (event) => {
  event.preventDefault();
  const cardElement = form.querySelector('[data-stripe="number"]');
  const { error, paymentMethod } = await stripe.createPaymentMethod({
    type: 'card',
    card: cardElement,
  });
  if (error) {
    console.error(error);
  } else {
    console.log(paymentMethod);
    // Send paymentMethod.id to your server to complete the payment
  }
});

This code uses the Stripe library to create a PaymentMethod object when the form is submitted. If there are any errors, they are logged to the console. Otherwise, the PaymentMethod object is logged to the console and can be sent to your server for further processing.

Handle the payment server-side

Finally, we need to handle the payment on our server. This code will depend on your server-side technology stack, but here's an example Node.js/Express endpoint:

import Stripe from 'stripe';

const stripe = new Stripe('your_stripe_secret_key');

app.post('/charge', async (req, res) => {
  const { paymentMethodId } = req.body;
  try {
    const paymentIntent = await stripe.paymentIntents.create({
      payment_method: paymentMethodId,
      amount: 1000, // $10.00
      currency: 'usd',
      confirmation_method: 'manual',
      confirm: true,
    });
    res.send(paymentIntent);
  } catch (error) {
    console.error(error);
    res.status(500).send({ error: error.message });
  }
});

This code uses the Stripe library to create a new PaymentIntent object that references the PaymentMethod ID that was submitted from the client. We're charging $10.00 (1000 cents) in this example, but you can adjust this value to match your own pricing.

If the payment is successful, we send the PaymentIntent object back to the client. If there's an error, we log it to the console and return a 500 error to the client.

Test the payment flow

At this point, you should have a fully functional payment flow in your TypeScript application! To test it, try submitting the payment form with some test credit card details. You can find a list of test credit card numbers on the Stripe website.

Once the payment is complete, you should see a PaymentIntent object logged to the console. You can use this object to track the status of the payment on your Stripe dashboard.

Conclusion

In this tutorial, we've shown you how to integrate Stripe payments into your TypeScript application. We started by setting up our Stripe account and installing the necessary dependencies. Then, we created a payment form and added some client-side JavaScript code to handle the payment submission. Finally, we handled the payment server-side using the Stripe library.

By following these steps, you can quickly and easily add payment functionality to your TypeScript application using Stripe. With the power of TypeScript, you can write clean, maintainable code that will make it easy to scale your application as your business grows.