Srujan | Stripe Developers | Page 1

formal shellBOT Dec 19, 2022, 5:19 PM

#

gentle cairn Dec 19, 2022, 5:20 PM

#

Hi 👋

Some payment methods require the browser to be taken to a new site. In these cases Stripe's communication with that payment provider is the only way to get the user back to your site.

Is there something that providing the return_url doesn't do for you?

whole dome Dec 19, 2022, 5:25 PM

#

Hi Snufkin. The only issue is that I'm being redirected before the rest of my handle submit logic is being executed. And if successful I need to call capture payment backend endpoint and I want to redirect to a success page, but if unsuccessful we have custom error messages based on stripe errors and other errors that are part of apis we're calling in handle submit

#

I also don't want to reload the page if there's an error

gentle cairn Dec 19, 2022, 5:29 PM

#

Hmmm 🤔

#

What payment methods are experiencing this behavior?

whole dome Dec 19, 2022, 5:29 PM

#

I guess I should just set redirect to if required and then use the paymentIntent to finish out my logic ?

#

right now i've only tested card and google pay

#

we're only accepting card, google pay, and apple pay so far

#

Ah that seemed to work

#

But with google pay I'm experience odd behavior

gentle cairn Dec 19, 2022, 5:35 PM

#

I would definitely use the if_required parameter

whole dome Dec 19, 2022, 5:35 PM

#

I guess I'm confused, do you mind if I post my submit handler and could you see what I need to change? I may have to have separate google pay conditionals?

#

We're basically doing a food ordering app and have to process a customer's order with an API before capturing payment or we cancel payment

gentle cairn Dec 19, 2022, 5:41 PM

#

Okay sure

whole dome Dec 19, 2022, 5:41 PM

#

📎 message.txt

#

It seems the card flow is working fine, but I am not sure how I would only resume the rest of the submit handler after calling confirmPayment if the user submits the google pay from the window? And how to handle google pay errors?

#

I basically took this from the old Google pay flow we had using Payment Request Button Element and modified but I'm trying to clean up

#

With google pay, I'm getting an error Unable to download payment manifest "https://pay.google.com/gp/p/payment_method_manifest.json".

gentle cairn Dec 19, 2022, 5:48 PM

#

Okay that's interesting. I'm not redirected at all when I use Google pay

whole dome Dec 19, 2022, 5:50 PM

#

With my code?

#

Yeah I can't see my paymentIntent log after calling confirmPayment

gentle cairn Dec 19, 2022, 5:51 PM

#

Sorry I don't have a React integration up and running

#

I just meant my vanilla-JS integration

whole dome Dec 19, 2022, 5:51 PM

#

Oh

gentle cairn Dec 19, 2022, 5:51 PM

#

I see the. modal window

#

for Google Pay

#

and then I select my test card credentials

#

The payment succeeds and I'm still looking at my Payment element screen

whole dome Dec 19, 2022, 5:52 PM

#

Ah sorry I guess I have a different issue than redirect

#

The redirect: 'if_required" fixed that issue for me

#

Because card, gpay, and apple pay aren't redirect based right?

gentle cairn Dec 19, 2022, 5:53 PM

#

I confirm my payment with

const resp = await stripe.confirmPayment({
        elements,
        confirmParams: {
          return_url: "http://localhost:8000/success",
        },
        redirect: "if_required",
      });

#

Yup, just modal windows

whole dome Dec 19, 2022, 5:53 PM

#

Okay so really the issue is I don't see a log of my payment Intent after calling confirmPayment when selecting google pay

#

          stripePaymentId = clientSecret.split('_secret')[0];
          const { paymentIntent, error } = await stripe.confirmPayment({
            elements,
            confirmParams: {
              return_url: `${window.location.href}`
            },
            redirect: 'if_required'
          });
          console.log(paymentIntent, 'paymentIntent from gpay');

gentle cairn Dec 19, 2022, 5:57 PM

#

Okay I see what you mean now

#

I do return an error but I on't see us stating that we will return the Payment Intent in our docs here: https://stripe.com/docs/js/payment_intents/confirm_payment

whole dome Dec 19, 2022, 6:04 PM

#

It looks like it's returned if redirect is to to if_required right?

#

Lemme console the error though

#

okay so I see the modal popup and then disappear

#

but no error log, maybe lemme comment out the rest of the flow

#

Yeah Idk why the google modal keeps opening and then closing

gentle cairn Dec 19, 2022, 6:19 PM

#

Okay so that seems like it's own issue

#

And you don't see anything in the log pertaining to Google Pay?

whole dome Dec 19, 2022, 6:21 PM

#

No =/

