#day0_code
candid kestrelBOT
👋 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/1463130423365206070
📝 Have more to share? Add more details, code, screenshots, videos, etc. below.
mellow forge
hey there 👋 can you share an example PaymentIntent ID (pi_xxx) where you experienced this?
also, you mentioned:
From what I can see, it looks like the payment is trying to be processed instantly but we don't have the full delivery address object from the onShippingAddressChange method
can you clarify what indicates that this is the reason for the error?
swift jolt
Hi there, I dont think we are actually getting to the point of having a PaymentIntent ID
mellow forge
Ah yes sorry the Express Checkout Element uses the deferred intent flow
In that case, can you clarify where you're seeing the processing state?
swift jolt
So when we click on the Apple Pay button we get the Apple Pay payment modal
We are stuck on Processing till it changes to Payment Not Completed
We try to get the users address in order to set it as the delivery address but we only get the city, country, postal_code and state
Not sure if this is was is causing us to get stuck in Processing
Able to see the shipping address from the onShippingAddressChange, this is called immediately you click the button from what I can see
mellow forge
thanks for these details - I'll just need a few minutes to review and investigate
could you share your full elements.create code for the Express Checkout Element?
swift jolt
We dont use .create
rugged arch
Stepping in here to assist. @swift jolt can you share the code you use in the onConfirm event handler?
swift jolt
<Elements stripe={stripePromise} options={elementsOptions}>
<ElementsConsumer>
{({stripe, elements}: {stripe: any, elements: any}) => {
....
}}
</ElementsConsumer>
</Elements>
async handlePayment(event: StripeExpressCheckoutElementConfirmEvent){
const {elements, stripe, applePay, googlePay} = this.props
const customerDetails: any = {
first_name: Name.getFirstName(event.shippingAddress?.name || null),
last_name: Name.getLastName(event.shippingAddress?.name || null),
email: event.billingDetails?.email,
phone: event.billingDetails?.phone,
}
this.props.updateCustomer(customerDetails)
const {error: submitError} = await elements.submit();
setTimeout(async () => {
if(event.shippingAddress){
const address = this.parseShippingAddress(event.shippingAddress?.name, event.shippingAddress?.address)
this.props.updateShippingAddress(address)
}
if (submitError) {
Notify.error(submitError)
return;
}
const {paymentMethod} = await stripe.createPaymentMethod({
elements,
params: {
billing_details: event.billingDetails
}
});
if(!["google_pay", "apple_pay"].includes(event.expressPaymentType)){
Notify.error("Unsupported payment method, please use a different payment method")
return
}
const pm = event.expressPaymentType == "apple_pay" ? applePay : googlePay
if(!pm){
Notify.error("Invalid payment method, please use a different payment method")
return
}
this.props.onPay(pm, {
payment_method_id: paymentMethod.id
}, this.props.expressCheckout)
}, 50)
}
rugged arch
Is handlePayment ever invoked when you click the 'pay' button inside the Apple Pay dialog?
Don't see you passing it to the ExpressCheckoutElement component in your original message? e.g. onConfirm={handlePayment}
swift jolt
At the moment, we are unable to actually reach the pay button, the moment the dialog is opened, we are stuck with processing then Payment Not Completed then the dialog closes itself
<ExpressCheckoutElement
onConfirm={async (event) => this.handlePayment(event)}
options={{
emailRequired: true,
phoneNumberRequired: true,
shippingAddressRequired: true,
// shippingRates: [],
paymentMethods: {
link: "never",
applePay: "always",
googlePay: "always",
paypal: "never",
// @ts-expect-error klarna not in typescript def
klarna: "never",
},
paymentMethodTypes: ['card'],
paymentMethodOrder: ['apple_pay', 'google_pay'],
layout: {maxColumns: 2, maxRows: 2},
}}
onShippingAddressChange={(event) => this.handleShippingAddressChange(event)}
onShippingRateChange={(event) => this.handleShippingRateChange(event)}
onClick={event => this.handleOnClick(event)}
/>
rugged arch
What does handleOnClick look like? That's the event/fn that is invoked when the dialog immediately opens
swift jolt
async handleOnClick(event: StripeExpressCheckoutElementClickEvent){
const {checkout, order, cost} = this.props;
const selectedPaymentMethod = event.expressPaymentType === "apple_pay" ? this.props.applePay : this.props.googlePay
const additionalFeeAmount= PaymentMethods.getAdditionalFee(
checkout,
selectedPaymentMethod,
cost?.totalAmount?.amount
)
let shippingFeeAmount = General.clone(order.shipping_method?.estimatedCost?.amount) || "0.00"
if(checkout?.additional_fee === "shipping"){
shippingFeeAmount = (parseFloat(shippingFeeAmount) + additionalFeeAmount).toFixed(2);
}
this.setState({
paymentMethod: selectedPaymentMethod
})
const lineItems = this.updateElementDetails(
this.props.checkout,
(parseFloat(shippingFeeAmount) * 100),
selectedPaymentMethod,
)
event.resolve({
lineItems
})
}
rugged arch
Anything in there that could be silently failing? Can you add some logging to see if lineItems is the shape required?
swift jolt
nothing is failing there, the lineItems are shaped correctly
[{name: "Subtotal", amount: 78595}, {name: "Shipping", amount: 200}, {name: "Handling & Packaging", amount: 4440}]
It displays correctly as well
rugged arch
And to confirm, the 'processing' spinner here appears before there's any interaction? Any browser errors/logs in the browser?
swift jolt
Exactly, before any interaction
rugged arch
Is anything in the function an API/network call? I wonder if some of your code in handleOnClick handler is taking too long to respond and it's timing out:
You must call this function within 1 second if you handle the click event.
Can you just try hardcoding lineItems?
candid kestrelBOT
swift jolt
I will try hardcode it now, 2 secs
With the lineItems hardcoded, still stuck Processing then Payment Not Completed