#brain_code

1 messages ¡ Page 1 of 1 (latest)

sage breachBOT
#

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

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

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.

exotic depot
molten hollow
#

For some reason, Google Pay won't be shown within the ExpressCheckoutElement if I don't initialize the PaymentIntent / clientSecret

exotic depot
#

Can you share how you've set your Stripe Elements?

molten hollow
# 
const stripePromise = loadStripe(config.stripePublicKey);

// TipProvider.tsx
const TipProvider = ({
  children,
}: {
  children: React.ReactNode;
}) => {
  return (
    <Elements stripe={stripePromise}>
      {children}
    </Elements>
  );
};
  • took out the options= {{ clientSecret }} here
#

I am using both the ExpressCheckoutElement & the PaymentElement, I understood that they need to be wrapped in the Elements parent to be able to use the useElements() hook

exotic depot
#

Can you share your URL with me so I can debug this?

molten hollow
#

I'm probably doing something wrong initializing this.

#

Note that if you try to checkout it won't work, not making the paymentIntent at the end. Just wanted to verify that it's rendering correctly without passing in the clientSecret to the Elements component.

#

I am using both the ExpressCheckoutElement & the PaymentElement, I understood that they need to be wrapped in the Elements parent to be able to use the useElements() hook

Note: it's actually rendering without the clientSecret/paymentIntent, but it takes a very long time.

#

Seems that adding

options={{
  mode: "payment",
  amount: 1000,
  currency: "usd",
  }}

to the Elements component did the trick.

#

This is a requirement right? It doesn't render correctly without setting up the Elements options with the amount.

exotic depot
#

Yeap! I was deep the Network tab and after refresing it, it seemed to work and I looked here to confirm that you've changed something on your code.

molten hollow
#

Having an issue where the PaymentElements is taking very long to render the possible methods. This wasn't the case initially.
If you have a minute to validate, I'd be very grateful.
Here's everything in a nutshell:

const TipProvider = ({ children }: { children: React.ReactNode }) => {
  return (
    <Elements
      stripe={stripePromise}
      options={{
        mode: "payment",
        amount: 1000,
        currency: "usd",
      }}
    >
      {children}
    </Elements>
  );
};

Simplified just to illustrate that it's using the same Elements provider:

<TipProvider>
  <PaymentElement>
  <ExpressCheckoutElement>
</TipProvider>
#

Also, now the PaymentElement does not display Google Pay.

#

Does the PaymentElement component require a PaymentIntent/Client Secret to exist beforehand?

exotic depot
molten hollow
#

Yup, that's exactly what I did (https://docs.stripe.com/payments/accept-a-payment-deferred) - why is it taking so long to render the payment options?
Is this something to expect?
When I used to initialize <Elements [...]> with the clientSecret in the options prop, it used to render way faster.
Now, it might take upwards 10 seconds to display possible payment methods.
It also does not display Google Pay.

Collect payment details before creating an Intent

Build an integration where you can render the Payment Element prior to creating a PaymentIntent or SetupIntent.

exotic depot
#

I think that load timing is expected. Testing these on my end to confirm. Hang tight

#

Yeah, I can confirm that the timing is normal. On your page and on my test environment, it does not take 10 seconds. Rather, I see ~5 seconds.

molten hollow
#

Alright, sounds good.

#

Thank you for your time!

#

Have a great weekend.

exotic depot
#

I can also confirm that when Payment Element and Express Checkout Element are mounted together and when wallet payment methods are available, Apple Pay and Google Pay will only displayed in Express Checkout Element.