alxizr

[primal jackal]

Hi there!

What is your question?

[placid warren]

hi soma

thank you for your help

2 days ago i spoke to toby

he was helping me with rendering wallets in our react application

long story short

i am now able to make it show

we did several things that eventually enabled google pay to show

but the issue is not over yet

at the moment i am able to create and render Payment Element only for single payment

but it does not work for subscriptions

i am wondering if you can help me out with it

[primal jackal]

What do you mean by "but it does not work for subscriptions"? Do you get an error message? If so, which one?

[placid warren]

my question are how can i make the payment element to work with subscriptions / recurring payments ? can the payment element support subscriptions ?

Payment Element only accepts payment intent

which is for one time payment

[primal jackal]

can the payment element support subscriptions ?
Yes, it works! You just need to pass the client_secret that belongs to the PaymentIntent that's in the first invoice of the subscription.

[placid warren]

well, it does not work

so i am trying to figure it out

[primal jackal]

How to create subscriptions with the Payment Element is covered here: https://stripe.com/docs/billing/subscriptions/build-subscriptions?ui=elements

[placid warren]

ok, give me a second and i will look at this link

[primal jackal]

well, it does not work
Again, can you clarify what "does not work" means? What's the error message you see?

[placid warren]

the Elements component crashes

and it spits out code 500 error

nothing else

[primal jackal]

I would need the exact error message you see in the browser console. But anyway, I recommend you to read the link I shared above.

[placid warren]

i created 4 products in the stripe dashboard and set them all up for subscriptions

when i tried to create the payment intent

then everything begun crashing

[placid warren]

ok, thanks. give me couple of minutes to see what is there and i will write back. this is the same guide i looked at to beginwith

[placid warren]

@primal jackal listen, the code in this example already exists in my project, but this is not utilizing the Payment Element, but a custom html how i see fit

i am asking specifically about the Payment Element

[primal jackal]

This link I shared is using the Payment Element:

Like I said earlier, I can help you if you share the exact error you see in your browser console.

[placid warren]

i am using react

this code does not apply

give me a minute

i will amend it to react

[normal loom]

really we just need to see some specific error message

if it helps you can look at https://stripe.com/docs/payments/accept-a-payment?platform=web&ui=elements&client=react#web-collect-payment-details for React examples, it's overall the same frontend code (the only thing different for Subscriptions is the PaymentIntent comes from the Invoice instead of being created directly)

[placid warren]

no problems

give me couple of minutes

and i will refactor the code a bit

and i will show the error

[placid warren]

@normal loom @primal jackal hey guys

i need help please

listen

it makes no sense at all

i went through the guide over and over

and its the same issue all over again

the Payment Element must be wrapped inside a Elements provider

but to enable the Elements provider, i need it to create a payment intent and set the client secret on it

payment intent is meant for one time charge

and not for subscriptions

the thing is

[primal jackal]

the Payment Element must be wrapped inside a Elements provider
but to enable the Elements provider, i need it to create a payment intent and set the client secret on it
Yes that's correct

[placid warren]

but this is wrong for subscriptions

because the subscription itself has its own payment intent

[primal jackal]

When you create a subscription, it will have a Invoice. And in the Invoice there is a PaymentIntent. And you can use the client secret of that PaymentIntent in the Payment Element to start the subscription.

[placid warren]

yes

but you cannot set it, this client secret on the wrapping parent which is the Elements provider

[primal jackal]

So what you should do:

1. Create the subscription on the backend
2. Retrieve the latest_invoice.payment_intent.client_sercret and send it to your forntend
3. The frontend in React use the Payment Element with the client_secret

[placid warren]

it does not work this way

[primal jackal]

but you cannot set it, this client secret on the wrapping parent which is the Elements provider
I don't understand the issue. You wait to retrieve the client secret, and then you mount the Elements provider

[placid warren]

i am explaining you that this is impossible

because the Elements provider is a wrapping component

and the only way to render its children is to have a client secret

from a payment intent

the children components are the ones that responsible in creating the customer subscription objects and return the payment intent and customer id for the Payment Element

[normal loom]

yep, so for example you use a useEffect in the component that mounts the <Elements> to call the backend and get the client secret. It's not impossible, this integration has been built by many people

[placid warren]

this is the issue

[placid warren]

so you are saying essentially that every time that i need to render this page, i should create a subscription object beforehand and pass it down for the payment element to show

?

[normal loom]

yep it won't work if you do that way, so you need to re-organise the logic so the Customer/Subscription is set up when the page loads. Or not use the PaymentElement and use the CardElement instead, that's also a option

[normal loom]

yes!

[placid warren]

what ??? this sounds wrong. it means that i will potentially over flood my API for false positive intents and that will over flood your API

this can't be right

[normal loom]

that is right and it's how it works

all the docs say this(the first step is creating the Customer/Subscription in the backend).
If nothing happens to the subscription for 24 hours, the subscription moves to the incomplete_expired status and is hidden, and the PaymentIntent is cancelled/Invoice is closed.

[placid warren]

ok

i understand

thanks

let me see how i make it work on my side with this new component structure