React Native: Fetch Stripe API

Question

I'm attempting to fetch() Stripe's API to create a payment token directly from the front-end with React Native.

I'm doing so with the following:

  const genCard = {
    'card[number]': "4242424242424242",
    'card[exp_month]': "11",
    'card[exp_year]': "25,
    'card[cvc]': "111"
  }

  var formBody = []
  for (var property in genCard) {
    var encodedKey = encodeURIComponent(property)
    var encodedValue = encodeURIComponent(genCard[property])
    formBody.push(encodedKey + "=" + encodedValue)
  }
  formBody = formBody.join("&")

  const result = fetch("https://api.stripe.com/v1/tokens", {
    method: "post",
    headers: {
      Accept: "application/json",
      "Content-Type": "application/x-www-form-urlencoded",
      Authorization: "Bearer " + "sk_test_4eC39HqLyjWDarjtT1zdp7dc",
    },
    body: formBody
  }).then(response => response.json())

  console.log('logging: \n', genCard, '\n', formBody, '\n', result)

The logging output gives me the following:

logging: 
 {"card[cvc]": "111", "card[exp_month]": "11", "card[exp_year]": "25", "card[number]": "4242424242424242"} 
 card%5Bnumber%5D=4242424242424242&card%5Bexp_month%5D=11&card%5Bexp_year%5D=25&card%5Bcvc%5D=111 
 {"_40": 0, "_55": null, "_65": 0, "_72": null}

genCard contains all the CC data required by Stripe (number, exp_month, exp_year, cvc), and formBody formats the CC data in accordance to all the documentation and guides I've found online. However, the API response I'm receiving is not the expected payment token, but instead {"_40": 0, "_55": null, "_65": 0, "_72": null}.

I believe I've followed Stripe's documentation, but either the header data is incorrect or the body data is mis-formatted.

Is anybody familiar with this process? What am I missing?

acgf acgf · Accepted Answer · 2021-02-22T18:58:07

For anybody interested, the following solution worked:

async function testStripe() {
  const genCard = {
    'card[number]': "4242424242424242",
    'card[exp_month]': "11",
    'card[exp_year]': "25,
    'card[cvc]': "111"
  }

  const results = await fetch("https://api.stripe.com/v1/tokens", {
    method: "post",
    headers: {
      Accept: "application/json",
      "Content-Type": "application/x-www-form-urlencoded",
      Authorization: "Bearer " + "sk_test_4eC39HqLyjWDarjtT1zdp7dc",
    },
    body: Object.keys(genCard)
      .map(key => key + '=' + genCard[key])
      .join('&'),
  }).then(response => response.json())

  console.log('\n\n\nlogging: \n', genCard, '\n', 'blank', '\n', results)

  return
}

Wrap your fetch in an async function and await the results
The fetch body must be key->value pairs of the card data
Use your Stripe Publishable Key to authenticate api requests

Your api response should look something like this:

{"card": {"address_city": null, "address_country": null, "address_line1": null, "address_line1_check": null, "address_line2": null, "address_state": null, "address_zip": null, "address_zip_check": null, "brand": "Visa", "country": "US", "cvc_check": "unchecked", "dynamic_last4": null, "exp_month": 11, "exp_year": 2022, "fingerprint": "Xt5EWLLDS7FJjR1c", "funding": "credit", "id": "card_1INjaU2eZvKYlo2C5O5qqIFW", "last4": "4242", "metadata": {}, "name": null, "object": "card", "tokenization_method": null}, "client_ip": "66.42.75.92", "created": 1614020214, "id": "tok_1INjaU2eZvKYlo2CDjL8bde4", "livemode": false, "object": "token", "type": "card", "used": false}

React Native: Fetch Stripe API

1 Answers