oftysterista_api

[warm trout]

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

📝 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.

• oftysterista_api, 17 hours ago, 33 messages
• oftysterista_best-practices, 19 hours ago, 25 messages
• oftysterista_api, 22 hours ago, 15 messages

[undone cargo]

how to achieve a user to change their payment method for a subscription?

can you help me with the flow?

[dense wadi]

Hi! Looking into this.

Hi! As long as you have collected the payment method and it's attached to the customer, you can use the default_payment_method parameter [0] to update the subscription's payment method.

[0] https://docs.stripe.com/api/subscriptions/update#update_subscription-default_payment_method

[undone cargo]

so the flow is wee need to add the payment method first right?

i have done it with create a setup intent

then what is the flow for the user select the payment method? should i manually get all of the paynment method for the user then let the user choose then hit the update subscription api?

[dense wadi]

How are you collecting the payment method from the customer?

[undone cargo]

first when the user create a subscription

i return the client secret subscription.latest_invoice.payment_intent.client_secret;

then the user will make their first payment

now i have a requirement that allow user to change their payment method

to achive it we can change the default_payment_method in the subscription object right?

to get the new payment method from the customer we can create a new setup intent for the customer right?

[dense wadi]

You can use this to collect and save the new payment method from your customer: https://docs.stripe.com/payments/save-and-reuse

Then you can use this to save the payment method for the subscription: https://docs.stripe.com/api/subscriptions/update#update_subscription-default_payment_method

[undone cargo]

yeah i did it

the second step is save the payment method for the subscription right?

[dense wadi]

Yes

[undone cargo]

when save the payment method. how the user select the payment they want to choose?

should i retrive all the payment method for the customer first? and let them choose?

or is there any other best practice?

[dense wadi]

Sorry I am a little lost. You mentioned you have already collected the specific payment method correct?

Is this 1 or multiple payment method that you are collecting?

[undone cargo]

actually it's only 1

so what u mean is after collecting the payment method we directly update the subscription?

[dense wadi]

Yes

[undone cargo]

can i show you a liitle bit about my code?

actually i did the same thing from the docs you give https://docs.stripe.com/payments/save-and-reuse

import React, {useState} from 'react';
import {useStripe, useElements, PaymentElement} from '@stripe/react-stripe-js';

const SetupForm = () => {
const stripe = useStripe();
const elements = useElements();

const [errorMessage, setErrorMessage] = useState(null);

const handleSubmit = async (event) => {
// We don't want to let default form submission happen here,
// which would refresh the page.
event.preventDefault();

if (!stripe || !elements) {
  // Stripe.js hasn't yet loaded.
  // Make sure to disable form submission until Stripe.js has loaded.
  return null;
}

const {error} = await stripe.confirmSetup({
  //`Elements` instance that was used to create the Payment Element
  elements,
  confirmParams: {
    return_url: 'https://example.com/account/payments/setup-complete',
  },
});

if (error) {
  // This point will only be reached if there is an immediate error when
  // confirming the payment. Show error to your customer (for example, payment
  // details incomplete)
  setErrorMessage(error.message);
} else {
  // Your customer will be redirected to your `return_url`. For some payment
  // methods like iDEAL, your customer will be redirected to an intermediate
  // site first to authorize the payment, then redirected to the `return_url`.
}

};

return (
<form onSubmit={handleSubmit}>
<PaymentElement />
<button disabled={!stripe}>Submit</button>
{/* Show error message to your customers */}
{errorMessage && <div>{errorMessage}</div>}
</form>
)
};

export default SetupForm;

this is the SetupForm i did in the client side

the handle submit is collecting the user payment method right? so after collecting i need to hit an api to update the payment method in subscription?

[dense wadi]

Yes, and it confirms the SetupIntent and attaches the payment method to the customer.

After that, once you have the payment method, you can update your subscription

[undone cargo]

how to update the subscription? can i run a funtion if the submit form success? is there something like on success? cause when it success it redirect my page