#

I get this error Unable to download payment manifest "https://pay.google.com/gp/p/payment_method_manifest.json".

faint frost Dec 19, 2022, 6:22 PM

#

👋

#

Stepping in

whole dome Dec 19, 2022, 6:22 PM

#

Hi Bismarck

#

I'm guessing my issues are from that ^^ error

faint frost Dec 19, 2022, 6:22 PM

#

The above error you are seeing should be a No-Op. It is produced by Google and we've reached out to them about it already due to the confusion it is causing

#

Are you seeing any affect on your payment process due to it?

whole dome Dec 19, 2022, 6:23 PM

#

Not to my card payment, but when I select google pay and press the payment button, it opens the google pay modal temporarily and then it closes and I don't see any logs after calling confirmPayment

#

I can post my submit handler if you want to take a look. I also have an ngrok link if you want to take a look there

faint frost Dec 19, 2022, 6:27 PM

#

Yeah both of those would be helpful

#

The above error shouldn't be the issue

whole dome Dec 19, 2022, 6:28 PM

#

Okay thanks

#

📎 message.txt

#

And here's the ngrok link https://70a5-2601-281-8000-25c-d03d-1665-c5af-4e19.ngrok.io

#

You'll have to add an item to your cart, go to cart, go to checkout, add name and email, and open the payment drawer to see google pay

faint frost Dec 19, 2022, 6:32 PM

#

K give me a sec

#

Can you turn off Strict Mode?

#

I've seen that cause weird things to happen when testing Stripe Components

whole dome Dec 19, 2022, 6:35 PM

#

sure

#

I just did, still getting the same weird behavior

faint frost Dec 19, 2022, 6:38 PM

#

Hmm okay that manifest error is different than the one I was thinking of so yeah that may be the issue actually.

#

Let me look more

whole dome Dec 19, 2022, 6:38 PM

#

thanks

faint frost Dec 19, 2022, 6:48 PM

#

I wonder if the issue is your drawer that you are using

#

Have you tried testing this outside your drawer?

#

Can you try setting an allow attribute to "payment *"

#

We talk about tihs here with PaymnetRequstButton https://stripe.com/docs/stripe-js/elements/payment-request-button?client=html#html-js-testing with an iframe

#

Wonder if the same issue is happening

whole dome Dec 19, 2022, 7:19 PM

#

yup will try it out

#

the drawer isn't an iframe though, it's mui drawerhttps://mui.com/material-ui/react-drawer/ where do I set this attribute?

React Drawer component - Material UI

Navigation drawers provide access to destinations in your app. Side sheets are surfaces containing supplementary content that are anchored to the left or right edge of the screen.

#

let me try rendering outside but I did this before and didn't seem to be an issue

#

I did have the payment request button working with gpay inside the drawer earlier

faint frost Dec 19, 2022, 7:37 PM

#

Interesting

#

Yeah I realized it wasn't an iframe but I wondered if it was the same issue

#

Try outside of it and let me know

whole dome Dec 19, 2022, 7:43 PM

#

ah shit

#

it works outside the drawer =/

faint frost Dec 19, 2022, 7:44 PM

#

Okay yeah that's what I expected

#

So yeah hmmmm

#

The drawer is likely messing with the google modal

#

Might be worth googling to see if there is a way to successfully open the google modal from a drawer

whole dome Dec 19, 2022, 7:45 PM

#

Thanks bismarck!

faint frost Dec 19, 2022, 7:45 PM

#

Sure thing!

whole dome Dec 19, 2022, 7:47 PM

#

What kind of things can I expect back from the paymentIntent on google pay? Would I still get back a requires_action on this flow?

#

I just put it back in the drawer and it's working so kind of weird

faint frost Dec 19, 2022, 7:49 PM

#

Huh that is strange

#

Google Pay fulfills the 3DS requirement

#

So it shouldn't move to requires_action generally.

#

But overall confirmPayment will handle everything for you

whole dome Dec 19, 2022, 8:29 PM

#

so we won't get requires_capture back at all? will there possibly not be a paymentIntent that comes back from calling confirmPayment if google pay is selected?

#

How do I know how to call capturePayment on backend or cancelPayment in the google pay flow?

solid token Dec 19, 2022, 8:40 PM

#

Are you using manual capture?

whole dome Dec 19, 2022, 8:40 PM

#

yes

solid token Dec 19, 2022, 8:40 PM

#

The steps surrounding google pay are concerned with confirmation -- if you use manual capture that would be a separate step for you to manage

whole dome Dec 19, 2022, 8:41 PM

#

