save a credit card for later payment

[Karman40]

I want to ask for help. How can I save a credit card without a transaction? Which module should I use?

I tried to use the ngx-stripe-card element, if you need to use this, is it possible for desing to look like Angular Material input fields? Is it possible to save Google Pay and Apple Pay here?

I got a token error when using the ngx-stripe-payment element.

Thanks in advance!

[richnologies]

Hi @Karman40,

Yes you can. It can be done both the Card and the Payment Element, but since you suggest you're interested too in Google Pay and Apple Pay I'm going to show how to do it using the Payment Element.

When we want to save a payment method without charging the customer, we need to use a Setup Intent instead of Payment Intent

The only other consideration is that you also need to create a Customer first. This makes since, we need to the create the customer so then we can use SetupIntents to attach the payment method to it.

In summary:

We create the customer in our server (check the docs for more info)

const stripe = require('stripe')('sk_test_XXXXXXX');
const customer = await stripe.customers.create({
  name: 'John Doe',
  email: 'support@ngx-stripe.dev',
  description: 'My First Test Customer (created for API docs at https://www.stripe.com/docs/api)',
});

We create the Setup Intent in our server to use with the Payment Element:

const stripe = require('stripe')('sk_test_XXXXXXX');
const setupIntent = await stripe.setupIntents.create({
  customer: customer.id
});

We confirm the setup in the client:

this.stripeService.confirmSetup({
  elements: this.paymentElement.elements,
  confirmParams: {
    payment_method_data: {
      billing_details: {
        name: this.checkoutForm.get('name').value,
        email: this.checkoutForm.get('email').value,
        address: {
          line1: this.checkoutForm.get('address').value,
          postal_code: this.checkoutForm.get('zipcode').value,
          city: this.checkoutForm.get('city').value,
        },
      },
    },
  },
  redirect: 'if_required',
})
.subscribe({
   // DO SOMETHING
});

Here is a link to a Stackblitz with a full example:

https://stackblitz.com/edit/ngx-stripe-issue-173?file=src/app/app.component.ts&view=editor

A few notes no the example:

• I put the creation of the customer and the SetupIntent in the ngOnInit for simplicity, but is not the best practice since you will be creating a customer every time you enter the view. Probably you should split this view in steps to avoid customers duplications
• Ignore all the PlutoService stuff, this is just a private API I use to be create server entities without exposing my keys. You need to implement your own way to create the customer and the setup intent. For example, you might prefer to make just one API call to create the customer and the setup intent at the same time.

I hope this helps you, if need anything else just let me know. Thanks for the issue, I'll add this example to the docs so it might help others too.

Kind regards

R

[Karman40]

@richnologies Thank you so much for this detailed description so everything will go.

[denes16]

can i use this on angular 11? Because theres no payment element component on that version

[richnologies]

Hi @denes16,

Version 11.2.0 should have the payment element component

Please let me know if that is not the case

Have a nice day

R