how to use Stripe (stripe.js) and react-native

I have not implemented this in React Native personally yet. In the app I am working on this will be ported over in the next few days but here is how we do it in the current app without any dependency on third party libraries and how we will implement in React Native as well. This is obviously just a concept that can be used anywhere you can make a HTTP call.

Make a POST call to https://api.stripe.com/v1/tokens with a 'Authorization' header with the value Bearer {PUBLISHABLE_AUTH_TOKEN}. In the body (x-www-form-urlencoded) put:

card[name]={NAME_ON_CARD}&card[number]={CARD_NUMBER}&card[exp_month]={CARD_EXP_MONTH}&card[exp_year]={CARD_EXP_YEAR}&card[cvc]={CARD_CVC}

The response will be a JSON object that contains (among other things) an id field. This id field is what you will reference the card when making transactions so this ID needs sent to your server and stored. This ID can be stored without worry of PCI compliance.

More Info: https://stripe.com/docs/api#tokens

I'm still not sure, but what We want to achieve is simple.

With react, we were able to achieve this by calling stripe from the front end for card information. However, React Native does not have its own code.

So we need to get everything we need from by ourself Like this

curl https://api.stripe.com/v1/tokens \
  -u sk_test_IjzBJWterND0tgdSyEIhDmgS00ODHLjw1a: \
  -d "card[number]"=4242424242424242 \
  -d "card[exp_month]"=7 \
  -d "card[exp_year]"=2021 \
  -d "card[cvc]"=314

and you will get

% curl https://api.stripe.com/v1/tokens \
  -u sk_test_IjzBJWterND0tgdSyEIhDmgS00ODHLjw1a: \
  -d "card[number]"=4242424242424242 \
  -d "card[exp_month]"=7 \
  -d "card[exp_year]"=2021 \
  -d "card[cvc]"=314
{
  "id": "tok_1H2Vt9AxSyQJWoao8qhjHDuh",
  "object": "token",
  "card": {
    "id": "card_1H2Vt9AxSyQJWoao26em4Dps",
    "object": "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": 7,
    "exp_year": 2021,
    "fingerprint": "IS61beTzZemIdd8p",
    "funding": "credit",
    "last4": "4242",
    "metadata": {
    },
    "name": null,
    "tokenization_method": null
  },
  "client_ip": "153.218.66.247",
  "created": 1594186331,
  "livemode": false,
  "type": "card",
  "used": false
}

You can use the tok_ on the card to implement backend charges as usual.

I recommend: https://github.com/tipsi/tipsi-stripe

I was able to successfully connect React Native and Stripe to create a customer and add a card and save the tokens to my back end.