I guess what's happening with google pay right now is that in my submit handler the function returns out after calling confirmPayment and so the rest of the process isn't completed

solid token Dec 19, 2022, 8:45 PM

#

Hmm not too sure about that but sounds plausible

whole dome Dec 19, 2022, 8:47 PM

#

What do people usually do when using manual capture with google pay on the payment element? We were using Payment Request Button before but had trouble getting it to show google pay.

#

The card flow seems to be working well because paymentIntent is returned after calling confirmPayment so I can use the status and error to do the capture/cancel flow

feral helm Dec 19, 2022, 8:50 PM

#

Hello 👋
Taking over for synthrider as they need to step away soon

#

To summarise, even with capture method set to manual, the PaymentIntent moves to succeeded right after confirming the PaymentIntent by using Google Pay?

#

In my testing I see the PaymentIntent moving to requires_capture status

whole dome Dec 19, 2022, 9:03 PM

#

Do I set capture_method to manual when creating the paymentIntent?

feral helm Dec 19, 2022, 9:05 PM

#

Yes

whole dome Dec 19, 2022, 9:05 PM

#

But yes that's the issue. I don't understand though because I get requires_capture status when doing the card payment but not google pay

#

Is it different somehow?

#

I guess I need to set that property

feral helm Dec 19, 2022, 9:05 PM

#

Looking at your previous messages, I think my colleagues were under the assumption that you are currently setting capture_method as manual

whole dome Dec 19, 2022, 9:05 PM

#

ah I see

#

Yeah I'm gonna have to try that

#

but why would I be getting requires_capture back as a status from the paymentIntent for card payments?

#

Out of curiosity?

#

If that isn't set, then shouldn't the charge be automatically completed?

#

oh wait I do have it set

feral helm Dec 19, 2022, 9:07 PM

#

Yeah if you are not setting capture_method as manual then confirmPayment should take care of everything

whole dome Dec 19, 2022, 9:07 PM

#

Okay yeah I do have it set to manual

    amount: number,
    partnerName: string,
    email?: string,
  ): Promise<any> {
    const accountId = StripeService.getStripeAccountId(partnerName);

    // Empty Stripe Account means not set value
    if (accountId === '') throw new BadRequestException();

    try {
      const stripe = this.getStripeAccount(accountId);

      this.logger.log('pay amount', amount, 'partner', partnerName);
      const data: Stripe.PaymentIntentCreateParams = {
        amount: amount,
        currency: 'usd',
        capture_method: 'manual',
        payment_method_types: ['card'],
      };
      if (email != null && email != '') {
        data['receipt_email'] = email;
      }
      // Setting capture method to "manual" here allows for us to capture it once order has finalized
      const paymentIntent = await stripe.paymentIntents.create(data);

      const clientSecret = paymentIntent.client_secret;

      return { client_secret: clientSecret };
    } catch (exception) {
      this.logger.error(exception);
      throw new InternalServerErrorException();
    }
  }```

#

Sorry for the confusion, I don't handle backend so I'm having to look through the code

feral helm Dec 19, 2022, 9:08 PM

#

can you share an example PaymentIntent ID where you're seeing this behavior?

whole dome Dec 19, 2022, 9:09 PM

#

Sure

#

pi_3MGqaiDTwu9XYxBB0EZZb20D

#

So it looks like I'm getting some type of google error in the modal but I can't see any logs after confirmPayment is called unfortunately so I can't diagnose

feral helm Dec 19, 2022, 9:11 PM

#

are you seeing any error messages in your web console?

whole dome Dec 19, 2022, 9:11 PM

#

Unexpected developer error, please try again later.``` this is what I get when trying to pay

#

Just this one Unable to download payment manifest "https://pay.google.com/gp/p/payment_method_manifest.json".

#

I did have an issue with rendering this inside a drawer so I may try taking it out again to test

feral helm Dec 19, 2022, 9:12 PM

#

The PaymentIntent you've shared is still in requires_payment_method status so it hasn't been confirmed yet. Do you have any other examples where the PaymentIntent has been confirmed and have succeeded even though you had capture_method set to manual?

whole dome Dec 19, 2022, 9:13 PM

#

Not with google pay, just with card

#

pi_3MGpwNDTwu9XYxBB1nSOa4Sz

feral helm Dec 19, 2022, 9:14 PM

#

Looks like with card it works as expected.
So something must be failing somewhere which causes the confirmation to fail

#

Can you try without the drawer and see if you get a different error?

whole dome Dec 19, 2022, 9:16 PM

#

sure thing

whole dome Dec 19, 2022, 9:37 PM

#

