Why "clientSecret is not a recognized parameter" in stripe

user_1634084 0
Viewed 854

Im confused. The Stripe Docs to integrate stripe elements in react said here:

const options = {
// passing the client secret obtained from the server
  clientSecret: '{{CLIENT_SECRET}}',
};

return (
  <Elements stripe={stripePromise} options={options}>
    <CheckoutForm />
  </Elements>
);

clientSecret in my Case -> 'seti_someId_secret_anotherId' now im getting a warning: Unrecognized create() parameter: clientSecret is not a recognized parameter. This may cause issues with your integration in the future. Im not sure how to initialize the elements provider now.

Is this way, described in the docs deprecated? is there another new way? Im not able to bind the elements object to the current customer without this secret. Any Idea how to solve?

Thanks for your ideas, stay healthy.

Update: i tried to use another way. In my main App.js i deleted the options prop. Now i update the elements object in my component:

const CheckoutForm = () => {
  const stripe = useStripe();
  const elements = useElements();
  const appearance = {
      theme: 'dark'
  };

  useEffect(() => {
      if(elements) {
          //get secret key like seti_id_secret_id
          axios.post(`${host}/stripe-api/payment-method`)
          .then((res) => {
              elements.update({clientSecret : res.data.setupIntent})
          })
      }
  }, [elements])

  const handleSubmit = async (event) => {
      event.preventDefault();
      
      if (elements == null) {
          return;
      }

      const {error, paymentMethod} = await stripe.createPaymentMethod({
          type: 'card',
          card: elements.getElement(CardElement)
      });
    
  
      axios.post(`${host}/stripe-api/payment-method/attach`,paymentMethod)
      .then((res) => console.log(res))
      .catch((err) => console.log(err))
  };
  return (
      <form onSubmit={handleSubmit}>
          <CardElement />
          <button type="submit" disabled={!stripe || !elements}>
          Pay
          </button>
      </form>
  );
};
stripe-payments reactjs
1 Answers

After running into a similar issue (but with vue.js) I fond out that PaymentElement (using this method under the hood) is a wrapper, not only for the use of several payment methods but also for other options it uses, including clientSecret and appearance handling. When you create it, PaymentElement expects to receive these, but not CardElement you're using in your form, which will rise the alert you get when you create it.
In this part of the docs you can see that the same card component is being created by the method elements.create("card", { style: style }) yet the stripe.elements(options) (or stripe.elements().update(options) which correspond to your useElements().update()) didn't take any parameter.
I hope it makes sense because the whole react thing adds a layer of complexity, so let's sum up only focusing on the js library.
When adding options to an instance of element (with the .update() method or at creation time) a client secret is required (because it is the only elements type that will handle the other options), HOWEVER, and this is the tricky part, you do not need those options except when using payment elements. Card element, cardNumber element etc... will not deal with your secret at the start but at the end of the process.
See here in this js library version of what you're trying to do how the clientSecret is being added on submission with the confirmCardPayment method:

stripe.confirmCardPayment(clientSecret, { // here
    payment_method: {
      card: card,
      billing_details: {
        name: 'Jenny Rosen'
      }
    }
  })

I agree with you that both the docs and the specs are really unsettling and they should add a mention saying in which conditions you should provide those options (i.e. only on when calling PaymentElements next) and that other methods will have to deal with the client secret later on at submission time.

I can see that you wanted to use your CardElement with a Setup Intent's secret, that's what I wanted too. Unfortunately, if I understand well the docs, you cannot confirmSetup but with a PaymentElements instance. With CardElement the createPaymentMethod method is the only way forward to add new payment methods to a user. If that's what you intended to do.

user_140084470
Related