reikoBooop | Stripe Developers | Page 1

knotty socketBOT May 11, 2023, 1:00 AM

#

lone swallow May 11, 2023, 1:04 AM

#

To remove you can disable the wallet option on JS, ie. https://stripe.com/docs/js/elements_object/create_payment_element#payment_element_create-options-wallets-googlePay But I think the error is a different issue

Stripe JS Reference

lime saddle May 11, 2023, 1:07 AM

#

yes error is different issue. So if you can go to this link https://consumer.dev.booop.it/ and scan this QR code (unfortunately I do not have any other way to re-create the error as this app relies on local storage for cart info)

Booop - Discover. Pay. Go

The New Way to Shop and Checkout

#

we have live connected account and apple pay works fine but not google pay.
I have passed test mode key from frontend so that is not going to charge anything (its still in dev environment)

lone swallow May 11, 2023, 1:10 AM

#

It requries to scan a QR code 🙂 How do I get to the payment page?

lime saddle May 11, 2023, 1:18 AM

#

QR code that I sent has all the info, so once scan the qr within URL and just add the item to cart and click checkout button go to checkout

#

I tried to add wallets object to options but I get type error saying that StripeElementsOptions type does not have wallet property
setOptions({
mode: 'payment',
amount: paymentIntentObject.totalAmount,
currency: 'aud',
payment_method_types: ['card'],
paymentMethodCreation: 'manual',
wallets: 'never',
});
setOptions({
mode: 'payment',
amount: paymentIntentObject.totalAmount,
currency: 'aud',
payment_method_types: ['card'],
paymentMethodCreation: 'manual',
wallets: { applePay: 'never', googlePay: 'never' },
});

lone swallow May 11, 2023, 1:31 AM

#

those options look unfamiliar to me. Which call are you passing those options into?

#

It looks like PaymentIntent creation options on backend

lime saddle May 11, 2023, 1:36 AM

#

I am using Stripe Element shown in this doc, it is frontend code not backend
https://stripe.com/docs/payments/build-a-two-step-confirmation?client=react

function App() {
const options = {
mode: 'payment',
amount: 1099,
currency: 'usd',
paymentMethodCreation: 'manual',
// Fully customizable with appearance API.
appearance: {/.../},
};

return (
<Elements stripe={stripePromise} options={options}>
<CheckoutForm />
</Elements>
);
};

Build a two-step confirmation experience

Add an optional review page or run validations after a user enters their payment details.

lone swallow May 11, 2023, 1:37 AM

#

Btw just booted up my XiaoMi and your site works for me

lime saddle May 11, 2023, 1:39 AM

#

Have you tried to click on Google pay button at the top? not the one below name on card input

#

If you click the black button, popup comes up at the end of instruction saying
‘Request failed unexpected developer error, please try again later.’

lone swallow May 11, 2023, 1:40 AM

#

Ah yes I do see that error

#

Okie going back to the code

#

