smc-elements-setupintent | Stripe Developers | Page 1

eager solstice Jan 20, 2022, 10:29 PM

#

can you give a bit more details? Can you share your exact code?

green lintel Jan 20, 2022, 10:29 PM

#

of course, one moment...

#

here's my server code- essentially taken from the example: ```
app.post("/payments/intents/setup_intents", async (req, res) => {
// Create a SetupIntent with the order amount and currency

const setupIntent = await stripe.setupIntents.create({
payment_method_types: ["card"],
});
console.log("serving /setup-intent", setupIntent.client_secret);

res.send({
data: {
attributes: {
client_secret: setupIntent.client_secret,
},
},
});
});```

#

and here's my client code:

#

  const stripePromise = loadStripe(PUBLISHABLE_KEY);
  const { clientSecret } = stripeContext;

  const appearance: Appearance = {
    theme: 'stripe',
  };

  const options = {
    clientSecret,
    appearance,
  };

  return (
    <div className="">
      <Elements options={options} stripe={stripePromise}>
        {children}
      </Elements>
    </div>
  );
}```

^ this is a parent wrapper around the PaymentElement

```const useSetupIntent = () => {
  const { clientSecret, setClientSecret } = useContext(StripeContext);

  useEffect(() => {
    if (clientSecret) {
      return;
    }

    const loadSetupIntent = async () => {
      const result: any = await axios.post(SETUP_INTENTS_ENDPOINT);

      const secret = result?.data?.data?.attributes?.client_secret;
      setClientSecret(secret);
    };

    loadSetupIntent();
  }, []);
};

const AcceptNewCard = (): JSX.Element => {
  const stripe = useStripe();
  const elements = useElements();
  const [errorMessage, setError] = useState(null);

  useSetupIntent();

  const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();

    if (!stripe || !elements) {
      return;
    }

    const { error } = await stripe.confirmSetup({
      elements,
      redirect: 'if_required',
    });

    if (error) {
      setError(error.message);
      return;
    }

    setError(null);
  };

  return (
    <form className="tw-border-2 tw-border-red-500" onSubmit={handleSubmit}>
      <h1>payment element here</h1>
      <PaymentElement />
      <button type="button" disabled={!stripe}>
        Submit
      </button>

      {errorMessage && <div>{errorMessage}</div>}
    </form>
  );
};```

#

(using it like this)

     <AcceptNewCard/>
    </StripeElements>

#

(and of course stripe context is just a react context object for saving the clientSecret and passing it up to <Elements>)

eager solstice Jan 20, 2022, 10:38 PM

#

damn that's a lot of code 😅

#

I barely understand half of what you're doing in there

#

is there a live page I can look at and click on?

green lintel Jan 20, 2022, 10:39 PM

#

ah I'm afraid not, this is internal code

#

so the code is doing just what I expect it to do, but what is unexpected is when I try to load the <PaymentElement/> - I get a 400 Bad Request from Stripe. and I'm not sure why

#

for instance, the client_secret that I generated locally is:

#

seti_1KK9JU2eZvKYlo2CX7LbEICC_secret_L09cCqyk4WojXjxxgiHVBCW1ZAFX4Da

#

which then was passed to stripe elements, which then sent a request to Stripe's API like this:

#

you'll notice that the seti_1KK9JU2eZvKYlo2CX7LbEICC_secret_L09cCqyk4WojXjxxgiHVBCW1ZAFX4Da value for the client_secret param is exactly the same as the client secret I got back from my server

#

but the response from Stripe's API is:

#

  "error": {
    "message": "The client_secret provided does not match the client_secret associated with the SetupIntent.",
    "param": "client_secret",
    "type": "invalid_request_error"
  }
}

#

and this doesn't make sense to me

eager solstice Jan 20, 2022, 10:43 PM

#

Do you see a request id req_123 in the headers somewhere for that request?

green lintel Jan 20, 2022, 10:43 PM

#

yep request-id: req_bY2rpvzeGap9kR

