react-native-stripe - GitLite

KO | EN

gitlite — search

#javascript #python #react #typescript #llm #machine-learning #deep-learning #macos #windows #awesome #cli #pytorch #mcp #ios

react-native-stripe

(★ 129)

A React Native wrapper for the Stripe native SDK (currently iOS only)

파일 탐색기

최종 버전 다운로드 (.zip)

- .flowconfig
- .gitignore
- .watchmanconfig
- index.ios.js
- package.json
- updateBundle.sh
- PaymentViewController.h
- PaymentViewController.m
- StripeNativeManager.h
- StripeNativeManager.m
- project.pbxproj
.flowconfig
.gitignore
index.ios.js
LICENSE
package.json
README.md

# 설치 가이드

1. 코드 내려받기

git clone https://github.com/lrettig/react-native-stripe

깃허브에서 프로젝트 코드 전체를 내 컴퓨터로 내려받습니다.

cd react-native-stripe

방금 내려받은 프로젝트 폴더 안으로 이동합니다.

2. Node.js

쉬움 추천

사전 준비물

Git GitHub에서 프로젝트 코드를 내려받으려면 필요합니다.
Node.js npm 명령어를 쓰려면 Node.js가 설치되어 있어야 합니다. LTS(장기지원) 버전을 추천합니다.

npm i react-native-stripe --save

이 명령어를 터미널에 그대로 입력해 실행하세요.

✅ 명령어 실행 후 터미널에 나타나는 주소(보통 http://localhost:3000 형태)를 브라우저에서 열어보세요.

이 레포의 README에 적힌 실제 명령어를 그대로 가져왔습니다.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# React Native : Stripe SDK

Wraps the native [Stripe iOS SDK](https://github.com/stripe/stripe-ios) for React Native apps.

## Features
- Collect credit card information and convert to a Stripe token, all in native code.
- Get billing and shipping information (name, address, phone number, email address) from Apple Pay.
- Fall back on simple Stripe native credit card form for older devices.
- Check if the device supports Apple Pay, and if so, whether it has cards configured.
- If not, you can prompt the user to configure Apple Pay and enter a card.
- Specify which fields to request from the user in Apple Pay: name, postal address, phone number, and/or email.
- Collect credit card details in JavaScript and convert them to a card token (without needing to use the Stripe JS SDK).
- All methods return promises.

## Caveats
- Stripe only allows you to exchange card information for a payment token on
  the frontend. This *does not actually verify the payment information*. It just
  checks that it _looks_ reasonable, e.g., that the number has the right format,
  that the expiration date is in the future, etc. You should get this token, and
  then immediately pass it to a backend function that validates it, either by
  creating a charge, or else by attaching it to a customer. See the [Stripe API]
  (https://stripe.com/docs/api) for more information, and [this helpful blog
  post] (http://www.larryullman.com/2013/01/30/handling-stripe-errors/) for more
  on handling Stripe errors.
- As a corollary, you should only embed your _Stripe publishable key_ in a
  frontend app.

## Installation

- Install [Stripe iOS SDK](https://stripe.com/docs/mobile/ios)
- Install the module:
```
npm i react-native-stripe --save
```
- Run ```open node_modules/react-native-stripe```
- Drag `StripeNative.xcodeproj` into your `Libraries` group
- Select your main project in the navigator to bring up settings
- Under `Build Phases` expand the `Link Binary With Libraries` header
- Scroll down and click the `+` to add a library
- Find and add `libStripeNative.a` and `libStripe.a` under the `Workspace` group
- ⌘+B

## Example
```javascript
var React = require('react-native');
var StripeNative = require('react-native-stripe');

const STRIPE_KEY = "<YOUR STRIPE KEY>";

const SOME_ITEMS = [
  {
    label: "Llama Kitty T-shirt",
    amount: 19.99,
  },
  {
    label: "Hello Kitty Humidifier",
    amount: 25.00,
  },
];

var AppEntry = React.createClass({

componentDidMount: function () {
    StripeNative.init(STRIPE_KEY);
  },

applePay: function () {
    Promise.all([StripeNative.canMakePayments(), StripeNative.canMakePaymentsUsingNetworks()]).then(
      function (canMakePayments) {
        if (!canMakePayments[0])
          alert("Apple Pay is not enabled on this device");
        else if (!canMakePayments[1])
          alert("Apple Pay is enabled but no card is configured");
        else {
          var options = {
            fallbackOnCardForm: false,
            shippingAddressFields: StripeNative.iOSConstants.PKAddressFieldAll,
            currencyCode: 'USD'
          };
          StripeNative.paymentRequestWithApplePay(SOME_ITEMS, "Llama Kitty Shop", options).then(function (obj) {
            var token = obj[0],
              shippingInfo = obj[1],
              billingInfo = obj[2];

// (Create charge here)

(chargeWasSuccessful ? StripeNative.success : StripeNative.failure)();
          }, function (err) {
            alert(err);
          })
        }
      });
  },
});

```

## Sample application

- ```cd node_modules/react-native-stripe/example/```
- Edit `index.ios.js` and replace `<YOUR STRIPE KEY>` with your Stripe publishable key.
- Optionally, replace `<YOUR APPLE PAY MERCHANT ID>` with your merchant ID.  Note that this doesn't matter for testing in the simulator.
- ```npm install```
- ```react-native start```
- ```open ios/example.xcodeproj```
- ⌘+R to run the app in X-code.

## Limitations
- Currently only supports iOS.
- Apple does not currently allow us to get any billing contact info other than a postal address.
- Cannot yet check if payment is possible or request payment using a specific card brand ("Visa", "Amex", etc.).
- Currently only supports Stripe as payment processor.
- The manual card entry form is very vanilla and probably not usable in production.  You should show a user's cart to them at the point of checkout, and present errors directly on this form.  It's meant as a starting point.

## Copyright and license

Code and documentation copyright 2016-2017 Lane M Rettig. Code released under [the MIT license](https://github.com/lrettig/react-native-stripe/blob/master/LICENSE).

[react-native]: http://facebook.github.io/react-native/
[stripe-sdk]: https://github.com/stripe/stripe-ios