function App() {
  const options = {
    mode: 'payment',
    amount: 1099,
    currency: 'usd',
    paymentMethodCreation: 'manual',
    // Fully customizable with appearance API.
    appearance: {/.../},
  };

Why is there mode payment and amount and currency here? On the Doc I only see options includes the clientSecret

lime saddle May 11, 2023, 1:42 AM

#

this code was copied and pasted from your doc tho...

lone swallow May 11, 2023, 1:42 AM

#

This is what I currently see ...

Screenshot_2023-05-11_at_10.42.34_AM.png

#

Anyway, setting this wallet option in React may be a bit tricky, one moment

#

Ok so wallet is an option for PaymentElement. Could you specify options=... here?

Screenshot_2023-05-11_at_10.44.26_AM.png

lime saddle May 11, 2023, 1:47 AM

#

okay, let me try!

#

Yep I think that worked, thank you!
Any update on the Google payment error so far?

lone swallow May 11, 2023, 1:58 AM

#

Um that's really generic error. Do you capture any other error message so far? Are you using a correct Publishable key?

lime saddle May 11, 2023, 2:02 AM

#

I know, I do not see any other error besides Timed out waiting for a PaymentResponse.complete() call. which I am not 100% sure if that is related to anything.

From frontend, I am passing test publishable key only, but this connected account is created with live mode key. Apple pay still works with exactly same condition but not with Google pay.

lone swallow May 11, 2023, 2:04 AM

#

This is what I get from remote debugging. Do you see the same thing with Safari?

Screenshot_2023-05-11_at_11.03.54_AM.png

#

I mean Safari/ApplePay

lime saddle May 11, 2023, 2:09 AM

#

From safari I dont see the error of 'Empty total label...' nor 'unable to download payment...'

#

but other than that, its all the same

lone swallow May 11, 2023, 2:15 AM

#

Btw what is this GooglePay button? I see another GooglePay tab below and it's our PaymentElement GooglePay

#

Hmm why are there 2 different GooglePay options

lime saddle May 11, 2023, 2:28 AM

#

Right, we want to only use back google pay button which is generated with PaymentRequestButtonElement and not from PaymentElement in the bottom part. (hence that is why I wanted to remove the wallet option from Payment Element)

lone swallow May 11, 2023, 2:28 AM

#

Um okie I think that button is the Payment Request Button. And the GooglePay option from PaymentElement works fine, so it's an issue with PaymentRequestButton then

lime saddle May 11, 2023, 2:29 AM

#

Yes I believe so

lone swallow May 11, 2023, 2:37 AM

#

lime saddle May 11, 2023, 2:38 AM

#

It is using test publishable key...

lone swallow May 11, 2023, 2:39 AM

#

Sorry the code I am seeing is obfuscated. Could you paste here the code related to Payment Request Button?

lime saddle May 11, 2023, 2:44 AM

#

Parent component:
const stripeObject = loadStripe(process.env.REACT_APP_STRIPE_PUBLISHABLE_KEY, {
stripeAccount: retailerData.stripeAccount
}); // getting stripe object for wallet payment
if (stripeObject) {
setStripeWalletPromise(stripeObject);
}

function StripeElements({ stripeWalletPromise, children }: any) {
if (!stripeWalletPromise) {
return children;
}

// pass stripe object to Element and wrap checkout component so checkout component can access stripe object with useStripe() method
return <Elements stripe={stripeWalletPromise}>{children}</Elements>;

}

{stripeWalletPromise && (
<Route
path="/order/checkout"
element={
<StripeElements stripeWalletPromise={stripeWalletPromise}>
<Checkout cartInfo={carts} updateCart={updateCart} updateUserHistory={updateUserHistory} />
</StripeElements>
}
/>
)}

#

Child component:
// wallet payment
const stripe = useStripe();
const [paymentRequest, setPaymentRequest] = useState<PaymentRequest | null>(null);
const [paymentIntentObject, setPaymentIntentObject] = useState<PaymentIntentObject>();

useEffect(() => {
if (stripe && paymentIntentObject) {
const pr = stripe.paymentRequest({
country: 'AU',
currency: 'aud',
total: {
label: 'Cart total',
amount: paymentIntentObject.totalAmount
},
requestPayerName: true,
requestPayerEmail: true,
requestShipping: false
});
// Check the availability of the Payment Request API.
pr.canMakePayment().then((result) => {
if (result) {
console.log('result', result);
setPaymentRequest(pr);
}
});
console.log('paymentIntent', paymentIntentObject);
}
}, [stripe, paymentIntentObject]);

#

paymentRequest &&
stripe &&
paymentIntentObject &&
paymentRequest.on('paymentmethod', async (ev) => {
// Confirm the PaymentIntent without handling potential next actions (yet).
const { paymentIntent, error: confirmError } = await stripe.confirmCardPayment(
paymentIntentObject.paymentIntentClientSecret,
{ payment_method: ev.paymentMethod.id },
{ handleActions: false }
);
if (confirmError) {
// Report to the browser that the payment failed, prompting it to
// re-show the payment interface, or show an error message and close
// the payment interface.
ev.complete('fail');
console.log('confirmError', confirmError);
return;
} else {
ev.complete('success');
console.log('success');
if (paymentIntent.status === 'requires_action') {
const { error } = await stripe.confirmCardPayment(paymentIntentObject.paymentIntentClientSecret);

#

console.log('success - requires action');
if (error) {
// The payment failed -- ask your customer for a new payment method.
console.log(error);
} else {
// The payment has succeeded - version 1.
if (paymentIntent?.client_secret) {
const data = await getTransactionData(paymentIntent?.client_secret, 10, checkoutData);
if (data?.data) {
setWalletTransaction(parseTransactionDataToTransaction(data.data));
setPageIsLoading(false);
}
}
}
} else {
// The payment has succeeded - version 2.
console.log('success - normal');

      setPageIsLoading(true);

      if (paymentIntent?.client_secret) {
        const data = await getTransactionData(paymentIntent?.client_secret, 10, checkoutData);
        if (data?.data) {
          setWalletTransaction(parseTransactionDataToTransaction(data.data));
          setPageIsLoading(false);
        }
      }
    }
  }
});

#

Sorry I had to break down into small pieces as there is word limit

#

hope this helps

#

in the parent component, we are also passing stripeAccount Id of the connected account as well as publishable key

lone swallow May 11, 2023, 2:52 AM

#

const stripeObject =  loadStripe(process.env.REACT_APP_STRIPE_PUBLISHABLE_KEY, {
    stripeAccount: retailerData.stripeAccount
}); // getting stripe object for wallet payment
if (stripeObject) {
    setStripeWalletPromise(stripeObject);
}

then later

return <Elements stripe={stripeWalletPromise}>{children}</Elements>;

#

Well while it looks pretty similar to our Doc here, could you try the exactly same code from our Doc, that is passing the promise directly after loadStripe into the Elements?

Screenshot_2023-05-11_at_11.52.43_AM.png

lime saddle May 11, 2023, 2:59 AM

#

Did you want me to remove the stripeAccount header too?

#

Sorry if I remove the stripeAccount from code it doesnt work

#

I tried the same way as the doc but same error...

lone swallow May 11, 2023, 3:06 AM

#

Hmm that's really weird

lime saddle May 11, 2023, 3:09 AM

#

I know 🥲

lone swallow May 11, 2023, 3:11 AM

#

Have you updated to your live site?

#

Any chance you can make the site uses an un-obfuscated version of js code?

lime saddle May 11, 2023, 3:18 AM

#

mm I think it would take really long time to make the site un-obfuscated. We recon that because the connected account is made in live mode, for production, as long as we are passing live key from frontend, it should work but I don't like to take a risk on production

#

Google pay does work for the TEST connected account but not Live connected account

lone swallow May 11, 2023, 3:22 AM

#

Connected Account made in Test mode, using a Platform Test Publishable Key + Stripe Account header -> working
Connected Account made in Live mode, using a Platform Test Publishable Key + Stripe Account header -> not working
And you are supposing
Connected Account made in Live mode, using a Platform Live Publishable Key + Stripe Account header -> should be working

lime saddle May 11, 2023, 3:23 AM

#

Yes that is our guess at the moment

lone swallow May 11, 2023, 3:25 AM

#

I see and that makes sense. I would need time to reproduce the 2nd line but it sounds like expected behavior

#

You have confirmed the 1st line, correct? That using a Test mode connected account it works fine for you

lime saddle May 11, 2023, 3:26 AM

#

yes 1st like is working for us 👍

lone swallow May 11, 2023, 3:45 AM

#

Hi, I just tested and can confirm both the behaviors. It's expected.

Screenshot_2023-05-11_at_12.39.45_PM.png

#

I also tested 3rd line (Live mode account and Live key and it works!)

#

So I would encourage you do a same but with a minimal amount and some testing-purpose Live Express Connected Account

knotty socketBOT May 11, 2023, 4:00 AM

#

#reikoBooop