#mykhaelo_code
frozen crowBOT
👋 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/1420425711726100571
📝 Have more to share? Add more details, code, screenshots, videos, etc. below.
pastel plinth
Question 3. I am getting Type Script error "Property confirmPayByBankPayment does not exist on type Stripe. " for code return stripeClient.confirmPayByBankPayment(clientSecret, { payment_method: paymentMethodUserData.id ? paymentMethodUserData.id : paymentMethodUserData.billingDetails, return_url: paymentMethodUserData.redirectLink, })
Looks like confirmPayByBankPayment is not present on the stripe.d.ts
"@stripe/stripe-js": "^7.9.0",
sullen raptor
Hm are you using Payment Element? If so, confirmPayment is the universal confirm call you should be using for all payment methods in the payment element
pastel plinth
I am creating widget with the stripeClient.elements({
locale: I18n.locale,
...(params ? params : {}),
})
I have only one payment method per element
sullen raptor
What do you mean by that
pastel plinth
I mean I pass only paymentMethodTypes: [PAYMENT_FORMS.payByBank]
`getStripeElementOptions = (): StripeElementsOptionsMode => ({
mode: 'payment',
...this.getCurrencyAndAmount(),
})
getPayByBankStripeElementPayload = (): StripeElementsOptionsMode => ({
...this.getStripeElementOptions(),
paymentMethodTypes: [PAYMENT_FORMS.payByBank],
})
export const createStripeElements = (
stripeClient?: {
elements: (localeObj: { locale: string }) => object
},
params?: StripeElementsOptionsMode | { clientSecret: string } | StripeMessageParams
): object | void => {
if (stripeClient) {
return stripeClient.elements({
locale: I18n.locale,
...(params ? params : {}),
})
}
}`
payload = getPayByBankStripeElementPayload()
stripeElements.current = createStripeElements(stripeClient.current, payload)
export const createStripePayByBank = ( stripeElements?: { create: (type: string, style: object) => object }, options? ) => { if (stripeElements) { return stripeElements.create('payment', options) } }
`if (setStripeElements) {
setStripeElements(stripeElements.current)
}
stripePayByBank.current = createStripePayByBank(stripeElements.current)
if (stripePayByBank.current) {
stripePayByBank.current.mount(`#${PAY_BY_BANK_ROOT_ID}`)
stripePayByBank.current.on('ready', () => {
setPayByBankLoading(false)
})
stripePayByBank.current.on('loaderror', ({ error: { message } }) => {
if (message) {
setPayByBankError(message)
setPayByBankLoading(false)
}
})`|
Yeah ok so that's still payment element
Yeah don't call confirmPayByBankPayment
Call confirmPayment
That's what should be used with payment element and all payment method types
How can I validate the payByBank payment element to check if the user has selected a bank?
I dont' think we throw an event for this
You can check https://docs.stripe.com/js/element/events/on_change?type=paymentElement but I'm pretty sure it doesn't surface this
And you can pass default billing details to initialize the payment element with: https://docs.stripe.com/js/elements_object/create_payment_element#payment_element_create-options-defaultValues-billingDetails
pastel plinth
How can I validate the payByBank payment element to check if the user has selected a bank?
Do you plan to add validation? I think it is needed after last widget update, when the bank selection was moved to the widget from the redirected page
Why we need confirmPayByBankPayment method at all? https://docs.stripe.com/js/payment_intents/confirm_pay_by_bank_payment?
sullen raptor
That's if you're not using the payment element
Why do you need validation? What are you trying to do?
pastel plinth
User can click 'pay button' without selected bank on the paybybank widget, I am not sure what will happened next, will it work or not.
My last implementation was working well in the sandbox but was not working in production.
sullen raptor
User can click 'pay button' without selected bank on the paybybank widget, I am not sure what will happened next, will it work or not.
What happens when they click the button without selecting bank? I'd expect it to just validate automatically similar to how the card form validates if you dont complete it
frozen crowBOT
pastel plinth
it redirects forward to sandbox authorize payment page
sullen raptor
Can you share a screenshot?
So the issue is just that you don't know what it'll do in live mode because the test mode behavior is confusing?
pastel plinth
you can try it here, select the Germany on the checkout form
All is paid, a bank was not selected
merry drum
Hi there, I'm taking over from my colleague. I need to catch up on this thread.
pastel plinth
Hi, sure
merry drum
I'm seeing the following error when I click on Order Now for Bank Wire. Pay by Bank is not an option.
pastel plinth
to see the Pay by bank you must to select the Germany on the counyrty dropdown and fill other data
merry drum
Got it. I see the flow.
pastel plinth
As you see you could be redirected with or without selected bank inside the paybybank widget, and sandbox allows to process the payment
merry drum
Yep, and you want to be sure that's not the case in production?
merry drum
Looking into it now.
Can you share the part of the code where you're conifrming payment?
pastel plinth
export const handlePayByBankTransaction = ( stripeClient: Stripe, paymentMethodUserData: { redirectLink: string; id?: string; billingDetails?: object }, clientSecret?: string ): HandleStripe => { if (stripeClient && clientSecret) { return stripeClient.confirmPayByBankPayment(clientSecret, { payment_method: paymentMethodUserData.id ? paymentMethodUserData.id : paymentMethodUserData.billingDetails || {}, return_url: paymentMethodUserData.redirectLink, }) } }
vestal crescent
👋 looking at this with @merry drum and not seeing an obvious difference between your code and mine but yours is really complex and all minified.
Any chance you can do a really simple example that just loads PaymentElement on the page and nothing else with a hardcoded PaymentIntent client_secret?
Right now there's so much going on with your form logic that I can't make sense of the code and which part calls confirmPayment() in that specific case.
Ah wait you aren't using PaymentElement right?
I see you call confirmPayByBankPayment() specifically and not confirmPayment()
pastel plinth
Yes, I am using confirmPayByBankPayment()
If I am using it wrong, why it goes well on the sandobx?
vestal crescent
Okay so it's ignoring PaymentElement in that case and expects you to have your own UI
Sorry I think our docs just ignore the "normal" way of just using PaymentElement and either show you Checkout or "build your own advanced integration" ugh
Try swapping your code by calling confirmPayment() instead like this: const response = await stripe.confirmPayment({ elements: yourPaymentElementInstance, // confirmParams: { return_url: paymentMethodUserData.redirectLink, }, });
pastel plinth
I am confirming payment after I created order. Even If I will use confirmPayment, it will be nice to check if a bank was selected before it. FOr example as I have for the sepa
const { error: submitError } = await stripeElement.submit() if (submitError) { handleSepaError(submitError) return }
vestal crescent
sure sure but I want to confirm you get a clear error on confirm
then I'll show you what you also missed
pastel plinth
will try to use confirmPayment
vestal crescent
To answer your real question, you want to listen to the change event: https://docs.stripe.com/js/element/events/on_change?type=paymentElement
This tells you when the information inside the element is "ready" and allows you to disable your submit button until then for example
You can see events like {"elementType":"payment","collapsed":false,"empty":true,"complete":false,"value":{"type":"pay_by_bank","billingDetails":{"address":{"country":"US"}}}} on render for example and {"elementType":"payment","collapsed":false,"empty":false,"complete":true,"value":{"type":"pay_by_bank","billingDetails":{"address":{"country":"US"}}}} after the bank is chosen, it has complete: true
pastel plinth
Thankyou all. Will try to do it tomorrow
vestal crescent
sounds good