[cloud folio]

👋 No you would want to listen to the setup_intent.succeeded webhook event, and set the Subscription's default_payment_method from there

from backend

separated from this UI

[undone cargo]

so ohh i see

[undone cargo]

if that so is there possible if a customer have multiple subscription they cannot have different paymentmethod for different subs?

[cloud folio]

Why? They can totally have different payment method for different subs

[undone cargo]

the user can have multiple subscription

is that not a best practice?

[undone cargo]

if i create multiple subs the user need to insert a Card again right? or they no need because already have a payment method before?

i think if no needed it would be more simple

so every subs only use 1 payment method

[cloud folio]

The customer can have multiple Subs. Each sub can use the same payment method, or different. It's totally up to you

Each sub will use 1 payment method

[undone cargo]

okayy let say the user already have a payment method for the first subs he made

now he want to create a new subs. how can i use the same existing PM? so he no need to input a card number again?

const subscription = (await this.stripeClient.subscriptions.create({
customer: stripeCustomer.customerId,
items: [
{
price: prices.data[0].id,
},
],
payment_behavior: 'default_incomplete',
expand: ['latest_invoice.payment_intent'],
payment_settings: {
save_default_payment_method: 'on_subscription',
},
})

this is the code i create the subs

[cloud folio]

On the Customer, set its invoice_settings.default_payment_method, then any new Sub will automatically fall back to that

https://docs.stripe.com/api/subscriptions/object#subscription_object-default_payment_method

ID of the default payment method for the subscription. It must belong to the customer associated with the subscription. This takes precedence over default_source. If neither are set, invoices will use the customer’s invoice_settings.default_payment_method or default_source.

So Subscription's default_payment_method > Subscription's default_source > customer's invoice_settings.default_payment_method > customer's default_source

[undone cargo]

can u help me with the code?

[cloud folio]

Use the Update Customer API first

This: https://docs.stripe.com/api/customers/update#update_customer-invoice_settings-default_payment_method

Something like this

const customer = await stripe.customers.update(
  'cus_xxx',
  {
    invoice_settings: {
      default_payment_method: 'pm_xxx',
    },
  }
);

[undone cargo]

okay then?

what happend if the customer already have default payment method?

[cloud folio]

Then the new Sub will automatically use it

[undone cargo]

really?

to create a new subs i just need do it like this?

[cloud folio]

Yes just create a new Sub

You can use Billing Clocks to test it

[undone cargo]

await this.stripeClient.subscriptions.create({
customer: stripeCustomer.customerId,
items: [
{
price: prices.data[0].id,
},
],
payment_behavior: 'default_incomplete',
expand: ['latest_invoice.payment_intent'],
payment_settings: {
save_default_payment_method: 'on_subscription',
},

})) as Stripe.Subscription & {
  latest_invoice: Stripe.Invoice & {
    payment_intent: Stripe.PaymentIntent;
  };
}

[cloud folio]

Yeah check the first Invoice's PaymentIntent there, see if it is attempted automatically

[undone cargo]

let me check it

the payment intent is incomplete

it is the subscription object created. is there something wrong?

is that because of
payment_behavior: 'default_incomplete',
i set this?

[cloud folio]

looking

Ah yes, can you try allow_incomplete ?

[undone cargo]

i just remove the options
payment_behavior: 'default_incomplete',

and the subscription automatically set to active now

so bassicly if i already set the default paymentmethod for the customer, when i create a new subs for him the subs will active immediately

so i don't need to pass subscription.latest_invoice.payment_intent.client_secret;(the client secret) to the client anymore?

[cloud folio]

Yes because it use the customer's default payment method and charge immediately

not passing the option = use the default value allow_incomplete

default_incomplete is for when you want to control/select the payment method

[undone cargo]

i see, okay but what if the payment method failed?

the subs will also active?

is there any test card to test?

I found this one is that correct?

[undone cargo]

okay i tested it and i think it is work