#neatz_code
fathom hearthBOT
👋 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/1369407843102621787
📝 Have more to share? Add more details, code, screenshots, videos, etc. below.
midnight vine
Yes, here is the payment element:
<form onSubmit={handleSubmit} style={{ width: "100%" }}>
<Stack p="sm" gap="sm">
<PaymentElement
options={{
layout: {
type: "tabs",
defaultCollapsed: false,
},
paymentMethodOrder: [
"apple_pay",
"google_pay",
"card",
"cashapp_pay",
],
applePay: {
recurringPaymentRequest: {
paymentDescription: "BP Pro Subscription",
managementURL: `https://breakingpoint.gg/profile/${session?.userProfile?.id}`,
regularBilling: {
amount: planData.price * 100,
label: "Monthly subscription fee",
recurringPaymentIntervalUnit:
plan === "monthly" ? "month" : "year",
recurringPaymentIntervalCount: 0,
},
},
},
}}
/>
<Button
fullWidth
size="md"
variant="light"
color="#e6e089"
type="submit"
loading={isLoading}
disabled={!stripe || !elements}
>
Subscribe for ${planData.price}
</Button>
</Stack>
</form>
and my form submission handler
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
if (!stripe || !elements) {
return;
}
setIsLoading(true);
try {
const { error } = await elements.submit();
if (error) {
console.error(error);
throw error;
}
const { error: submitError, paymentIntent } = await stripe.confirmPayment(
{
elements,
redirect: "if_required",
confirmParams: {
return_url: window.location.href,
},
}
);
if (submitError) {
console.error(submitError);
throw submitError;
}
if (paymentIntent.status === "succeeded") {
// Show success notification
showNotification({
color: "#a04bfe",
autoClose: 5000,
message: "Successfully subscribed to BP Pro!",
title: (
<Flex align="center" gap="xs">
<Image
src="/BP PRO Gold A.png"
alt="BP Pro Badge"
width={110}
height={32}
/>
<span>Subscription Activated</span>
</Flex>
),
});
// Call onSuccess to update UI state
onSuccess();
} else {
throw new Error("Payment failed. Please try again.");
}
} catch (error) {
const errorMessage =
error instanceof Error
? error.message
: (error as StripeError)?.message || "An unexpected error occurred";
showNotification({
color: "red",
autoClose: 5000,
message: errorMessage,
title: "Error",
});
} finally {
setIsLoading(false);
}
};
woven rampart
Okay and where exactly do you see the error you referenced?
midnight vine
Cards, google pay, amazon pay, and cashapp all work fine for reference
the error is thrown from await stripe.confirmPayment
woven rampart
What does your Payment Element look like when this happens?
Can you show me a screenshot?
midnight vine
Thanks for the help
if its useful i can share the serverside code which initiates the payment and generates the client secret
woven rampart
Nah that shouldn't really matter
Odd.... my Payment Element displays with Card selected first even if Apple Pay is first in the order...
I'd guess that is why you are hitting the validation error. Just to check on something, if you select Card and then switch back to Apple Pay do you get the same error or it works?
midnight vine
Let me try
midnight vine
👀
woven rampart
Okay yeah seems like a pretty clear bug
No idea why that'd be the case, but I'll file a ticket internally about this so we can get it fixed up.
midnight vine
Awesome, thanks for your help, it does make me feel better that I wasn't missing something super obvious lmao
woven rampart
haha yeah totally fair. I'm sure this was quite confusing.
midnight vine
Do you think its worthwhile trying some oldest versions? I can try now
woven rampart
You can try but what you are doing is quite unique given that you are ordering Apple Pay first and on mobile
So it is possible this has been longstanding for a while and no one has hit it
midnight vine
Ah interesting, so if card is first does it work fine?
woven rampart
Yep
midnight vine
from your testing
woven rampart
Err I haven't tested this second
But plenty of testing in the past with card first
midnight vine
fair, ill give it a shot and see if that works for now
woven rampart
Sounds good
midnight vine
hmm im not having any luck still, although with better logging i realized the "Please fill in your card details" is coming from await elements.submit();
fathom hearthBOT
woven rampart
Oh wow hmm yeah I do get the same error when putting card first. Okay that's quite a bit worse.
Let me look at this a bit more
Ah interesting
If you remove your applePay hash does it work?
woven rampart
applePay: {
recurringPaymentRequest: {
paymentDescription: "BP Pro Subscription",
managementURL: `https://breakingpoint.gg/profile/${session?.userProfile?.id}`,
regularBilling: {
amount: planData.price * 100,
label: "Monthly subscription fee",
recurringPaymentIntervalUnit:
plan === "monthly" ? "month" : "year",
recurringPaymentIntervalCount: 0,
},
},
Comment that out
For a test
Yeah
Okay yeah that seems to be the bug for me -- the order doesn't actually matter.
woven rampart
Oooh okay I think your issue is actually recurringPaymentIntervalCount
It appears we don't like that being set to 0
If I set that to 1 it also works
midnight vine
ahhhh, that definitely works
woven rampart
Yay
midnight vine
Awesome, thanks for all the help, never had any support that fast 😄