brofessional_unexpected

[feral mango]

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.

• brofessional_best-practices, 4 days ago, 19 messages

[balmy axle]

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

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

[chilly oracle]

Hi there!

[deep vector]

Hello!

[chilly oracle]

Just to be clear, when you're on a live domain, are you creating PaymentIntents or SetupIntents with your own code or are these objects being created by a third party?

[deep vector]

This is our own code.

[chilly oracle]

If you're using a PaymentIntent's client_secret to render the PaymentElement, can you share the PaymentIntent ID?

[deep vector]

Before we get into that, can you first tell me if it's expected behavior for the PaymentElement to appear different locally than on a live website?

And/Or when using test mode...

[chilly oracle]

It shouldn't as long as long as the PaymentElement is being rendered in the same way with the same account. For example, if you're first creating a PaymentIntent (with either dynamic payment methods or by listing payment_method_types), the PaymentElement should appear the same

[deep vector]

Got it. Let me add my dev here (he's offline now) but I can see if I can dig into the code a bit.

@primal gulch

There's a lot going on... but here's what I dug up:

/**
 * External dependencies
 */
import { Elements, PaymentElement } from '@stripe/react-stripe-js';

/**
 * Internal dependencies
 */

import CheckoutHandler from '../CheckoutHandler';

/**
 * Payment method component.
 *
 * @since x.x.x
 *
 * @param {Object} props Component props.
 * @return {JSX.Element} Component.
 * @class
 */
const StripePaymentMethod = ( props ) => {
    const { eventRegistration, emitResponse, billing, stripePromise } = props;
    const { cartTotal, currency } = billing;

    const stripeElementOptions = {
        mode: 'payment',
        amount: cartTotal.value,
        currency: currency.code.toLowerCase(),
        paymentMethodCreation: 'manual',
    };

    return (
        <Elements stripe={ stripePromise } options={ stripeElementOptions }>
            <PaymentElement />
            <CheckoutHandler
                eventRegistration={ eventRegistration }
                emitResponse={ emitResponse }
                billing={ billing }
            />
        </Elements>
    );
};

/**
 * Payment gateway.
 *
 * @param {Object} props Checkout data.
 * @since x.x.x
 *
 * @return {JSX.Element} Component.
 * @class
 */
const Gateway = ( props ) => {
    const { billing, eventRegistration, emitResponse, stripePromise } = props;

    return (
        <StripePaymentMethod
            billing={ billing }
            eventRegistration={ eventRegistration }
            emitResponse={ emitResponse }
            stripePromise={ stripePromise }
        />
    );
};

export default Gateway;

[chilly oracle]

I see, okay. You're using the deferred intent flow, which means you're rendering the PaymentElement prior to creating a PaymentIntent

Since you're not passing paymentMethodTypes in stripeElementOptions, we're pulling the payment methods that are enabled in your Dashboard to render the PaymentElement

[chilly oracle]

It is possible to have different enabled/disabled PaymentMethods between test mode and live mode

[deep vector]

That makes sense, but I'm not seeing them rendering:

Live / Test mode payment methods:

Maybe I have to add my "Payment method domain" ?

[quasi cobalt]

If you're expecting to see Apple Pay and Google Pay, then yes, you'll need to register your Payment method domain

[deep vector]

Hmm, OK. But it sounds like there should not be any difference in UI between local and live environments? @primal gulch please catch up on this thread when you get online.

[quasi cobalt]

yep, there shouldn't be any difference in UI. If you can share your public site (for both test and livemode), along with the test login credentials (if any), we can take a look too

[deep vector]

Ok, thanks! I'll review and get back here if we have any further questions. 🙂

[quasi cobalt]

👍 this thread will be closed in a while if there's no further activity. You can ask a question again and refer back to this thread too by pasting the URL if necessary

[deep vector]

Ok, after some testing I figured out what we're doing wrong.