Giter VIP home page Giter VIP logo

react-native-braintree-card's Introduction

react-native-braintree-card

A react native interface for handling Braintree's card nonce creation, when using a custom credit card UI.

For those using the Braintree's v.zero SDK, check out react-native-braintree.

API supports both the initWithNumber and initWithParameters methods from Class BTCard.

Usage

Setup

// outside of your componet
import BraintreeCardClient from 'react-native-braintree-card';

// in your componentDidMount() block
BraintreeCardClient.initWithAuthorization(<token>);

// handle form submit event after user inputs card detail
BraintreeCardClient.getCardNonce( card, expMonth, expYear, cvv, (error, nonce) => {
   // if error handle accordingly or pass nonce to your server
});

// Or with object, more info on object schema here http://cocoadocs.org/docsets/Braintree/4.7.4/Classes/BTCard.html
BraintreeCardClient.getCardNonce(
  {
    number,
    expirationMonth,
    expirationYear,
    cvv,
    cardholderName,
    billing_address: {
      street_address, postal_code, locality, region,
      country_code_alpha2,
      country_name,
    },
    options: {
      validate: false,
    }
  },
   (error, nonce) => {
     // if error handle accordingly or pass nonce to your server
});

Installation

  1. Run npm install react-native-braintree-card --save to add the package
  2. Inside the ios/ directory, create a Podfile:
# Podfile for cocoapods 1.0
source 'https://github.com/CocoaPods/Specs.git'
target 'yourAppTarget' do
  pod 'React', :path => '../node_modules/react-native'
  pod 'react-native-braintree-card', :path => '../node_modules/react-native-braintree-card'
end

Or if you use an older CocoaPods version:

source 'https://github.com/CocoaPods/Specs.git'
pod 'React', :path => '../node_modules/react-native'
pod 'react-native-braintree-card', :path => '../node_modules/react-native-braintree-card'
  1. Run pod install. This installs the Braintree iOS SDK and a new workspace is created.

  2. Open your workspace.

  3. Under your app target -> build settings, look for Other Linker Flags and add $(inherited)

  4. Build and run project! If it fails the first time, clean and rebuild.

Requirements

Tested with:

  • node 6.9.4
  • npm 3.10.10
  • react-native 0.42.0

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.