tobibe

[valid dawn]

hello! what specific payment detail are you trying to update?

[molten narwhal]

card details

[valid dawn]

yep, but which specific bit of the card details? card expiry?

[molten narwhal]

all card details number, exp, cvc

[valid dawn]

you'll want to create a new SetupIntent

[molten narwhal]

ok although when i do i keep encountering this error when tring to load the payment element:
v3:1 Uncaught IntegrationError: In order to create a payment element, you must pass a clientSecret or mode when creating the Elements group.

I'm passing both mode and clientsecret

[valid dawn]

can you share your code snippet?

[molten narwhal]

which part in particular?

[valid dawn]

how you're implementing the Payment Element

[molten narwhal]

const handleClick = async (e) => {
if (!stripe || !elements) {
console.log("stripe not loaded");
return;
}

const paymentElement = elements.getElement(PaymentElement);

if (!paymentElement) {
  console.log("no payment element");
  return;
}

try {
  setProcessing(true);

  const { error, setupIntent } = await stripe.confirmSetup(clientSecret, {
    elements,
    confirmParams: {
      payment_method_data: {
        billing_details: {
          name: learnerName,
          email: learnerEmail,
        },
      },
    },

    redirect: "if_required",
  });

  if (setupIntent && setupIntent.payment_method) {
    setPaymentMethodId(setupIntent.payment_method);
    console.log("payment method id", setupIntent.payment_method);

    fetch(`/payment-method/${setupIntent.payment_method}`)
      .then((response) => response.json())
      .then((data) => {
        console.log("data", data);
        setLast4(data.card.last4);
        setPaymentSucceeded(true);
      });
  } else if (error.code === "setup_intent_authentication_failure") {
    setError(
      "We are unable to authenticate your payment method. Please choose a different pay"
    );
  } else {
    setError(
      "Your card has been declined. Please check your card details."
    );
  }
} catch (error) {
  setError("An error occurred. Please try again.");
} finally {
  setProcessing(false);
}

};

and then just returning my payment element

    <PaymentElement />

the new clinetSecret I'm passing to that component like so:

    <Elements stripe={stripePromise} options={stripeOptions}>
      <CardForm
        mode="update"
        customerId={customerId}
        clientSecret={setupIntentClientSecret}
      />
    </Elements>

although It's not being used currently

[valid dawn]

i assume CardForm is the React component that returns the Payment Element

what are you passing in for stripeOptions here?

        <Elements stripe={stripePromise} options={stripeOptions}>
          <CardForm
            mode="update"
            customerId={customerId}
            clientSecret={setupIntentClientSecret}
          />
        </Elements>

[molten narwhal]

correct

[valid dawn]

what are you passing in for stripeOptions?

[molten narwhal]

nothing at the moment

I did trty the client secret based of some sample code i saw in the docs:
<Elements stripe={stripePromise} options={{ clientSecret, }}>

[valid dawn]

if you're not following a deferred Intent flow, the Payment Element expects to have a clientSecret passed into options. If you follow the deferred Intent flow, you need to pass in the mode into options

i'll suggest taking a look at this quickstart guide : https://stripe.com/docs/payments/quickstart?lang=node - it's for PaymentIntents, but the core logic is the same and it just requires a little work to change it to use SetupIntents instead

If you want to use the deferred Intent flow, you can take a look at https://stripe.com/docs/payments/accept-a-payment-deferred?platform=web&type=setup

[molten narwhal]

I'm passing the setupIntent and mode in the options but still receiving the same error

[valid dawn]

which flow are you using - are you using the deferred or non-deferred flow?

[molten narwhal]

custom

deferred

[valid dawn]

if you're using the deferred flow then you shouldn't be passing in the clientSecret. It's either or, not both

[molten narwhal]

hmm then I think I should be using non deferred

[valid dawn]

i suggest following the sample : https://stripe.com/docs/payments/quickstart?lang=node closely then