eager solstice Jan 20, 2022, 10:44 PM

#

perfect, looking

green lintel Jan 20, 2022, 10:44 PM

#

thanks 🙂

eager solstice Jan 20, 2022, 10:46 PM

#

what a confusing error ugh

#

I'll get this fixed

#

the real issue is that you are using the API key from a different account :p

green lintel Jan 20, 2022, 10:47 PM

#

oh! really?

eager solstice Jan 20, 2022, 10:47 PM

#

like the pk_test_123 in your code is Stripe's default test key

#

wait no

#

the Secret key

#

you're creating the SetupIntent on Stripe's default test account instead of on your real account

green lintel Jan 20, 2022, 10:47 PM

#

oh, yes

#

sorry- I thought I could do that

#

(for testing locally - is that not true?)

eager solstice Jan 20, 2022, 10:48 PM

#

no that wouldn't make sense if it worked. If you create a SetupIntent on account acct_A with its secret key, you can't then confirm it on Account acct_B

green lintel Jan 20, 2022, 10:48 PM

#

oh wait, sorry

eager solstice Jan 20, 2022, 10:48 PM

#

So fix your server-side code to use your own Test API key

green lintel Jan 20, 2022, 10:49 PM

#

sorry, I'm confused. I thought I was both creating and confirming on stripe's test key

eager solstice Jan 20, 2022, 10:49 PM

#

yeah you are using our Test sk_test_123 and then your pk_test_123

green lintel Jan 20, 2022, 10:51 PM

#

ah- I thought that both sk_test_4eC39... and pk_test_TYooMQ... were stripe test account keys pointing to the same test account in Stripe - is that not the case?

#

OH

eager solstice Jan 20, 2022, 10:52 PM

#

you shouldn't really share API keys but yes they are. But that's not the pk_test your code seems to use

green lintel Jan 20, 2022, 10:52 PM

#

omg

eager solstice Jan 20, 2022, 10:52 PM

#

(happens a lot and the error message should be _so much clearer)

green lintel Jan 20, 2022, 10:53 PM

#

ah sorry- I thought since those keys were public it was okay to share here

#

yes I see what I'm doing wrong. wow. one sec while I adjust the key...

#

it works!!!!!!!!

#

ahhhhh

#

thank you so much.

#

you just saved my neck.

#

btw- I have an unrelated q about stripe connect accounts if that's okay

#

let's say I have a stripe account for one of my customers, who creates these setupintents/paymentintents and I have stripe save them for me

#

and at the same time, I have a few stripe connect express accounts that I want to pay.

#

my question is: is it possible to take one of those payment methods attached to a customer, and use it to create a Stripe Connect charge?

eager solstice Jan 20, 2022, 11:03 PM

#

Sorry got pulled in something but so glad it worked. And our error message should be extremely clear, it'd have been obvious if we had said so

#

(catching up on other threads but I'll be right back for the other question)

green lintel Jan 20, 2022, 11:04 PM

#

thanks so much

eager solstice Jan 20, 2022, 11:07 PM

#

Okay so I don't fully grasp the example you gave but as a platform you can accept a payment from a customer and then later distribute the funds to multiple connected accounts via https://stripe.com/docs/connect/charges-transfers

green lintel Jan 20, 2022, 11:11 PM

#

oh sorry- I mean if I'm not a "platform" per se - like if I have a saved payment method from old paymentintents to my Stripe account, can I use that payment method ID (without the transfer_group: '{ORDER10}', from the example you linked) to create a transfer on a stripe connect account?

eager solstice Jan 20, 2022, 11:31 PM

#

sorry that doesn't really make sense written as is. If you are not a platform, you don't have connected accounts

green lintel Jan 20, 2022, 11:40 PM

#

oh I see- I think I'm confused. I'll reread through the docs. thanks so much for your help!

eager solstice Jan 20, 2022, 11:40 PM

#

Sure thing!

#smc-elements-setupintent