jacopo-handlecardaction-stripejs | Stripe Developers | Page 1

gritty tusk Nov 19, 2021, 5:44 PM

#

what's the status of that PaymentIntent after that call?

#

do you have an example pi_123?

floral arch Nov 19, 2021, 5:49 PM

#

this is the request
https://api.stripe.com/v1/payment_intents/pi_3JxbByGcsB6fofwo0n1UfbTN?key=pk_test_Mvpxt5iFGFwyQU44VnkphGZz00lmve07N1&is_stripe_sdk=false&client_secret=pi_3JxbByGcsB6fofwo0n1UfbTN_secret_KVdEOgT71llIzt15E0HAdyp2Q

and this is what I get as a response

📎 message.txt

gritty tusk Nov 19, 2021, 5:52 PM

#

Have you made this work before? Did something change? I'm trying to grasp what you are doing, what the context is, etc. I don't see you confirm anything at the moment

floral arch Nov 19, 2021, 5:56 PM

#

the context is the following: my backend creates a PaymentIntent with a token given by the frontend. if the payment requires another action i send the payment intentto the frontend and execute handleCardAction as in here
https://stripe.com/docs/payments/payment-intents/migration-synchronous#elements-step-3

#

everything works if the card does not need further actions

gritty tusk Nov 19, 2021, 5:58 PM

#

Can you share some code? Is there a URL I can load to reproduce?

floral arch Nov 19, 2021, 5:58 PM

#

not the url just because it is not online yet, I can send you snippets of code

#

BACKEND
$paymentIntent = [
'amount' => $payment->getChargeableAmount(),
'currency' => $payment->getCurrency(),
'customer' => $payment->getCustomer()->getCustomerId(),
'description' => sprintf("%s: %s %s",$payment->getBankTransferDescription(),$customer->getFirstname(), $customer->getLastname()),
'payment_method_data' => [
'type' => 'card',
'card' => ['token' => $token->id]],
'confirm' => true
];
$paymentIntentResponse = $this->basicStripe->createPaymentIntent($paymentIntent,$headers);

#

this is the creation of the payment intent

gritty tusk Nov 19, 2021, 6:01 PM

#

yeah it would help to have a detailed example to play with

floral arch Nov 19, 2021, 6:05 PM

#

JS side
if(payBookingResponse.data.status==="requires_action"){
await handleNextAction(payBookingResponse.data.client_secret)}

const handleNextAction = async (payment_intent_client_secret) => {
const response = await stripe.handleCardAction(payment_intent_client_secret)
console.log("response", response);
debugger;
}

#

when I do the handleCardAction I get a 200 from the network but I don't even get to the console log

gritty tusk Nov 19, 2021, 6:08 PM

#

yeah I'm not sure your code is called in that case really

#

add a console.log() before the call too?

floral arch Nov 19, 2021, 6:08 PM

#

yeah I debugged it

#

it arrives at the stripe.handleCardAction, I see a 200 and then dies

#

i tried changing handleCardAction to retrievePaymentIntent I get to the console.log, so it something about the function

gritty tusk Nov 19, 2021, 6:10 PM

#

are you missing a semicolon at the end of that line?

floral arch Nov 19, 2021, 6:10 PM

#

it's js es6, i think it doesn't matter

gritty tusk Nov 19, 2021, 6:11 PM

#

okay so I just tried this code and it works perfectly fine for me: ``` document.querySelector('#payment-form').addEventListener('submit', async (ev) => {
ev.preventDefault();

      console.log('before handleCardAction');
      const {paymentIntent, error} = await stripe.handleCardAction(PAYMENT_INTENT_SECRET);
      console.log('after handleCardAction');
      if (error) {
        // Payment failed! Display the error and re-enable the submit button
        // to allow the customer to try again.
        console.log('IT FAILED: ');
        console.log(JSON.stringify(error));
        document.querySelector('#payment-errors').innerText = error.message;
      } else {
        console.log('IT WORKED: ');
        console.log(JSON.stringify(paymentIntent));
      }
    });```

#

Like I click the button see the first log, then I get 3DS, approve it, then see the second log + IT WORKED

#

so can you try doing something like console.log('before handleCardAction'); const {paymentIntent, error} = await stripe.handleCardAction(PAYMENT_INTENT_SECRET); console.log('after handleCardAction'); without all your more advanced JS just to confirm what you see?

floral arch Nov 19, 2021, 6:13 PM

#

i'm trying right now 🙂

#

just to be sure, do I have to pass the client_secret that i have inside the payment intent, am I right?
something like this?
pi_3JxbByGcsB6fofwo0n1UfbTN_secret_KVdEOgT71llIzt15E0HAdyp2Q

#

I tried, I see the "before" but I don't see the "after"

#

