API with NestJS #37. Using Stripe to save credit cards for future use

June 21, 2021

This entry is part 37 of 121 in the API with NestJS

With Stripe, we can build advanced custom payment flows. In this article, we continue looking into it and save credit cards for future use. To do that, we need to have a more thorough understanding of how we can integrate Stripe with our system.

Saving cards with setup intents

Our goal in this article is to have payment credentials saved and ready for future payments. Imagine creating a website for an online shop. We could require the users to provide the credit card details every time they make an order, but that wouldn’t be the best user experience. Instead, we can save the credit card details in Stripe and use them later.

To get us through this process, Stripe uses setup intents. We can set up a payment method without creating a charge and assign it to a customer.

We need to add the above functionality to the StripeService that we’ve created in the previous part of this series.

import { Injectable } from '@nestjs/common';

import { ConfigService } from '@nestjs/config';

import Stripe from 'stripe';

@Injectable()

export default class StripeService {

private stripe: Stripe;

constructor(

private configService: ConfigService

) {

this.stripe = new Stripe(configService.get('STRIPE_SECRET_KEY'), {

apiVersion: '2020-08-27',

});

}

public async attachCreditCard(paymentMethodId: string, customerId: string) {

return this.stripe.setupIntents.create({

customer: customerId,

payment_method: paymentMethodId,

})

}

// ...

}

To use the above method, let’s create the CreditCardsController.

creditCards.controller.ts

import { Body, Controller, Post, Req, UseGuards } from '@nestjs/common';

import JwtAuthenticationGuard from '../authentication/jwt-authentication.guard';

import RequestWithUser from '../authentication/requestWithUser.interface';

import StripeService from '../stripe/stripe.service';

import AddCreditCardDto from './dto/addCreditCardDto';

@Controller('credit-cards')

