usm-seong_paymentrequestbutton | Stripe Developers | Page 1

iron rainBOT Mar 8, 2024, 5:44 PM

#

👋 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/1215716779205075034

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

pastel turtleBOT Mar 8, 2024, 5:44 PM

#

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.

usm-seong_unexpected, 2 days ago, 11 messages
usm_rate-limits, 3 days ago, 11 messages

#

fierce coral Mar 8, 2024, 5:47 PM

#

so the use case is when a user confirms with a credit card with insufficient funds, I'd like to display some meaninful message

#

Screen_Shot_2024-03-08_at_12.47.43_PM.png

#

this is the current state

supple ore Mar 8, 2024, 5:50 PM

#

Are you integrating with Payment Reques Button or the Express Checkout Element? And can you also share exactly how you're calling complete()?

fierce coral Mar 8, 2024, 5:50 PM

#

PaymentRequestButtonElement

#

complete('success') for success state
complete('fail') for error state

#

but complete('fail') doesn't close the apple/google pay window

supple ore Mar 8, 2024, 5:52 PM

#

Can you add it back to your block of code and reshare the full block?

fierce coral Mar 8, 2024, 5:59 PM

#

import { useEffect, useState } from 'react';
import { useStripe } from '@stripe/react-stripe-js';
import isEqual from 'lodash/isEqual';
import usePrevious from './usePrevious';

export default function usePaymentRequest({ options, onPaymentMethod, setPlatformPaymentOptions }) {
const stripe = useStripe();
const [paymentRequest, setPaymentRequest] = useState(null);
const [canMakePayment, setCanMakePayment] = useState(false);

const prevOptions = usePrevious(options);
const isOptionsChanged = !isEqual(prevOptions, options);

useEffect(() => {
if (stripe && paymentRequest === null) {
const pr = stripe.paymentRequest(options);
setPaymentRequest(pr);
}
}, [stripe, options, isOptionsChanged, paymentRequest]);

useEffect(() => {
let subscribed = true;
if (paymentRequest) {
paymentRequest.canMakePayment().then(res => {
if (res && subscribed) {
setCanMakePayment(true);
setPlatformPaymentOptions(res);
}
});
}

return () => {
  subscribed = false;
};

}, [paymentRequest]);

useEffect(() => {
if (paymentRequest) {
paymentRequest.on('paymentmethod', onPaymentMethod);
}
return () => {
if (paymentRequest) {
paymentRequest.off('paymentmethod', onPaymentMethod);
}
};
}, [paymentRequest, onPaymentMethod]);

return canMakePayment ? paymentRequest : null;
}

#

      const {
        error: stripePIError,
        paymentIntent: responsePI,
        ...rest
      } = await stripe.confirmCardPayment(
        clientSecret,
        {
          payment_method: paymentMethod.id,
        },
        { handleActions: false },
      );
    if (stripeError) {
      if (stripeError.code === 'card_declined') {
        setIsPlatformPayError(true);
      }
      complete('fail');
      return;
    }

  };

supple ore Mar 8, 2024, 6:04 PM

#

Should if (stripeError) be if (stripePIError)?

fierce coral Mar 8, 2024, 6:05 PM

#

yeah i made some typos here

#

as I was trimming down the code

#

the question is pretty straighforward. i want to display a custom error message on the apple google pay window when the card was declined

#

or close the window progmatically

supple ore Mar 8, 2024, 6:09 PM

#

Yeah the way to close the window is through the complete() function, which is why I'm trying to dig down into why that isn't working for you

iron rainBOT Mar 8, 2024, 6:12 PM

#

usm-seong_paymentrequestbutton

pastel turtleBOT Mar 8, 2024, 6:14 PM

#

solid hull Mar 8, 2024, 6:20 PM

#

Hi 👋

Can you confirm that you have modified your code so the error variable is named consistently?


const {
        error: stripePIError, // <- this name
        paymentIntent: responsePI,
        ...rest
      }