http://3633-2001-b07-644b-24a4-d375-7694-af6-517c.ngrok.io/pay/01FMW8VCDSD10SQ7D7G0WH0CJ0

#

I tried with this card
4000000000003220

gritty tusk Nov 19, 2021, 6:22 PM

#

looking

#

          switch (_context.prev = _context.next) {
            case 0:
              console.log('before handleCardAction');
              _context.next = 3;
              return stripe.handleCardAction(payment_intent_client_secret);

            case 3:
              _yield$stripe$handleC = _context.sent;
              paymentIntent = _yield$stripe$handleC.paymentIntent;
              error = _yield$stripe$handleC.error;
              console.log('after handleCardAction');
              debugger;```

#

that is really complex code

#

can you try the simplest thing first? Like no extra form, no extra layer of steps. Just a simple confirmation client side with vanilla JS

#

I honestly don't understand why there's a while(1) with a switch here for something like this

floral arch Nov 19, 2021, 6:25 PM

#

I guess you only see the build js.. there's nothing like such in the code, I don't know exactly what react does :/

gritty tusk Nov 19, 2021, 6:28 PM

#

Can you try for a sec to just move away from your entire website/code and just build a really basic/simple example reproducing this flow

#

that's exactly what I did and it works for me so being able to narrow down what doesn't work for you would help

floral arch Nov 19, 2021, 6:30 PM

#

ok let me try

floral arch Nov 19, 2021, 7:17 PM

#

https://7380-2001-b07-644b-24a4-d375-7694-af6-517c.ngrok.io/test

#

📎 message.txt

#

in each method I pass the payment intent that is returned to me when I create the payment intent with the php

#

thanks for your help anyway 🙂

worthy drum Nov 19, 2021, 7:24 PM

#

Hello! I'm not sure what you mean; are you still seeing an issue or did you figure out how to move forward?

floral arch Nov 19, 2021, 7:25 PM

#

no, I have the same problem that I had before

#

I was thanking you for your help 😅

worthy drum Nov 19, 2021, 7:27 PM

#

What's the specific issue? I'm happy to help if I can, but I don't understand the code you shared as it uses hard-coded Payment Intent objects which is very unusual.

floral arch Nov 19, 2021, 7:28 PM

#

oh ok koopajah asked me to provide a smaller example

gritty tusk Nov 19, 2021, 7:28 PM

#

Just to summarize: they are trying to use handleCardAction and it does nothing for them/never shows 3DS. It's in a complex app with many steps + React + minified code. So I told them to try and do the simplest example in JS and confirm it works
Right now that example is just broken, if you take the time to look at the console log you get a clear error because the PI you created doesn't support manual confirmation

worthy drum Nov 19, 2021, 7:31 PM

#

Yeah, this is the error referred to above:

IntegrationError: handleCardAction: The PaymentIntent supplied does not require manual server-side confirmation. Please use confirmCardPayment instead to complete the payment.

#

The Payment Intent you hard-coded is not compatible with what you're trying to do.

floral arch Nov 19, 2021, 7:32 PM

#

so probably the problem is when I create it

worthy drum Nov 19, 2021, 7:36 PM

#

Are you trying to build a flow where you handle capture server-side? Meaning you explicitly want to avoid client-side capture?

floral arch Nov 19, 2021, 7:37 PM

#

yes exactly, I need to capture server-side.. so I create the payment intent and return the response to the frontend, if it is in requires_action, I use handleCardAction

worthy drum Nov 19, 2021, 7:37 PM

#

Err, I meant to say confirm server-side.

floral arch Nov 19, 2021, 7:38 PM

#

I used the PI API with "confirm" true

worthy drum Nov 19, 2021, 7:38 PM

#

When you created the Payment Intent you didn't set confirmation_method to manual which is the main problem: https://dashboard.stripe.com/test/logs/req_avTNuOE5EVZUFR

#

Details: https://stripe.com/docs/api/payment_intents/create#create_payment_intent-confirmation_method

gritty tusk Nov 19, 2021, 7:40 PM

#

usual: if you didn't use that legacy/discouraged flow you would never be having this issue 🙂

#

you really should consider moving away from confirmation_method: 'manual' completely

floral arch Nov 19, 2021, 7:45 PM

#

ok it worked with the confirmation_method manual!

#

but if I get it right, you suggest I should not do this server side?

gritty tusk Nov 19, 2021, 7:49 PM

#

Correct, you, or someone on your team, decided to use that more complex flow. You likely have good reasons for this, but it's a lot more complex/advanced and it's trickier to use. I'd encourage you to look at our latest/newest guide https://stripe.com/docs/payments/accept-a-payment and using that instead without ever using confirmation_method: 'manual'

floral arch Nov 19, 2021, 8:53 PM

#

ok perfetct, thank you very much!

#jacopo-handlecardaction-stripejs