benoit-defer-invoice | Stripe Developers | Page 1

high portalBOT Jun 28, 2023, 8:58 PM

#

solar raft Jun 28, 2023, 9:02 PM

#

Hey there

quasi jewel Jun 28, 2023, 9:02 PM

#

Hi 🙂

solar raft Jun 28, 2023, 9:03 PM

#

Can you show me your client-side submit code here?

quasi jewel Jun 28, 2023, 9:05 PM

#

Sure

#

S async initPayment(clientSecret: string) {
// Prevent multiple form submissions
if (this._submitBtn.disabled) {
return;
}

    // Disable form submission while loading
    this._submitBtn.disabled = true;


    const { error: submitError } = await this._elements.submit();
    if (submitError) {
        this._handleError(submitError);
        return;
    }

    // Confirm the PaymentIntent using the details collected by the Payment Element
    const { error } = await this._api.confirmPayment({
        elsements: this._elements,
        clientSecret: clientSecret,
        confirmParams: {
            return_url: 'https://example.com/order/123/complete',
        },
    });

    if (error) {
        // This point is only reached if there's an immediate error when
        // confirming the payment. Show the error to your customer (for example, payment details incomplete)
        this._handleError(error);
    } else {
        // Your customer is redirected to your `return_url`. For some payment
        // methods like iDEAL, your customer is redirected to an intermediate
        // site first to authorize the payment, then redirected to the `return_url`.
    }
}

#

I moved the example code into a class method

high portalBOT Jun 28, 2023, 9:06 PM

#

solar raft Jun 28, 2023, 9:07 PM

#

Hmm okay that is indeed a bit of a weird error message. You logged out the client secret and ensured it is the one from the Invoice's PaymentIntent, yes?

quasi jewel Jun 28, 2023, 9:08 PM

#

Yes, this is this one : pi_3NO1RDAYYvne95SH2q6lXJ9r

#

I pass the client_secret of this PI as parameter of my method

solar raft Jun 28, 2023, 9:12 PM

#

Can you show me how you are creating your Payment Element?

quasi jewel Jun 28, 2023, 9:12 PM

#

Yes

#

initForm() {
this._form = document.getElementById('payment-form-' + this._formUniqueKey);
this._submitBtn = document.getElementById('submit-' + this._formUniqueKey);

    const paymentOptions = {
        mode: 'payment',
        amount: 1099,
        currency: 'eur',
        // Fully customizable with appearance API.
        appearance: {/*...*/ },
        setupFutureUsage: 'off_session',
    };

    // Set up Stripe.js and Elements to use in checkout form, passing the client secret obtained in a previous step
    this._elements = this._api.elements(paymentOptions);

    // Create and mount the Payment Element
    const paymentElement = this._elements.create('payment');
    paymentElement.mount('#payment-element-' + this._formUniqueKey);

    const addressOtions = { mode: 'shipping' };

    // const addressElement = this._form.create('address', addressOtions);
    // addressElement.mount('#address-element');
}

#

I see i made a typo

solar raft Jun 28, 2023, 9:16 PM

#

Okay so you are doing a couple unique things here in terms of this flow since it typically is not done with a send_invoice Invoice using payment mode in the Deferred Intent flow.

#

I'm checking with a colleague on the correct way to handle this flow. Give us a minute.

quasi jewel Jun 28, 2023, 9:17 PM

#

Thank you !

#

I have a new error message :

"message: "Payment details were collected through Stripe Elements using automatic payment methods and cannot be confirmed with a Payment Intent configured with payment_method_types."

solar raft Jun 28, 2023, 9:19 PM

#

Ah okay that actually makes more sense

quasi jewel Jun 28, 2023, 9:19 PM

#

Yes sorry, i had a typo :

        el`s`ements: this._elements,

#

I would like having the errors shown, but i don't know how to cast my objects

solar raft Jun 28, 2023, 9:21 PM

#