I did get this error when rendering the element outside the drawer
pay.js:137 DEVELOPER_ERROR in loadPaymentData: Invalid stripe:publishableKey for current environment. Make sure you are using Stripe's test key.

feral helm Dec 19, 2022, 9:37 PM

#

Interesting, are you initialising the SDK correctly?

whole dome Dec 19, 2022, 9:40 PM

#

I've never gotten this error before so I believe so, I haven't changed anything. I run this const stripePromise = loadStripe(stripeConfig.publicKey, {
stripeAccount: stripeConfig.accountId
});
and pass it to the checkout page

feral helm Dec 19, 2022, 9:42 PM

#

can you double check if publicKey is indeed setting the right value?

whole dome Dec 19, 2022, 9:42 PM

#

sure

#

Hmm I only get that error when I get the google pay error when trying to pay but not on card

vital belfry Dec 19, 2022, 9:58 PM

#

Hi there! Just taking over from my colleague who needs to step away

#

to be clear, publicKey is setting the right value? which accountId value are you using in this case?

whole dome Dec 19, 2022, 10:00 PM

#

  publicKey:
    'pk_test_51L6JVvJlV60ASTL6O9YdHikiZiTPQUY1pLPkNKqudXBtqsi2kv1TE84Etb1yhrQuKYnaosbqW6JUXtVG6a0PY0u300XEBTu6KO',
  accountId: 'acct_1LowvdDTwu9XYxBB'
};```

#

this is my publicKey and acountId

vital belfry Dec 19, 2022, 10:06 PM

#

okay, let's take a step back since a few things have been discussed in this really long thread. could you share a quick summary of the outstanding questions/issues?

whole dome Dec 19, 2022, 10:11 PM

#

Sure. My credit card flow is working now with the Payment Element, but the Google Pay is getting hung up. When the modal appears, I press pay, and I get Uh oh, something went wrong Unexpected developer error, please try again later. this displayed. There's no way to diagnose, because when I console log in my submit handler after calling stripe.confirmPayment, nothing appears. So it seems that I'm returned out of my submit handler after calling confirmPayment. I console log right before and that displays but after and nothing displays

#

I also only get pay.js:137 DEVELOPER_ERROR in loadPaymentData: Invalid stripe:publishableKey for current environment. Make sure you are using Stripe's test key. after hitting google pay and the modal closes

#

If you want to observe yourself you can check out the link https://70a5-2601-281-8000-25c-d03d-1665-c5af-4e19.ngrok.io/

#

hmm, turning off strictmode allow me to see the logs

#

weird

gentle cairn Dec 19, 2022, 10:22 PM

#

Hi 👋

Can you share an example payment intent ID that you're using to render the Payment Element?

whole dome Dec 19, 2022, 10:23 PM

#

Sure. I am getting logs now that strictmode is off so I wonder if that was causing weird issues?

#

pi_3MGripDTwu9XYxBB1kpljwWD

gentle cairn Dec 19, 2022, 10:24 PM

#

Oh yeah, we have seen that be an issue when developing in React

whole dome Dec 19, 2022, 10:24 PM

#

But I'm still not able to complete the gpay so I don't know why. The error that comes back is code : "incomplete" message : "Please fill in your card details." type : "validation_error"

gentle cairn Dec 19, 2022, 10:28 PM

#

Hmmm... okay I don't see anything amok with conflicting keys/accounts. That was a hunch I had about what may be causing this issue

whole dome Dec 19, 2022, 10:33 PM

#

Yeah I'm not entirely sure why I'm getting an error back from calling confirmPayment when google pay is selected

gentle cairn Dec 19, 2022, 10:33 PM

#

Especially given that the same flow works with a CC

whole dome Dec 19, 2022, 10:34 PM

#

Can i expect to get back a paymentIntent, it's coming back undefined looks like

gentle cairn Dec 19, 2022, 10:35 PM

#

What happens if you try to not destruct the response from the stripe .confrmPayment call?

gentle cairn Dec 19, 2022, 11:10 PM

#

@whole dome have you had a chance to test this out? I'm trying the same approach in my vanilla JS implementation and I'm able to go through the Google Pay flow without incident.

#

I instantiate my Stripe JS instance like so

 var stripe = Stripe(data.publicKey, {
      apiVersion: "2020-08-27",
      stripeAccount: "acct_1L6fbfRMSufZOWVI", // Standard Connect Account
    });

#

Create the intent using the Stripe Account header:

intent = stripe.PaymentIntent.create(
            amount=13000,
            currency="usd",
            payment_method_types=['us_bank_account', 'card'],
            setup_future_usage="off_session",

            stripe_account=self.STANDARD_ACCOUNT,
        )

#Srujan