#yurtdweller_api
sharp tideBOT
👋 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/1429862332103659621
📝 Have more to share? Add more details, code, screenshots, videos, etc. below.
hallow herald
For example, I am doing this:
const elements = stripe.elements({
clientSecret: setupIntentClientSecret,
});
const paymentElement = elements.create('payment');
paymentElement.mount('#payment-element');
const addressElement = elements.create('address', {
mode: 'billing',
});
addressElement.mount('#address-element');
and i would like to have a Tax ID element as well
molten pasture
Hello 👋
The Tax ID Element (https://docs.stripe.com/elements/tax-id-element) is specifically configured to work with Stripe Checkout. There is not a way to implement this outside of Stripe Checkout currently.
hallow herald
so there is no way to mount it as an element on its own?
If I want to use it with a SetupElement for example
molten pasture
That is not available currently
hallow herald
Because we are allowing people to add their credit card during a trial with SetupIntent
molten pasture
Unfortunately, that isn't supported at this time
hallow herald
OK, if we want to allow people to optionally add their credit card during a trial, what is the way we should do this then?
molten pasture
Sorry I'm not understanding why you need the Tax ID element in this situation.
The Payment Element is sufficient by itself to collect payment method information
hallow herald
When the trial expires, the payment method will be used; but if a user wants to attribute it to a business, there is no way for them to input the tax id anywhere
molten pasture
If you want to offer that feature, you should use a Checkout Session with mode: setup to save the Payment Method to the Customer along with the Tax ID.
hallow herald
Here's the complete scenario:
Right now we want to allow people to sign up for a trial without entering any information besides an email address. So we send the email address to the backend, and create a new subscription using the API, and also return a setupIntent like so:
const subscription = await stripe.subscriptions.create({
customer: customer.id,
items: [{ price: priceId }],
metadata: {
application_id: APPLICATION_ID,
},
trial_period_days: 7,
trial_settings: {
end_behavior: {
missing_payment_method: 'pause',
},
},
payment_behavior: 'default_incomplete',
expand: ['pending_setup_intent'],
...taxParams,
});
On the next screen, we optionally allow them to enter their payment information using the payment element and address element before the trial is over, or skip adding that and continue to use the product.
I don't see a way to accomplish this flow with a checkout session?
molten pasture
You can, but it's more work
You would need to create a checkout session on your server in mode:setup and send that to your app when the user goes to the next screen.
On that next screen you would use the Checkout Session to create a Payment Element and Tax ID element. Then, when it succeeds, you would upate the Customer (or the Subscription) to use the saved Payment Method as the default.
hallow herald
ok, so I would use the Checkout Session secret instead of the subscription setup_intent to create a Payment Element and Tax ID element on the frotnend.
How do I save the checkout session on the frontend?
Right now I am using a listener on the form's submit button to call confirmSetup:
const { error } = await stripe.confirmSetup({
elements,
confirmParams: {
return_url: `${window.location.origin}/sign-up/success`,
},
});
You would follow our canonical guide for custom checkout here: https://docs.stripe.com/payments/accept-a-payment?platform=web&ui=embedded-components
hallow herald
Hmm reading through that guide, it seems like it's aimed for taking a payment right away..
Render a Pay button that calls confirm from the checkout instance to submit the payment.
This uses actions.confirm() to make a payment
Does actions.confirm() function differently if using mode:setup?
molten pasture
In that case the actions.confirm() function confirms the set up. This means we perform an auth check to validate the payment method and save it to the Customer.
hallow herald
OK, and if I add an address element and a Tax ID element, those will also be saved using actions.confirm()?
molten pasture
Correct.
An Address Element with mode: "billing" will save the Billing Address to the Payment Method that gets generated. An Address Element with mode: "shipping" will save the address to the Customer record.
hallow herald
If I want to capture the address for the purposes of tax collection on the subscriptions, would setting up the checkout session work like this?:
const session = await stripe.checkout.sessions.create({
customer: customerId,
metadata: {
application_id: APPLICATION_ID,
},
mode: 'setup',
automatic_tax: { enabled: true },
customer_update: {
address: 'auto',
},
billing_address_collection: 'required',
To reiterate, we are trying to save the payment details and address for later use, and ensure that tax collection works properly
molten pasture
I think that will collect all the necessary datat to ensure tax collection, yes.
hallow herald
OK, I will give this a try. Is there a way for me to re-open this case if I have more questions regarding this part of our implenatation?
molten pasture
We don't re-open threads once we've closed them but you can use this thread as a reference and you can always ask a new question the same way you did to start this thread.