Avoid paymentintent creation on form load

[sh22gr]

Hi,

i am implementing the 'payment' element for paymentintent

https://stripe.com/docs/payments/payment-element

https://stripe.com/docs/payments/quickstart

with html, php & javascript

With the sample Stripe provides, i have the issue (well some would say it's expected) that, as soon the payment page is loaded, Stripe generates a payment intent with status ''Incomplete" .. then, when card details are entered and processed, a second payment intent is generated with (say) "Succeeded"

I start my code with 

initialize();

then 

// Fetches a payment intent and captures the client secret
async function initialize() {
  const { clientSecret } = await fetch("../create.php", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ items }),
  }).then((r) => r.json());

  elements = stripe.elements({ clientSecret });

  const paymentElement = elements.create("payment");
  paymentElement.mount("#payment-element");
}

In order to avoid having an ''Incomplete" paymentintent generated i could either fetch the 1st generated paymentintent and then having it updated (on form submit) 

... or have a seperate URL, to fetch the 1st paymentintent  .. and so on

Do you have any recommendation for me?

I will provide the solution on a SaaS app, where clients can utilize the Stripe Gateway, to charge their clients.

It will be confusing for them to see these ''Incomplete" paymentintents on their payments page

[Remi J.]

Hello,

You definitely should be "re-using" the previous PaymentIntent in this case. The idea behind that API is that you create it to represent the intent for a customer to pay you. And then as the customer navigates on your website you update that PaymentIntent to reflect how much they are going to pay. For example they might add something new to their cart or maybe they change the shipping address which would change your delivery fees. In all those cases, you can make a call to your server where you will update that specific PaymentIntent via the API and not create a new one.

Usually, you track this in a session server-side where you associate that customer with the PaymentIntent. You could also have a "user account" so that whenever they change or update their cart you save this in your own database so that they can pick up where they left off on another device later. In all those cases, you wouldn't create a brand new PaymentIntent, you'd re-use the one you originally created for it, even if it spans multiple days before they decide to pay.

I hope this helps answer your question!

Best,

Remi

--
To unsubscribe from this group and stop receiving emails from it, send an email to api-discuss...@lists.stripe.com.

[sh22gr]

Hi Remi,

I suppose that this 'incomplete' status (in my dashboard) happens, because i choose the 'payment' element and not the 'card' element, right?

I see that the payment method is not passed, since user has not yet selected how he/she wants to pay, when 

'automatic_payment_methods' => ['enabled' => true,]

On a 'card' payment, the payment method is passed.. like i can see in Stripe's available scripts, as seen here:

https://github.com/stripe-archive/accept-a-card-payment/tree/master/without-webhooks/server/php

So, the only solution is to store the paymentintent in a session?

I don't really have a shopping card etc.. it's an implementation for a SaaS solution, where my customers will be able to enter their keys and utilize the solution i will provide, to charge THEIR customers, by providing optional payments with the 'automatic_payment_methods' => ['enabled' => true,]

[Remi J.]

Hello,

This is not related to the PaymentElement feature no. It works the same whether you use that one or the CardElement feature. A PaymentIntent is created on page load. At that point it's incomplete since it hasn't been confirmed and paid successfully yet. Your code needs to ensure that you do not create another PaymentIntent for that transaction. You create it server-side, then client-side you use the `client_secret` and confirm the PaymentIntent with the payment method details you collected. At that point you have a PaymentIntent in `status: 'succeeded'` and you're done.

If you are seeing more incomplete PaymentIntents afterwards it's a bug in your code. Most likely because every time you load the page it creates a new PaymentIntent even after the previous one was confirmed successfully. You need to fix your code to only create the PaymentIntent when it makes sense, on page load when someone is starting to buy something on your app, and then re-using that one until they are done with their plan to buy something.

I would recommend that you work directly with our support team at this point and provide clear examples PaymentIntents ids (pi_123) and your exact code so that they can help you debug this further. You can contact them here: https://support.stripe.com/contact

Best,

Remi