#lavkesh-agrawal_error
thorn fernBOT
đ 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/1267442494950477827
đ Have more to share? Add more details, code, screenshots, videos, etc. below.
hardy mantle
Can you link me to the docs for the integration you're using?
Also, is there a URL where I can reproduce the issue
hardy mantle
How do I get to the payment page?
rugged falcon
Sorry , here you can https://unsubby.vercel.app/en-us/cancel-planet-fitness
hardy mantle
I don't see an Express Checkout Element on that page, just the Payment Element
rugged falcon
Yes we followed this mainly https://docs.stripe.com/payments/accept-a-payment-deferred?platform=web
hardy mantle
OK, I see Apple Pay in Safari. Do you?
hardy mantle
I want to first understand the actual issue?
rugged falcon
You will see error message -
Something went wrong. Can not show Apply Pay. Choose a different payment method and try again.
hardy mantle
Something went wrong. Can not show Apply Pay. Choose a different payment method and try again.
When/where do you see this error?
rugged falcon
When you select Apply pay and click on cancel Planet Fitness
hardy mantle
OK, I see that too. I also see this in the console when I click cancel:
Unhandled Promise Rejection: [object Object]
So I'd recommend debugging that. Can you share your click handler code for the button?
rugged falcon
static async createPaymentIntent(params) {
return stripe.paymentIntents.create({
amount: params.amount,
currency: 'usd',
customer: params.customerId,
description : params.description,
setup_future_usage: "off_session",
payment_method_configuration: 'pmc_*******al1LbW42',
metadata: params.metadata
});
}
We are creating payment intent on backend API and doing confirm payment intent in frontent -
Backend API -
hardy mantle
Yeah that's all fine. I'm interested in the front-end code where you call confirmPayment
rugged falcon
But I don't see any in-complete payment in stripe dashbaard transactions, could you see if api return success in network - api/upayment
const { error } = await stripe.confirmPayment({
elements,
clientSecret: secret,
confirmParams: {
return_url: ${WebsiteUrl}/${countryCode}/my-unsubby/subscription-success,
},
});
hardy mantle
Can you share the full code for the button submit handler? What you describe would suggest there's an error somewhere
hardy mantle
Looks like that's an API call that your integration is making directly to implement hCaptcha? Nothing to do with Stripe
thorn fernBOT
rugged falcon
okay , here is complete cod of submit handler -
useEffect(() => {
const handlePaymentIntent = async (event) => {
try {
const formData = event.detail;
console.log('Received data:', formData);
if (!stripe || !elements) {
return;
}
setNetworkCall(true); // Set loading state
const { error: submitError } = await elements.submit();
if (submitError) {
handleError(submitError);
throw submitError;
}
// Perform your network call (e.g., using Axios or fetch)
const result = await post(formData.url, formData);
// Assuming `result.data` contains the response from your server
console.log(result.data);
const { secret, order_id} = result.data; // Adjust as per your API response structure
const { error } = await stripe.confirmPayment({
elements,
clientSecret: secret,
confirmParams: {
return_url: `${from == "MY-UNSUBBY"? `${WebsiteUrl}/${countryCode}/my-unsubby/subscription-success?code=${formData?.id}` : `${WebsiteUrl}/${countryCode}/order/${order_id}`}`,
},
});
if (error) {
console.log(error, "error---------------")
throw error;
} else {
// Handle successful payment confirmation
console.log("Payment confirmed successfully!");
}
} catch (error) {
setErrorMessage(error.message);
} finally {
setNetworkCall(false); // Reset loading state
}
};
// Listen for custom event to receive data from parent component
document.addEventListener('create-payment-intent', handlePaymentIntent);
// Clean up event listener on component unmount
return () => {
document.removeEventListener('create-payment-intent', handlePaymentIntent);
};
}, [stripe, elements, setNetworkCall]);
hardy mantle
const result = await post(formData.url, formData);```Where's the full backend code for this endpoint? Something there is failing
rugged falcon
I don't thing issue is there , other API is working fine. Also no error log in that fn
const axiosApi = axios.create({
baseURL: API_URL,
headers: {
"Content-Type": "application/json",
"X-XXXXXX": XXXXXX
},
});
return axiosApi.post(url, data,createConfig(token));
sweet shuttle
What is this call doing?
rugged falcon
creating payment intent at backend
sweet shuttle
Hm, this indeed looks like a bug. I would suggest you to reach out to Stripe Support and report it. My engineering team will then suggest the best solution.
sweet shuttle
Sure
rugged falcon
When select google pay , amount is not correct
It should be 14.95 USD but showing diff
sweet shuttle
How are you specifying the amount?
rugged falcon
And in stripe dash it is showing correct in txn
For other payment method it is showing correct
let amount=(props.amount100)
amount =Math.round(amount * 100)
console.log(amount)
const options = {
mode: 'payment',
currency: 'usd',
amount:amount,
payment_method_configuration: 'pmc_1************,
appearance: {
theme: 'stripe',
},
setup_future_usage:"off_session"
};
sweet shuttle
Hmm, I see that as well. Not sure, are you using some other, non-latest version of Payment Elements?
It seems odd that there's both issues with Apple Pay and Google Pay
sweet shuttle
Happy to help.