#ihor-baklan_unexpected

1 messages · Page 1 of 1 (latest)

hearty bluffBOT
#

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

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

snow patrol
#

<PaymentElement
id="payment-element"
options={paymentElementOptions}
onChange={handlePaymentProviderChange}
onReady={() => {
setIsPaymentElementReady(true);
}}
/>

const handlePaymentProviderChange = (event: StripePaymentElementChangeEvent) => {
    if (isExpressPayment) return;
    setErrorMessage(null);
    setCheckoutStore({
        paymentElementPaymentProvider: event.value.type as PaymentElementMethods,
    });

    const selectedPaymentMethod = paymentProvidersMap[event.value.type as PaymentElementMethods];
    console.log("event",event);
    if (isPaymentElementReady && selectedPaymentMethod !== paymentProvider) {
        // ignore first PP autoselect on load
        addToDataLayer({
            event: "userInteraction",
            element_id: "non_express",
            event_name: "add_payment_info",
            payment_user_clicked_on: selectedPaymentMethod === STRIPE ? "stripe" : selectedPaymentMethod,
        });
    }
    if (event.value.type === PaymentElementCustomMethodIds.ACIMA || paymentProvider === ACIMA) {
        // recalculate taxes when switching to or from Acima
        setCheckoutRegion(shippingAddress);
    }
    if (isBillingStep) {
        setCheckoutStore({
            paymentProvider: paymentProvidersMap[event.value.type as PaymentElementMethods] as PaymentProvider,
        });
    }
};
image.png image.png
silver tinsel
#

👋 happy to help

#

we're looking at your question now, please give us a moment to go through the thread and we'll get back to you asap

plucky relic
#

hey @snow patrol 👋 can you confirm whether the onChange event fires at all when the Bank tab is clicked?

snow patrol
#

Hi, there is strange issue btw, if I switch between Card and Bank, there is not triggering of event, so to check it, I need to do Card -> something other(Paypal for example) -> Bank --- then I can trigger bank event
But if I do
Card -> Bank --- it doesnt trigger event

plucky relic
#

interesting, that sounds possibly unexpected

#

you mentioned the event doesn't trigger when switching from card to bank

what if you switch from card to bank, then type text in the name or email field? does the event fire for you then?

snow patrol
#

No it doesnt, it also trigger this event after completing (selecting success for example and completing Link form, after finish it trigger this but still with event value type card

image.png image.png
#

I use these default methods

image.png
#

I also tried to change
BANK = "link_card_brand",
to:
BANK = "us_bank_account",

But issue still same

plucky relic
#

sorry, can you explain what 'PaymentElementDefaultMethods' is being used for here?

snow patrol
#

actually thats not needed I think, thats used for ordering of payment methods, nvm about that object

plucky relic
#

no worries, I'm investigating some other details anyway!

#

hmm, I see in your code that your code returns early if isExpressPayment is true, before the console.log and before any state updates

so this could be what's making it seem as though the event isn't firing (indeed, it is firing as expected in my testing)

#

two things I'd like to check:

-what is isExpressPayment set to when the customer clicks the Bank tab? I'd recommend adding a log before the early return to check this

-how/when does isExpressPayment get set to false?

snow patrol
#

I see its always false, even if I remove it, it doesnt trigger handler

#

Oh I think I found issue with not triggering

#

I use these options:

const paymentElementOptions: StripePaymentElementOptions = {
    defaultValues: {
        billingDetails: {
            email: shippingAddress.email,
            name: shippingAddress.fullName,
            phone: shippingAddress.phone,
        },
    },
    ...(paymentElementMethodsOrder && { paymentMethodOrder: paymentElementMethodsOrder }),
    layout: {
        type: "accordion" as const,
        radios: true,
        spacedAccordionItems: true,
        defaultCollapsed: false,
        visibleAccordionItemsCount: 10,
    },
    fields: {
        billingDetails: {
            address: {
                country: "never",
                postalCode: "never",
            },
        },
    },
    wallets: {
        applePay: "never", // Hide Apple Pay
        googlePay: "never", // Hide Google Pay
    },
};
#

when I changed it to this:
const paymentElementOptions: StripePaymentElementOptions = {
defaultValues: {
billingDetails: {
email: shippingAddress.email,
name: shippingAddress.fullName,
phone: shippingAddress.phone,
},
},
};

It started firing event, but its still card value, let me share screen

#

I found that this causing not triggering bank
fields: {
billingDetails: {
address: {
country: "never",
postalCode: "never",
},
},
},

plucky relic
#

ahh so you're providing new options to the Payment Element when this happens?

that likely means that the <Elements> provider is re-rendering with the new options

when this happens, the new instance won't fire onChange for the initial selection. Instead, it resets

snow patrol
#

yes you are right, but anyway, root issue still exist, I removed options and still when selecting Bank it says its "card" event

#

the only way to differ it is billingDetails , but in my case I dont want to show country and postal code field, so there is no way to detect is it card or bank, cuz type is "card" both cases

image.png
#

when I select amazon for example, it works fine

image.png
plucky relic
#

so just to confirm, the event is now firing when you select "Bank", after removing the options, but the value has type=card?

did you remove all options, or just the address field configuration?

snow patrol
#

<PaymentElement
id="payment-element"
onChange={handlePaymentProviderChange}
/>

I removed it now to test, it trigger card -> bank now, , but it still "card" on bank method select

image.png
#

import { PaymentElement } from "@stripe/react-stripe-js";

#

"@stripe/react-stripe-js": "5.0.0",

plucky relic
#

is it possible for you to share a public URL where we can reproduce this?

snow patrol
#

yes I need few minutes to push it with console log

plucky relic
#

perfect, thank you

snow patrol
plucky relic
#

thanks! reviewing now

plucky relic
#

thanks for your patience - we've been able to reproduce and are still looking into this

#

ok it looks like this is possibly a side-effect some config/gating on your account related to Link, which is quite strange

we'll need to check internally with our product team about this, but we have enough details to confirm that it seems to be an issue on our side

#

I'll trigger a DM from the bot now so you can open a support case directly with our team - from there we can follow up with you over email

hearty bluffBOT
#

Hello @snow patrol, we have sent you a direct message, please check it at https://discord.com/channels/@me/1503380306009395292

  • 🔗The message has instructions on how to open a direct support case with our Developer Support team, in order to help you more effectively.
snow patrol
#

sorry I didnt get what should I do, should I create something?I see message from StripeBot

plucky relic
#

you can follow the instructions in the bot's message to create a support case with our team

snow patrol
#

when I open link from bot I see this

image.png
hearty bluffBOT
pine oxide
#

Hello
You can provide additional details in the assistant panel on the right

#

If you don't have any then you can submit the form as-is

snow patrol
#

I cant see my form, where should I submit it?

pine oxide