#kt_custom-checkout-react
teal wharfBOT
👋 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/1428064083571245076
📝 Have more to share? Add more details, code, screenshots, videos, etc. below.
Below are links to other discussions we've had with you in the past week in case you want to review that information. If your question is related to one of these previous discussions, please provide a comprehensive summary of the current state and what you need help with now. We help many users simultaneously, so a summary allows us to resolve your issue as soon as possible.
- kt_unexpected, 6 days ago, 4 messages
next gazelle
Sorry, got shut down by the character limit so my grammar isn't amazing 😅
Some additional things I've tried related to amount showing up as $0:
- We were using the
ExpressCheckoutElementfrom@stripe/react-stripe-jsbut I saw in one of the quick start guides that the import was coming from@stripe/react-stripe-js/checkoutwhich has different element options, so I tried that as well but that doesn't seem like the right idea since those element options don't have billing/shippingAddressRequired - I tried to pass lineItems to the express checkout element as described here but that didn't work and I don't think I'm supposed to have to do that with checkout sessions
Other things related to tax amount not being calculated when amount is updated via elements.update()
- I added a manual action to update the customers address on the express checkout shipping address change event which did successfully update the customers address in the checkout session when I picked a new shipping address in the google pay modal, but it didn't update the tax amount
hollow ravine
Do you have a Request ID you can share so I can take a look at what's being received on our end?
teal wharfBOT
main moat
Hi there,
taking over for my colleague who had to step away. Let me quickly catch up
teal wharfBOT
main moat
Are you following any guide from our docs to implement express checkout?
next gazelle
main moat
Thank you. And where exactly do you see the $0?
Sorry for all the questions, I just want to make sure I understand correctly what you are looking at. When I look at the request you shared I can see that you are passing in a line item with a price and the Stripe API returns a checkout session with amount_total: 1995.
next gazelle
no worries, the $0 is in the modal that pops up from google, with apple it says something like amount not yet determined
so it seems like something isn't getting passed from the checkout session to the express checkout element
and then vice versa, unless I listen to that shippingAddressUpdated event on the express checkout element and explicitly call checkout.updateAddress(), the checkout session doesn't get updated with any info from the google pay modal
but I'm not sure if that second one is something I would see in the checkout session immediately or if I'd have to wait until fully submitting payment? although I would expect that if a customer lands on checkout, clicks google pay & their billing or shipping address is taxable, the amount that displays in the google pay modal would automatically update to reflect the amount + tax - is that what should be happening?
main moat
Do you mean it should show the tax based on the billing address the customer has set up in their own wallet?
next gazelle
yeah exactly
main moat
This is how it should work, but (and this is a big but) we are depending on what Google is providing us with address data. In many cases the billing address/shipping address is redacted and can't be uses for tax calculations. So we need to rely either on the customer object that may contain an address or the address element that you can implement with the express checkout.
next gazelle
ah okay good to know, we'll just stick with only showing express options after we have a valid address. so then the remaining question is why isn't the total in the checkout session showing up in google/apple pay
main moat
Can I get your code snippet for creating the checkout session?
next gazelle
these are the options we're passing server side:
var sessionOptions = new SessionCreateOptions
{
UiMode = "custom",
Mode = "subscription",
LineItems = new List<SessionLineItemOptions>
{
new SessionLineItemOptions
{
Price = request.PriceId,
Quantity = 1
}
},
Customer = request.Customer,
AutomaticTax = new SessionAutomaticTaxOptions
{
Enabled = true
},
BillingAddressCollection = "required",
CustomerUpdate = new SessionCustomerUpdateOptions
{
Address = "auto"
},
SubscriptionData = new SessionSubscriptionDataOptions
{
Metadata = request.Metadata,
BillingMode = new SessionSubscriptionDataBillingModeOptions
{
Type = "classic"
}
},
ReturnUrl = // url
};
and then this is in the front end:
{(checkoutState.type === 'success' &&
<ExpressCheckoutElement
className="pb-4"
onReady={() => {
setIsExpressCheckoutReady(true);
}}
onConfirm={(async (e) => {await handlePurchase(purchaseConfirmed);})}
options={expressCheckoutElementOptions}
/>
)}
with these options:
layout: { overflow: "never" },
paymentMethods: {
applePay: "always",
googlePay: "always",
link: "auto",
amazonPay: "never",
},
billingAddressRequired: true,
shippingAddressRequired: true
talking to my colleagues about this
Can you calrify what you are passing in as expressCheckoutElementOptions?
next gazelle
that's that last block of code I sent
main moat
Oh ok. I see.
teal wharfBOT
ocean jay
Do you have a public test page where I can see this behavior for myself? In our tests the proper amount is just showing up without elements.update being required
next gazelle
unfortunately we don't, not sure how helpful it would be but I could send along a screen recording?
ocean jay
We get what is happening overall, trying to think of what else could be helpful to debug here
Are you using free trials at all? That would be expected to show $0 in that case because $0 is expected upfront
next gazelle
nope, no trials and no discounts
here it is anyway in case it's helpful 🤷♀️ I'm logging checkoutState.checkout where checkoutState = useCheckout();
oh, actually this might be related - checkoutState.checkout.canConfirm is false even though everything seems to be ready to go? so maybe that has to be true for the info to be properly sent to google/apple. just throwing things at the wall
ocean jay
Interesting. What object did expanded the log for?
next gazelle
sorry, what are you asking?
that object is checkoutState.checkout and checkoutState comes from const checkoutState = useCheckout();
ocean jay
gotcha, still trying to reproduce. Can you copy-paste that cs_test_ ID from the object that it prints out so I can more closely replicate what is happening there? I know you already sent an example but it can help to have multiple
next gazelle
yup, "cs_test_a1z3tAnH4AlZoZBjGzKyOlj5h2Vz59wUzAntBL2ZXUa05v5VIwxKvfYzQy"
teal wharfBOT
next gazelle
welcome 👋 and no, aside from getting rid of the shipping details section in the modal
lyric ether
Okay let's pare down everything here. Can you remove passing in any options to Express Checkout Element and server side let's remove auto tax and billing address collection
lyric ether
Can you show me your full code?
next gazelle
server side:
var sessionOptions = new SessionCreateOptions
{
UiMode = "custom",
Mode = "subscription",
LineItems = new List<SessionLineItemOptions>
{
new SessionLineItemOptions
{
Price = request.PriceId,
Quantity = 1
},
Customer = request.Customer,
// AutomaticTax = new SessionAutomaticTaxOptions
// {
// Enabled = true
// },
// BillingAddressCollection = "required",
CustomerUpdate = new SessionCustomerUpdateOptions
{
Address = "auto"
},
SubscriptionData = new SessionSubscriptionDataOptions
{
Metadata = request.Metadata,
BillingMode = new SessionSubscriptionDataBillingModeOptions
{
Type = "classic"
}
},
ReturnUrl = <checkout url>
};
var session = await _stripeProvider.CreateCheckoutSession(sessionOptions);
return new CreateCheckoutSessionResponse(session.ClientSecret);
front end main app component has this:
const stripePromise = loadStripe(process?.env?.StripePublishableKey);
const clientSecret = createCheckoutSession({
<request options>,
token: authToken!!,
rollbar
}).then((response) => response.data!.clientSecret);
<CheckoutProvider options={{ clientSecret }} stripe={stripePromise}>
...
our checkout form component is wrapped in elements:
<Elements options={options} stripe={stripePromise}>
and then within the CheckoutForm component we have the ExpressCheckout element I sent earlier
lyric ether
Ah... hmmm... what are you passing to options for Elements here?
Hmm okay did some testing with that myself and doesn't seem like that should matter....
Can you show me how you are importing your Elements?
Are you importing from @stripe/react-stripe-js/checkout
It'd likely be easier here if you would share the full files
Can you just share the full frontend files/components?
next gazelle
omg I figured it out! we were originally importing from @stripe/react-stripe-js and I had tested with importing from @stripe/react-stripe-js/checkout but didn't see a difference, but then with the import from @stripe/react-stripe-js/checkout I moved the express checkout element above the <Elements> wrapper and I see the amount in the modal now
lyric ether
Aha!
next gazelle
thank you guys so much for all of your time! I know this isn't an easy one to debug especially without being able to see the code but you pointed me in the right direction when you asked what options I'm passing to Elements so thanks for that
lyric ether
Happy you figured it out!
teal wharfBOT
teal wharfBOT