florin_code

[dawn echo]

👋 Welcome to your new thread!

⏲️ We'll be here soon! Typically we respond in a few minutes, but sometimes we might take a bit longer if the server is busy or if you have a particularly tricky question.

⏱️ We close idle threads, which makes them read-only. Once a thread is closed it won't be reopened, but you can always start a new thread if you have another question.

🔗 This thread will always be available, even after it's closed. You can find it again using Discord's search, or you can save this link: https://discord.com/channels/841573134531821608/1313099155660607488

📝 Have more to share? Add more details, code, screenshots, videos, etc. below.

Below are links to other discussions we've had with you in the past week in case you want to review that information. If your question is related to one of these previous discussions, please provide a comprehensive summary of the current state and what you need help with now. We help many users simultaneously, so a summary allows us to resolve your issue as soon as possible.

• florin_code, 1 hour ago, 4 messages
• florin_best-practices, 2 hours ago, 26 messages
• florin_code, 3 days ago, 17 messages
• florin_unexpected, 3 days ago, 86 messages

[devout spade]

Hi, let me help you with this.

You can check if the card number is the same by looking at fingerprint: https://docs.stripe.com/api/payment_methods/object#payment_method_object-card-fingerprint

However, it will only be available after your app have sent the card details to Stripe.

[fiery shore]

the thing is I am using the confirmCardPayment function from the stripe react package, so I am doing it on the frontend

[devout spade]

The easiest solution would be to check when a new Payment Methods is added, and remove it, if it matched a fingerprint of a PaymentMethod with a different ID.

But how do you want the customer experience to look exactly?

[fiery shore]

Something like this, basically a card input element under the saved payment methods

[fiery shore]

but won't that cause problems, if I delete a payment method used for previous orders / invoices ?

[devout spade]

And what do you want to happen when the customer enters a card with the same number?

[devout spade]

It might. Generally, I wouldn't recommend removing any PaymentMethods. Why is it a problem in your case?

[fiery shore]

to only create a payment method if the card number doesn't already exist

but my flow currenty is the following: Clicking the Pay now button -> api call to my server to create the invoice /payment intent / order -> return the payment client secret to the frontend -> use the clientSecret to pay

[devout spade]

But you still want the payment to succeed with the duplicated card number?

[fiery shore]

well, I would want to use the already existing payment method

Frontend code :

const handleSubmit = async (event: React.FormEvent) => {
event.preventDefault();

if (!stripe || !elements) {
  return;
}
const cardElement = elements.getElement(CardElement);
if (!cardElement) {
  return;
}
console.log(selectedPaymentMethod);

//Add a don't use this card button
const response = await strapiApiClient('/api/payment/one-time', {
  method: 'POST',
  body: {
    billingAddress: 'selectedBillingAddress',
    shippingAddress: 'selectedShippingAddress',
    ...(selectedPaymentMethod && { paymentMethodId: selectedPaymentMethod.id }),
  },
});

if (!response.ok) {
  setError('Something went wrong, try again later!');
  return;
}
const { clientSecret } = await response.json();
if (!clientSecret) {

// this means that the payment was already successful using a saved payment method
alert('success2');
return;
}

const { error, paymentIntent } = await stripe.confirmCardPayment(clientSecret, {
  payment_method: selectedPaymentMethod
    ? selectedPaymentMethod.id
    : {
        card: cardElement,
        billing_details: {
          name: 'Florin Adrian',
          address: {
            city: 'City',
            country: 'GB',
            line1: 'Line1',
            postal_code: '800172',
            state: 'Stat',
          },
          phone: '075421424',
        },
      },
});

if (error) {
  setError(error.message ?? 'Something went wrong, try again later!');
}

if (paymentIntent?.status === 'succeeded') {
  // Payment successful, handle success (maybe redirect or update UI)
  alert('success');
}

};

[devout spade]

This would require creating a PaymentMethod with the new card, checking if it matches any existing ones, removing the new duplicated card and replacing it with the saved card in the PaymentIntent. This is a lot of extra effort with not much added value, to be honest. Most users will see that their card is saved and just reuse it.

[fiery shore]

yea, to be honest I was thinking the same, I was going to do something only if it's not too much effort

[devout spade]

That's too much effort.

I also recommend you to look at this new feature instead: https://docs.stripe.com/payments/save-and-reuse?platform=web&ui=elements#save-payment-methods

[fiery shore]

I have read that doc, but I am creating a custom checkout, since my flow is a bit different and I want the user to be able to choose between multiple cards

[devout spade]

This allows your customers to save, reuse and manage their Payment Methods.

[devout spade]

This also allows you to choose among multiple saved Payment Methods.

[fiery shore]

afaik you could not save multiple cards using that component, right?

only different providers

For example I wanted to save multiple VISA / Mastercard cards

[devout spade]

You can save multiple cards of any brand.

[fiery shore]

hmm I see, I will give it a try and see if it fits my requirements

I have one more question about payment intents statuses. I know that there are statuses like require_confirmation which means that the user needs to confirm the payment via their phone app for example, or a new portal opens, I've seen that stripe is opening a mock of that functionality when using a test card for that situation, but I've also seen that there is the status called "require_action" which has an action property, but I've never encountered while testing, do I need to do something special there, besides only passing the clientSecret of the payment intent to my frontend and using it for the payment?

[devout spade]

require_confirmation which means that the user needs to confirm the payment via their phone app for example
That's not correct.
This means that your app need to make a request to confirm the PaymentIntent: https://docs.stripe.com/js/payment_intents/confirm_payment

Instead, require_action means that the customer needs to perform an action, like complete 3DS. You can simulate it by using one of the test cards: https://docs.stripe.com/testing#regulatory-cards

[fiery shore]

yea, that's what I have tested and this modal opens up.

is this all? I thought I need to pass the action to my frontend or something like that

[devout spade]

No it's taken care of by the Payment Element, you don't need to do anything.