401 Error when sending data to Stripe `Customers` API

Question

I want to create a new customer in Stripe upon form submit and add that customer's credit card to their account. As of now, I'm using the following code upon submit in my React App. The create customer call is then made separately from my server:

async submit(ev) {
  let {token} = await this.props.stripe.createToken({name: "Name"});
  let response = await fetch("https://api.stripe.com/v1/customers", {
     method: "POST",
     headers: {"Content-Type": "text/plain"},
     body: token.id
});

When sending that data, I get a 401 error on the let response = ... line. I know that a 401 is an auth error, but my test API keys are definitely correct and don't have limits on how they can access my stripe account. Can anyone advise?

Answer 1

The issue here is that you are trying to create a Customer object client-side in raw Javascript. This API request requires your Secret API key. This means you can never do this client-side, otherwise anyone could find your API key and use it to make refunds or transfer for example.

Instead, you need to send the token to your own server. There, you will be able to create a Customer or a Charge using one of Stripe's official libraries instead of making the raw HTTP request yourself.

Answer 2

In my case, it's throwing the error due to a missing of stripe public key

var stripe = Stripe('{{ env("STRIPE_KEY") }}');

then I pass the public key as above, and it worked like a charm.