ing32_subscriptions-payment-element

[hollow beacon]

👋 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/1234541695497142352

📝 Have more to share? Add more details, code, screenshots, videos, etc. below.

[fervent drift]

First of all: I create a customer based on an UNIQUE id every time they get to my checkout page.
After creating the customer, I tried to create a subscription, and that's when I found out that my customer needs a payment method.

For this I created a setupIntent() using stripe API, and I confirm it like I did for my one time payments, on my checkout page (using conditional rendering)

[granite notch]

Hi 👋

You can save the customer's payment method after you create the Subscription, using the first Invoice and the attached Payment Intent.

You can also configure the Subscription to save the payment method as default once the first payment is successful.

If that would be useful in this case

[fervent drift]

hmm

so how would I create the first payment?

with the subscription

AFAIK I require a payment method id

[granite notch]

No you don't

You create the Subscription first. This generates an Invoice in the subscription.latest_invoice property. That invoice has a payment_intent

You can use the payment_intent.client_secret to render the Payment Element. When you confirm that Payment Intent it saves the payment method to the customer and sets it as default for the subscription

[fervent drift]

May I provide you with some code?

[granite notch]

You can see this integration, step by step, in our docs here: https://docs.stripe.com/billing/subscriptions/build-subscriptions?platform=web&ui=elements

[fervent drift]

The code I want to show you gives me the error that I need to have a payment method for that customer

[fervent drift]

Ty! I'll take a look

[granite notch]

It depends on how you create the Subscription. Can you share the exact error code you receive?

[fervent drift]

      const subscription = await stripe.subscriptions.create({
        customer: customerClient.id,
        items: [{ price: "abcd" }],
        payment_settings: {
          payment_method_options: {
            card: {
              request_three_d_secure: "any",
            },
          },
          payment_method_types: ["card"],
          save_default_payment_method: "on_subscription",
        },
        expand: ["latest_invoice.payment_intent"],
      });

This customer has no attached payment source or default payment method. Please consider adding a default payment method.

Sorry, had to do some modifications to reproduce this error

[granite notch]

Sorry I mean the exact error. The entire object.

Yeah, you should be using the payment_behavior="default_incomplete". Try that out and see if you get the same error

[fervent drift]

Ok it works now! I just have to fix the logic though right now

Let me check something

Ill be back in 2 mins

[granite notch]

Sure thing, take your time

[fervent drift]

Okay so what I tried to do (before this) was using stripe.setupIntents.create()

backend

        const setupIntent = await stripe.setupIntents.create({
          customer: customerClient.id,
          usage: "off_session", // Allow the payment method to be used later for off-session payments
        });

And with this I went ahead and returned the intent id so I can confirm it and let the user add it as a payment method on my frontend

frontend (on handleSubmit() button)

        const { error } = await stripe.confirmSetup({
          elements,
          confirmParams: {
            return_url: `${serverSettings.telegramWebappClient}/success`,
          },
        });

Before showing the PaymentElement to the user though, other code that checked if this is a subscription or an one-time payment, so that is where I called the backend code.

How should I structure my logic now? After this subscription is created

        const subscription = await stripe.subscriptions.create({
          customer: customerClient.id,
          items: [{ price: "abcd" }],
          payment_settings: {
            payment_method_options: {
              card: {
                request_three_d_secure: "any",
              },
            },
            payment_method_types: ["card"],
            save_default_payment_method: "on_subscription",
          },
          payment_behavior: "default_incomplete",
          expand: ["latest_invoice.payment_intent"],

What should my handleSubmit() confirm? Trying to do this with the current logic, I receive this error:

IntegrationError: Your code called confirmSetup() but you passed a client_secret associated with a PaymentIntent. Did you mean to call confirmPayment() instead?

I use confirmPayment() for my one-time payments too, would it be alright if I leave handleSubmit() only with confirmPayment() and no other "subscription" checks?

      const { error } = await stripe.confirmPayment({
        elements,
        confirmParams: {
          return_url: `${serverSettings.telegramWebappClient}/success`,
        },
      });

If yes, then how can I save the default payment method for that customer now? Because the payment intent for the subscription is created before introducing the card details, so I guess I should save it after the payment is confirmed, but how can I do that? Do I need to pass the customer_id to my frontend and back to backend after payment is successful?

[granite notch]

You would still use confirmPayment . You need to initialize the Payment Element with the client_secret from the first Invoice's Payment Intent.

You are already passing save_default_payment_method: "on_subscription", when you create the Subscription so this will save the Payment Method to the customer when they complete the payment.

[fervent drift]

Oh that's great

So when it looks like this it's basically already automated right?

[granite notch]

Yup. The customer is signed up, they have paid the first invoice, and the subscription will continue to automatically charge them using the saved payment method going forward

[fervent drift]

Great. thanks a lot snufkin

6 hours because I wasn't paying attention to that payment_behavior option in the docs

LOL

Do I have to close this thread now?

oh wait 1 more thing, is there any way I can check if a customer has an active subscription?

[granite notch]

1. I'll close the thread myself, don't worry about it.
2. You can use the Subscription List API https://docs.stripe.com/api/subscriptions/list and filter by customer and status to show only active subscriptions for a specific customer.

[fervent drift]

I see. Is that recommended for large amount of user activity on the website?

Should I go with a database and check through it?

[granite notch]

For a very large and active set of users, you might want to store locally. You could hit our API rate limits.

[fervent drift]

Alright!

Ty snufkin, once again.

You can close this thread now.

[granite notch]

Happy to help 🙂

It's why we're here.