How to Save Card Details for Future Payments in Stripe?

In this article, you will learn how to save card details without instant payments for future payments. This is helpful if you have onboard customers, after using your service you will charge them in the future – when they are offline.

So, use the following integration to set up recurring payments for future payments or charge a one-time payment with a final amount determined later, even after the customer receives your service. Then, we will use Node JS here for the Stripe integration.

Save Card Details for Future Payments

Set up Stripe

Firstly, Install the Stripe libraries and access the APIs from your application.

npm install –save stripe

Now, create a customer before setup

After that, to save a card for future payments you need to first attach it to a customer. Do it when a user is registered with your business.

server.js

// Set your secret key. Remember to switch to your live secret key in production.

const stripe = require('stripe')('sk_test_4eC39HqLyjWDarjtT1zdp7dc');

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

Create a setupIntent

Here, a SetupIntent is an object that represents your intent to set up a customer’s card for future payments. The setupIntent contains a unique key that is called client_secret that you need to pass the Stripe.js on the client-side to collect the card details. The client_secret is sensitive data so do not log in, embed it in URLs, or expose it to anyone but the customer.

The following code snippet is the client-side code. You have to embed the following code on your template page.

index.ejs













 

server.js

  app.get('/card-wallet, async (req, res) => {

const intent = await stripe.setupIntents.create({

customer: customer.id,

});

res.render('card_wallet', { client_secret: intent.client_secret });

});

Then, collect card details at the client-side

The Setup Intents API is fully integrated with Stripe.js, which lets you use the Elements UI library to securely collect card details on the client-side.

Now, include the Stripe.js within the script tag in the header.

                

 

                 Add an element to your page

Then, create an instance of the striped object by providing the publishable key. Next, create an instance of the Elements object and use it to mount a card element in the DOM.

client.js

var stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx');

var elements = stripe.elements();
// Most Important part

var cardElement = elements.create('card');

cardElement.mount('#card-element');

Confirm the SetupIntent

Therefore, to complete the setup, retrieve the client secret from the SetupIntent created in the previous step and use stripe.confirmCardSetup and the Card element to complete the setup. When the setup completes successfully, the value of the returned SetupIntent’s status property is succeeded.

client.js


setupForm.addEventListener('submit', function(ev) {

ev.preventDefault();

stripe.confirmCardSetup(

clientSecret,

{

payment_method: {

card: cardElement,

billing_details: {

name: cardholderName.value,

},

},

}

).then(function(result) {

if (result.error) {

// Display error.message in your UI.

} else {

// Most important the setup has succeeded. So, display a successful message.

}

});

});

Charge the saved card in future

When you are ready to charge your customer off-session, use the Customer and PaymentMethod IDs to create a PaymentIntent.

server.js

try {

const paymentIntent = await stripe.paymentIntents.create({

amount: 1099,

currency: 'usd',

customer: '{{CUSTOMER_ID}}',

payment_method: '{{PAYMENT_METHOD_ID}}',

off_session: true,

confirm: true,

});

} catch (err) {

// Then, the error code will be authentication_required if authentication is needed

console.log('Error code is: ', err.code);

const paymentIntentRetrieved = await

stripe.paymentIntents.retrieve(err.raw.payment_intent.id);

console.log('PI retrieved: ', paymentIntentRetrieved.id);

}