#mattsulima
tulip pollen
inland pollen
Sure, you'd just create the Subscription as normal and then add a one-time line item to the initial Invoice before it's finalised
tawdry pecan
Erm not sure I understand
Sometimes (if checkbox not checked) we can't create subscription
And If there's a subscription I think I need to create it before displaying payment element?
Currently I am testing separately single payments and subscription and subscription form is a bit different, e.g. contains "By providing your card information, you allow XXX to charge your card for future payments in accordance with their terms."
So in other words I need:
- create and display payment element + checkbox
- user fills payment element + optionally checkx checkbox
- user clicks "make payment"
- if checkbox not checked -> single payment
- if checkbox checked - > create subscription
inland pollen
As you know, the default integration for the Payment Element requires you have client secret from either a Payment or Setup Intent before you can render it so you'd need to create either:
- Payment Intent before render.
- Subscription before render, and use associated PI from initial Invoice.
There is a new path which allow you to collect payment details before creating the intent: https://stripe.com/docs/payments/accept-a-payment-deferred
Which should work for your use case
tawdry pecan
Thanks, well in my case it's always payment intent, not setup intent
inland pollen
Right, but you can use mode: 'subscription' too: https://stripe.com/docs/payments/accept-a-payment-deferred?type=payment#additional-options
Then you can create your Subscription as required, then once the invoice.created event fires you can add the one-time line item for the 'one off' payment you describe
That will only be charged on that initial Invoice
tawdry pecan
- Subscription before render, and use associated PI from initial Invoice. -> exactly, that's my problem 🙂 When i am testing subscription and single payments separately I am creating subscription first, subscription returns payment intent client secret and I am using it to display payment form.
For setup intent I could make setup intent and then apply it to subscription later
But link above looks promising, thanks I'll check it
(title at least )
inland pollen
* Subscription before render, and use associated PI from initial Invoice. -> exa...
The link I shared above makes this requirement redundant. You can render the Payment Element without any client_secret
tawdry pecan
yeah link you shared looks perfect for my needs, I am surprised I didn't notice it
inland pollen
It's very new (last week)
tawdry pecan
ah, that's great, I started this task in December/January, now I came back to it
Okay, I have another question if you don't mind
inland pollen
sure
tawdry pecan
checkout.js -> there's mode: 'subsription' or model: 'payment'
It looks I need to change the mode if user checks the checkbox or uncehcks it
Is it possible?
I have rendered the payment element, user filled the details, then checks "i want subscription", I need to change mode but keep all details user already filled
inland pollen
Ok, I'm confused. You're referencing Checkout and also Payment Element. Which are you using?
tawdry pecan
see checkhout.js, below "Then, create an instance of the Payment Element and mount it to the container DOM node."
There's "const options = {
mode: 'payment',"
inland pollen
Ah, sorry. Thought you meant Checkout
tawdry pecan
I need to change mode at runtime. By default it's payment but when checkbox is checked then we need subscription mode 🙂
inland pollen
Yeah I guess you'd use a variable that's bound to the value of your checkbox with a ternary operator or something:
mode: isRecurring? 'subscription' : 'payment'
(I've no idea how/if this works, not used it yet)
tawdry pecan
exactly, above would work but I need to update mode later
So I have:
const options = {
mode: 'payment',
...}
form is visible
then I need something like
stripe.elements.changeMode('subsciption')
So by default I need 'payment' mode, but I'd love to see a way to change this mode anytime later
inland pollen
Ah, so it's immutable? Let me see
tawdry pecan
Not sure it's immutable, I want to confirm I can do it, but I feel I can't
inland pollen
Ok, seems you can call elements.update({mode}): https://stripe.com/docs/js/elements_object/update#elements_update-options-mode
So I guess you'd have some onchange handler for your checkbox that calls that function