...
if (stripeError) { // <- should be the same here

fierce coral Mar 8, 2024, 6:25 PM

#

yes

#

like I mentioned before, it's just i made a typo as I was trimming down my existing code

solid hull Mar 8, 2024, 6:26 PM

#

Okay can you add a console.log(stripeError) just after the if statement to let me know if the error gets logged?

fierce coral Mar 8, 2024, 6:26 PM

#

Screen_Shot_2024-03-08_at_1.26.39_PM.png

solid hull Mar 8, 2024, 6:33 PM

#

Okay so code execution is getting down to the if(stripeError) block

fierce coral Mar 8, 2024, 6:34 PM

#

this is the screenshot of my code

Screen_Shot_2024-03-08_at_1.34.30_PM.png

#

i had console logs in if(stripeError)

#

they are printed in the console

#

just like the screenshot above

solid hull Mar 8, 2024, 6:36 PM

#

I don't see log lines in your code. If you are going to share the code, please share it exactly as you are running it to test behavior without any "cleaning up". It increasese the chances that what we see and what is being run are not the same behavior,

fierce coral Mar 8, 2024, 6:40 PM

#

i had a console log in if (strtipeError) block, that's what i also said

#

stripeError

#

you already have all the information

#

my code

#

and the error object

solid hull Mar 8, 2024, 6:42 PM

#

I am trying to be helpful. I am just pointing out that the inconsistency between what you say is running and what you show makes it harder for me to be helpful.

fierce coral Mar 8, 2024, 6:42 PM

#

i understand this is the code with the console logs

Screen_Shot_2024-03-08_at_1.42.45_PM.png

#

like i said, it's just complete('fail') not closing the window

#

so if it's not working i'd at least like to know how to display a meaningful error message in the window

#

*google/apple pay window

solid hull Mar 8, 2024, 6:44 PM

#

Okay so I see two lines that are logging the error. Can you take out the one in your confirmCardSetup block and make sure the other still outputs the expected results?

fierce coral Mar 8, 2024, 6:44 PM

#

yes

#

still same output

solid hull Mar 8, 2024, 6:52 PM

#

Okay. So the Complete function is a function returned on the event object. Are you passing the event object down to this part of the code?

I'm not the most skilled JS dev but, looking at my example code, I have been getting this to run successfully

paymentRequest.on("paymentmethod", (ev) => {
    let confirmFunc = null;
    if (isSetup) {
      confirmFunc = stripe.confirmCardSetup;
    } else {
      confirmFunc = stripe.confirmCardPayment;
    }
    confirmFunc(
      clientSecret,
      { payment_method: ev.paymentMethod.id },
      { handleActions: false }
    ).then((confirmResult) => {
      console.log(confirmResult);
      if (confirmResult.error) {
        ev.complete("fail");  // <- calling the function from the event object.
      } else {
        ev.complete("success");

fierce coral Mar 8, 2024, 6:56 PM

#

yes that's basically like my code

solid hull Mar 8, 2024, 6:57 PM

#

I may be missing it but I don't see any reference to the event object we reference here https://docs.stripe.com/js/payment_request/events/on_paymentmethod in your code

fierce coral Mar 8, 2024, 6:58 PM

#

event is destructued like this

#

Screen_Shot_2024-03-08_at_1.58.46_PM.png

#

complete and paymentMethod are coming from event object

#

and everything else works just fine it's just complete('fail') not working

solid hull Mar 8, 2024, 7:01 PM

#

Can you log the complete function just to check that?

fierce coral Mar 8, 2024, 7:07 PM

#

ohh hmm

Screen_Shot_2024-03-08_at_2.06.40_PM.png

Screen_Shot_2024-03-08_at_2.07.09_PM.png

#

why is it timed out

solid hull Mar 8, 2024, 7:13 PM

#

Okay, now we are getting somewhere.

fierce coral Mar 8, 2024, 7:15 PM

#

why could you check why complete gets ignored and timed out?

#

like what could lead to this

solid hull Mar 8, 2024, 7:19 PM

#

The issue is the Payment Request is timing out

#

still digging

fierce coral Mar 8, 2024, 7:20 PM

#

just fyi before confirm card, I fetch payment intent like this

Screen_Shot_2024-03-08_at_2.20.19_PM.png

#

kk please let me know if you found something

solid hull Mar 8, 2024, 7:26 PM

#

Hmmm... that delay could be the problem.

#

Wait... how long does that take?

#

Our steps here have you create the PaymentRequest and mount the PRB before creating the intent: https://docs.stripe.com/stripe-js/elements/payment-request-button

fierce coral Mar 8, 2024, 7:28 PM

#

it takes around 1 second

#

but I didn't want to create a payment intent on page load

#

i wanted to have it when the user actually clicks the checkout button

solid hull Mar 8, 2024, 7:30 PM

#

Oh...

#

Yeah the onClick event is really time sensitive.

#

Just for testing, can you trying to move those calls before the event and see if that works?

#

i.e. create the intent on page load

fierce coral Mar 8, 2024, 7:32 PM

#

yeah give me a moment

#

still the same. please note that i'm doing
stripeError = { code: 'card_declined } just to simulate error state

Screen_Shot_2024-03-08_at_2.36.00_PM.png

Screen_Shot_2024-03-08_at_2.36.13_PM.png

Screen_Shot_2024-03-08_at_2.36.23_PM.png

solid hull Mar 8, 2024, 7:44 PM

#

Okay this is a bit more complex than I think we can debug in realtime here. I'm sorry but I'm going to ask you to write in to Support here https://support.stripe.com/contact and please provide the full code for your front-end integration in text so we can spin up a reproduction of your error and trouble shoot from there.

#usm-seong_paymentrequestbutton