#zero_paymentelement-code
hearty briarBOT
👋 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/1242970409842901004
📝 Have more to share? Add more details, code, screenshots, videos, etc. below.
stuck iris
@warm moth I'm sorry but I don't really understand the question. Can you provide detailed information about your exact code, the exact error and what's not working?
faint quarry
e.preventDefault();
if (!stripe || !elements) {
return;
}
setIsLoading(true);
elements.submit();
stripe.createPaymentMethod({
elements,
params: {
billing_details: {
name: 'Jenny Rosen',
},
}
}).then((result) => {
}
});
i can explain more details to you
<form id="payment-form" onSubmit={handleSubmit}>
<PaymentElement id="payment-element" />
<button disabled={isLoading || !stripe || !elements} id="submit">
<span id="button-text">
{isLoading ? <div className="spinner" id="spinner"></div> : "Pay now"}
</span>
</button>
{/* Show any error or success messages */}
{message && <div id="payment-message">{message}</div>}
</form>
I use PaymentElement to take payment, in the element, it supports card payment and google pay and other payment method.
when i use card payment, type in card number, and cvc, then submit, it works well.
however, when i select google pay, and click submit button, it will prompt a window let me to decide which payment account to use. at that time, i see the error message in console.
Uncaught DOMException: Failed to execute 'postMessage' on 'Window': Delegation is not allowed without transient user activation
message
:
"Something went wrong. Unable to show Google Pay. Please choose a different payment method and try again."
type
:
"invalid_request_error"
after some investigation, i realized that when user click confirm button in google pay popup window, the element will be updated with card number and other information. otherwise, it doesnt have any valid information
stuck iris
wait you're going too fast and mixing things up
You choose GooglePay, the user clicks the button, your code then has to call tripe.createPaymentMethod() inside that click handler. You can't call this in a future/async callback
faint quarry
i see. but at that time, google pay doesnt give any information to element untill user select an account and confirm.
stuck iris
yeah but that's not really relevant/important really. You create the PaymentMethod, we show the UI, the customer picks the one they want and then it creates the PaymentMethod for you, there is nothing more to it
faint quarry
but if the user doesnt choose an account, when create payment method using google pay, it will not create payment method properly. and for card payment, it doesnt have such issue.
faint quarry
question about stripe.createPaymentMethod(elements), since google pay is supported in elements, does it mean createPaymentMethod was supposed to support google pay?
stuck iris
yes. It's not just "supposed" it, works, it has worked since the day we launched, there's no issue or bug with this feature
faint quarry
okay, thats good it support it. based on the code, is there anything wrong with it? currently it works well with card payment
stuck iris
I don't know, I don't really get your code, nor the error right now. I'm really I'm trying to grasp all you said but I really don't get it
I wonder if the issue is that you
- don't handle any error at all
- don't use await
const {error: submitError} = await elements.submit();
if (submitError) {
console.log("Got an error: ", JSON.stringify(submitError));
return;
}
// Create the PaymentMethod using the details collected by the Payment Element
const {error, paymentMethod} = await stripe.createPaymentMethod({
elements,
params: {
billing_details: {
name: 'lol lol',
email: 'lol@lol.com',
address: {
line1: 'line 1',
line2: 'line 2',
city: 'City',
postal_code: '90210',
state: 'CA',
country: 'US',
},
},
},
});```that's what my code looks like for example, so maybe that's the issue?
faint quarry
well, i handle the error, sorry that i removed some code that i dont think is relevant. inside the then block, i do check result.error, i have put a console.log there, thats why i can see what the error message is.
const handleSubmit = async (e) => {
e.preventDefault();
if (!stripe || !elements) {
return;
}
setIsLoading(true);
elements.submit();
stripe.createPaymentMethod({
elements,
params: {
billing_details: {
name: 'Jenny Rosen',
},
}
}).then((result) => {
if (result.error) {
console.log('payment method error: ', result);
} else {
console.log('payment method result: ', result);
stripe.idempotencyKey = idempotencyKey;
stripe.idempotencyKeyRequiresAction = idempotencyKeyRequiresAction;
StripePaymentActions.submitPayment(
result.paymentMethod,
props.buttonAmount,
props.invoice_id,
props.redirect_uri,
stripe
).catch((errorMsg) => {
setIdempotencyKey(uuidv4());
setIdempotencyKeyRequiresAction(uuidv4());
AppActions.error(errorMsg);
});
}
});
you still don't have an await and error handling on elements.submit() though
faint quarry
yeah, thats true, so i will add it there to see how it works
stuck iris
👍
faint quarry
thank you for your time today. i will update you if it works. hopefully i can bring good news 😆
jaunty dawnBOT