export default class CreditCardsController {

constructor(

private readonly stripeService: StripeService

) {}

@Post()

@UseGuards(JwtAuthenticationGuard)

async addCreditCard(@Body() creditCard: AddCreditCardDto, @Req() request: RequestWithUser) {

return this.stripeService.attachCreditCard(creditCard.paymentMethodId, request.user.stripeCustomerId);

}

creditCards.controller.ts

import { IsString, IsNotEmpty } from 'class-validator';

export class AddCreditCardDto {

@IsString()

@IsNotEmpty()

paymentMethodId: string;

}

export default AddCreditCardDto;

As you can see, we expect the users to send us the paymentMethodId when adding the credit card. To achieve that on the frontend side with React, we need to do it the same way as in the previous article. This time, we call the /credit-cards endpoint, though.

usePaymentForm.tsx

import { CardElement, useStripe, useElements } from '@stripe/react-stripe-js';

import { FormEvent } from 'react';

function usePaymentForm() {

const stripe = useStripe();

const elements = useElements();

const getPaymentMethodId = async () => {

const cardElement = elements?.getElement(CardElement);

if (!stripe || !elements || !cardElement) {

return;

}

const stripeResponse = await stripe?.createPaymentMethod({

type: 'card',

card: cardElement

});

const { error, paymentMethod } = stripeResponse;

if (error || !paymentMethod) {

return;

}

return paymentMethod.id;

}

const handleSubmit = async (event: FormEvent) => {

event.preventDefault();

const paymentMethodId = await getPaymentMethodId();

if (!paymentMethodId) {

return;

}

fetch(`${process.env.REACT_APP_API_URL}/credit-cards`, {

method: 'POST',

body: JSON.stringify(({

paymentMethodId,

})),

credentials: 'include',

headers: {

'Content-Type': 'application/json'

})

};

return {

handleSubmit

}

export default usePaymentForm;

There is one additional thing we should do above, though. In the previous part of this series, we’ve used the confirm: true parameter. Using it when saving a card would attempt to confirm it immediately.

The above solution might work, but it is not guaranteed. The bank might require the user to perform some additional authentication on the frontend. To handle it, let’s use the client_secret Stripe provides us with when creating the payment intent.

usePaymentForm.tsx

import { CardElement, useStripe, useElements } from '@stripe/react-stripe-js';

import { FormEvent } from 'react';

function usePaymentForm() {

const stripe = useStripe();

const elements = useElements();

// ...

const handleSubmit = async (event: FormEvent) => {

event.preventDefault();

const paymentMethodId = await getPaymentMethodId();

if (!paymentMethodId) {

return;

}

const response = await fetch(`${process.env.REACT_APP_API_URL}/credit-cards`, {

method: 'POST',

body: JSON.stringify(({

paymentMethodId,

})),

credentials: 'include',

headers: {

'Content-Type': 'application/json'

})

const responseJson = await response.json();

const clientSecret = responseJson.client_secret;

stripe?.confirmCardSetup(clientSecret);

};

return {

handleSubmit

}

export default usePaymentForm;

When we call the stripe.confirmCardSetup on the frontend, Stripe has a chance to carry out any actions needed to confirm the card setup.

Listing saved credit cards

Another important part of the flow is listing the credit cards that the user saved. To implement it, let’s add a new method to the StripeService.

stripe.service.ts

import { Injectable } from '@nestjs/common';

import { ConfigService } from '@nestjs/config';

import Stripe from 'stripe';

@Injectable()

export default class StripeService {

private stripe: Stripe;

constructor(

private configService: ConfigService

) {

this.stripe = new Stripe(configService.get('STRIPE_SECRET_KEY'), {

apiVersion: '2020-08-27',

});

}

public async listCreditCards(customerId: string) {

return this.stripe.paymentMethods.list({

customer: customerId,

type: 'card',

});

}

// ...

}

To use it, we also need to modify the CreditCardsController:

creditCards.controller.ts

import { Body, Controller, Post, Req, UseGuards, Get } from '@nestjs/common';

import JwtAuthenticationGuard from '../authentication/jwt-authentication.guard';

import RequestWithUser from '../authentication/requestWithUser.interface';

import StripeService from '../stripe/stripe.service';

import AddCreditCardDto from './dto/addCreditCardDto';

@Controller('credit-cards')

export default class CreditCardsController {

constructor(

private readonly stripeService: StripeService

) {}

@Post()

@UseGuards(JwtAuthenticationGuard)

async addCreditCard(@Body() creditCard: AddCreditCardDto, @Req() request: RequestWithUser) {

return this.stripeService.attachCreditCard(creditCard.paymentMethodId, request.user.stripeCustomerId);

}

@Get()

@UseGuards(JwtAuthenticationGuard)

async getCreditCards(@Req() request: RequestWithUser) {

return this.stripeService.listCreditCards(request.user.stripeCustomerId);

}

A significant thing to notice here is that Stripe doesn’t allow us to view all of the card’s details. For example, we can see only the last four digits of the card number, and we can’t access the CVV code.

There is a great chance that our application doesn’t need to expose that much data about the credit cards. If that’s the case for you, feel free to modify the Stripe’s response in the /credit-cards endpoint.

By default, the paymentMethods.list returns up to 10 credit cards. If you need more, you need to use pagination with the limit and starting_after properties. For details, check the documentation.

If you want to know more about pagination in general, take a look at API with NestJS #17. Offset and keyset pagination with PostgreSQL and TypeORM

Charging using saved cards

The last part of the flow is charging the customer using the saved card. Let’s use the logic from the previous article, but with the off_session parameter.

public async charge(amount: number, paymentMethodId: string, customerId: string) {

return this.stripe.paymentIntents.create({

amount,

customer: customerId,

payment_method: paymentMethodId,

currency: this.configService.get('STRIPE_CURRENCY'),

off_session: true,

confirm: true

})

}

By setting off_session to true, we indicate that it occurs without the direct involvement of the customer with the use of previously collected credit card information. Let’s use the above logic in the ChargeController.

creditCards.controller.ts

import { Body, Controller, Post, Req, UseGuards } from '@nestjs/common';

import JwtAuthenticationGuard from '../authentication/jwt-authentication.guard';

import CreateChargeDto from './dto/createCharge.dto';

import RequestWithUser from '../authentication/requestWithUser.interface';

import StripeService from '../stripe/stripe.service';

@Controller('charge')

export default class ChargeController {

constructor(

private readonly stripeService: StripeService

) {}

@Post()

@UseGuards(JwtAuthenticationGuard)

async createCharge(@Body() charge: CreateChargeDto, @Req() request: RequestWithUser) {

return this.stripeService.charge(charge.amount, charge.paymentMethodId, request.user.stripeCustomerId);

}

An important change above is that we return the response from the stripeService.charge method. This is because setting confirm to true might work, but there is a chance that the bank will require additional authentication. We need to prepare for this scenario on the frontend.

The above controller returns all of the data returned by Stripe. Feel free to remove unused data and send only the client_secret and the status to the frontend, for example.

const chargeResponse = await fetch(`${process.env.REACT_APP_API_URL}/charge`, {

method: 'POST',

body: JSON.stringify(({

paymentMethodId,

amount: 100

})),

credentials: 'include',

headers: {

'Content-Type': 'application/json'

})

const chargeResponseJson = await chargeResponse.json();

if (chargeResponseJson.status !== 'succeeded') {

const secret = chargeResponseJson.client_secret;

await stripe?.confirmCardPayment(secret);

}

By doing the above, we try to confirm the charge immediately. If it fails, we call the stripe.confirmCardPayment method. It might require the customer to perform additional steps to complete the payment, depending on the bank. Stripe walks the user through this process.

Testing our integration

Stripe provides a set of credit cards for testing that always work. With them, the confirmation on the backend will succeed without issues.

To confirm that our integration works well for other cases, we can use the 3D secure test card numbers, for example. They require us to properly handle confirmation when saving the credit cards and using them later.

We can also test for specific responses, and errors with credit card numbers Stripe prepared exactly for those cases.

Summary

In this article, we’ve continued integrating Stripe with our NestJS API. We’ve learned how to save credit cards for future use. We’ve also made payments with them and learned how to confirm them on the frontend side. By doing so, we’ve learned even more about how to implement Stripe into our application. There is still quite a bit to learn, so stay tuned!

Series Navigation<< API with NestJS #36. Introduction to Stripe with ReactAPI with NestJS #38. Setting up recurring payments via subscriptions with Stripe >>

2 Comments

Oldest

Newest Most Voted

Inline Feedbacks

View all comments

Greg

3 years ago

Hey, thanks for your lessons.
Can you provide the react repo link?

Stephanie

2 years ago

I followed the tutorial. It works fine to add a credit-card but. using Get creditcards the data object returns empty. Is the API changed? I tried adding same package ‘stripe’ as in original code.

{
“object”: “list”,
“data”: [],
“has_more”: false,
“url”: “/v1/payment_methods”
}