So in this case you would need to actually set the paymentMethodTypes (https://stripe.com/docs/payments/accept-a-payment-deferred?platform=web&type=payment#additional-options) when you create your Payment Element client-side to match the Payment Method Types that are on the PaymentIntent from the Invoice

quasi jewel Jun 28, 2023, 9:22 PM

#

That's what i already tried, but i can't find the keywords to set for paymentMethodTypes

fossil echo Jun 28, 2023, 9:23 PM

#

benoit-defer-invoice

#

          mode: 'payment',
          amount: <?= $invoice->amount_due; ?>,
          currency: '<?= $invoice->currency; ?>',
          paymentMethodTypes: ['card'],
        };```

#

something like ^ this works for me locally

quasi jewel Jun 28, 2023, 9:26 PM

#

Hello, Yes it worked ! Is there a possibility to enable automaticaly all the payment types i activated on the Dashboard ?

#

Sooner, I tried this example that automaticaly propose me all the payment methods :

fossil echo Jun 28, 2023, 9:28 PM

#

that doesn't work with Invoices at all

#

honestly my advice is to not follow those docs at all for your flow really

quasi jewel Jun 28, 2023, 9:28 PM

#

OOps

fossil echo Jun 28, 2023, 9:28 PM

#

1/ Create the Invoice
2/ Get the PaymentIntent + client_secret
3/ Client-side, render PaymentElement with that client_secret

quasi jewel Jun 28, 2023, 9:31 PM

#

Yes but my problem is that my card form is shown in the same screen as my cart, and the customer can add/remove upsells etc. If i do what you suggest, i would have to create as many PI that the user make changes, and would reload the Stripe form each time, no ?

fossil echo Jun 28, 2023, 9:33 PM

#

Yeah sadly that's really just the way. Do you absolutely need to use Invoices in the first place?

quasi jewel Jun 28, 2023, 9:35 PM

#

What do you mean please ?

fossil echo Jun 28, 2023, 9:36 PM

#

Why are you using Invoices in the first place?

#

you mentioned doing send_invoice + the Dashboard flow. Is this you just testing really quickly and not realizing what Invoicing means as a product

quasi jewel Jun 28, 2023, 9:36 PM

#

In fact i need my customer to manage his cart and let him fill the payment form whenever he wants (the UX i work with told me to do so :/)

fossil echo Jun 28, 2023, 9:36 PM

#

or do you fundamentally have to create real Invoices

quasi jewel Jun 28, 2023, 9:36 PM

#

I don't want to send invoices

#

Yes that was a test to check quickly

fossil echo Jun 28, 2023, 9:38 PM

#

ahhhhhh

#

then really never use Invoices at all for that then

quasi jewel Jun 28, 2023, 9:38 PM

#

My customer will chose his plans, his upsells etc, and then i wanted to call my server to generate an invoice containing all this items, and return to the client the clientSecret

#

Ah ?

fossil echo Jun 28, 2023, 9:38 PM

#

lol

#

Okay sorry, this is really tough

#

We have a product called Invoicing and that comes with a lot of restrictions/validations. And it also comes with limitations such as what I explained above where it's not really compatible with the "defer intent" flow

quasi jewel Jun 28, 2023, 9:40 PM

#

Ok

fossil echo Jun 28, 2023, 9:41 PM

#

Unfortunately you'll have to figure out a workaround such as not using Invoicing at all, or having to split your UI to not render the card UI until it's ready

quasi jewel Jun 28, 2023, 9:43 PM

#

If i don't use invoices, i won't be able to track what subscriptions or products my customer paid for, am i right ?

fossil echo Jun 28, 2023, 9:44 PM

#

wait now you have Subscriptions too? 😅

#

because Subscriptions makes that even more complex

quasi jewel Jun 28, 2023, 9:46 PM

#

quasi jewel My customer will chose his plans, his upsells etc, and then i wanted to call my ...

Yes, that's what i called "plans", maybe i were not clear enough, sorry for my english

fossil echo Jun 28, 2023, 9:47 PM

#

Oh no it's not your English don't worry, just we dove straight into your one-off Invoice example

quasi jewel Jun 28, 2023, 9:47 PM

#

https://tenor.com/view/oops-oh-no-sorry-ouch-yikes-gif-22917874

Tenor

fossil echo Jun 28, 2023, 9:49 PM

#

So okay you're trying to do real subscriptions. So have you tried that first and not the one-off "send_invoice" Invoice?

quasi jewel Jun 28, 2023, 9:49 PM

#

In fact, i already had a payment system that worked, but based on a Stripe Elements of 4/5 years old, and a colleague of yours advised me to update my payment process, as it would be very simplier now with the new version, and i think he was right

quasi jewel Jun 28, 2023, 9:50 PM

#

fossil echo So okay you're trying to do real subscriptions. So have you tried _that_ first a...

No, not yet

#

I'm doing it now

#

(i see that my previous payment worked, but my credit card has not been registered)

fossil echo Jun 28, 2023, 9:53 PM

#

gotcha, so try that and let me know what happens and then we can debug this as we go

quasi jewel Jun 28, 2023, 9:56 PM

#

I can't create an invoice with a plan via the Dashboard :/

fossil echo Jun 28, 2023, 10:00 PM

#

I mean don't use the Dashboard at all

#

You're a developer, write real code 🙂

#

You never create an Invoice for this, you create a Subscription which indicates you accept recurring payments. I worry you're maybe blitzing through too much information at once

#

You're already writing some code, write the server-side part that will create the Subscription, get the Invoice, etc. But don't use the Dashboard for this

#

You might wnat to take a few hours and carefully read through https://stripe.com/docs/billing/subscriptions/build-subscriptions at a minimum

quasi jewel Jun 28, 2023, 10:01 PM

#

I already have all this kinds of code

#

My app is nearly 5 years old and we use subscriptions.
We are making some evolution for our customer to be able to subscribe + take upsells in the same time

fossil echo Jun 28, 2023, 10:04 PM

#

So try and unify the two, don't try and do things quickly manually in the Dashboard, it won't work

quasi jewel Jun 28, 2023, 10:05 PM

#

Ok

#

I will do this tomorrow, with a fresh brain !
Thank you very much for your help and your patience 👍

fossil echo Jun 28, 2023, 10:11 PM

#

sure thing! Sorry this is a lot more confusing than it should be

#benoit-defer-invoice