{"id":4753,"url":"https://github.com/kraffslol/react-native-braintree-xplat","last_synced_at":"2025-08-04T02:31:40.626Z","repository":{"id":9331437,"uuid":"61430403","full_name":"kraffslol/react-native-braintree-xplat","owner":"kraffslol","description":"Cross-platform Braintree module for React Native","archived":false,"fork":false,"pushed_at":"2022-10-19T11:45:42.000Z","size":7327,"stargazers_count":81,"open_issues_count":57,"forks_count":121,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-12-07T09:32:03.543Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"Objective-C","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kraffslol.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-06-18T11:28:16.000Z","updated_at":"2024-04-02T18:59:00.000Z","dependencies_parsed_at":"2023-01-11T20:11:58.400Z","dependency_job_id":null,"html_url":"https://github.com/kraffslol/react-native-braintree-xplat","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/kraffslol/react-native-braintree-xplat","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kraffslol%2Freact-native-braintree-xplat","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kraffslol%2Freact-native-braintree-xplat/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kraffslol%2Freact-native-braintree-xplat/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kraffslol%2Freact-native-braintree-xplat/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kraffslol","download_url":"https://codeload.github.com/kraffslol/react-native-braintree-xplat/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kraffslol%2Freact-native-braintree-xplat/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":268639931,"owners_count":24282678,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-04T02:00:09.867Z","response_time":79,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-01-05T20:17:22.254Z","updated_at":"2025-08-04T02:31:39.579Z","avatar_url":"https://github.com/kraffslol.png","language":"Objective-C","funding_links":[],"categories":["Components"],"sub_categories":["Integrations"],"readme":"# react-native-braintree-xplat\n[![npm version](https://badge.fury.io/js/react-native-braintree-xplat.svg)](https://badge.fury.io/js/react-native-braintree-xplat)\n\nAn effort to merge react-native-braintree and react-native-braintree-android\n\n## iOS Installation\nYou can use the React Native CLI to add native dependencies automatically:\n\n`$ react-native link`\n\nor do it manually as described below:\n\n1. Run `npm install react-native-braintree-xplat --save`\n2. Open your project in XCode, right click on `Libraries` and click `Add\n   Files to \"Your Project Name\"` Look under `node_modules/react-native-braintree-xplat` and add `RCTBraintree.xcodeproj`.\n3. Add `libRCTBraintree.a` to `Build Phases -\u003e Link Binary With Libraries`\n4. Done!\n\n## Android Installation\nRun `npm install react-native-braintree-xplat --save`\n### RN 0.29 and over\n\nIn `android/settings.gradle`\n```gradle\n...\n\ninclude ':react-native-braintree-xplat'\nproject(':react-native-braintree-xplat').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-braintree-xplat/android')\n```\n\nIn `android/app/build.gradle`\n\n```gradle\n...\n\ndependencies {\n    ...\n\n    compile project(':react-native-braintree-xplat')\n}\n```\n\nRegister module (in `MainApplication.java`)\n\n```java\nimport com.pw.droplet.braintree.BraintreePackage; // \u003c--- Import Package\nimport android.content.Intent; // \u003c--- Import Intent\n\npublic class MainApplication extends Application implements ReactApplication {\n\n  private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {\n    @Override\n    protected boolean getUseDeveloperSupport() {\n      return BuildConfig.DEBUG;\n    }\n\n    @Override\n    protected List\u003cReactPackage\u003e getPackages() {\n      return Arrays.\u003cReactPackage\u003easList(\n          new MainReactPackage(),\n          new BraintreePackage() // \u003c--- Initialize the package\n      );\n    }\n  };\n\n  @Override\n  public ReactNativeHost getReactNativeHost() {\n      return mReactNativeHost;\n  }\n}\n\n```\n---\n### RN 0.28 and under\n\n\nIn `android/settings.gradle`\n```gradle\n...\n\ninclude ':react-native-braintree-xplat'\nproject(':react-native-braintree-xplat').projectDir = file('../node_modules/react-native-braintree-xplat/android')\n```\n\nIn `android/app/build.gradle`\n\n```gradle\n...\n\ndependencies {\n    ...\n\n    compile project(':react-native-braintree-xplat')\n}\n```\n\nRegister module (in `MainActivity.java`)\n\n```java\nimport com.pw.droplet.braintree.BraintreePackage; // \u003c--- Import Package\nimport android.content.Intent; // \u003c--- Import Intent\n\npublic class MainActivity extends ReactActivity {\n    /**\n     * Returns the name of the main component registered from JavaScript.\n     * This is used to schedule rendering of the component.\n     */\n    @Override\n    protected String getMainComponentName() {\n        return \"example\";\n    }\n\n    /**\n     * Returns whether dev mode should be enabled.\n     * This enables e.g. the dev menu.\n     */\n    @Override\n    protected boolean getUseDeveloperSupport() {\n        return BuildConfig.DEBUG;\n    }\n\n    /**\n     * A list of packages used by the app. If the app uses additional views\n     * or modules besides the default ones, add more packages here.\n     */\n    @Override\n    protected List\u003cReactPackage\u003e getPackages() {\n        return Arrays.\u003cReactPackage\u003easList(\n            new MainReactPackage(),\n            new BraintreePackage() // \u003c---  Initialize the Package\n        );\n    }\n}\n\n```\n\n## Usage\n\n### Setup\n```js\nvar BTClient = require('react-native-braintree-xplat');\nBTClient.setup(\u003ctoken\u003e);\n```\nYou can find a demo client token [here](https://developers.braintreepayments.com/start/hello-client/ios/v3).\n\n### Show Payment Screen (Android \u0026 iOS)\nv.zero\n```js\nBTClient.showPaymentViewController(options).then(function(nonce) {\n  //payment succeeded, pass nonce to server\n})\n.catch(function(err) {\n  //error handling\n});\n```\n**Options**\n- [iOS] bgColor - Background color for the view.\n- [iOS] tintColor - Tint color for the view.\n- [iOS] barBgColor - Background color for the navbar.\n- [iOS] barTintColor - Tint color for the navbar.\n- [iOS] callToActionText - Text for call to action button. (Works for both Android and iOS)\n- threeDSecure - If you want to enable [3DSecure](https://developers.braintreepayments.com/guides/3d-secure/client-side/android/v2), pass an object with an `amount` key that takes a number value\n\nExample:\n```js\nconst options = {\n  bgColor: '#FFF',\n  tintColor: 'orange',\n  callToActionText: 'Save',\n  threeDSecure: {\n    amount: 1.0\n  }\n}\n```\n\n___\n\nPayPal only\n```js\nBTClient.showPayPalViewController().then(function(nonce) {\n  //payment succeeded, pass nonce to server\n})\n.catch(function(err) {\n  //error handling\n});\n```\n\n## Custom Integration\nIf you only want to tokenize credit card information, you can use the following:\n\n```js\nconst card = {\n  number: \"4111111111111111\",\n  expirationDate: \"10/20\", // or \"10/2020\" or any valid date\n  cvv: \"400\",\n}\n\nBTClient.getCardNonce(card).then(function(nonce) {\n  //payment succeeded, pass nonce to server\n})\n.catch(function(err) {\n  //error handling\n});\n\n// Full list of card parameters:\ntype Card = {\n  number: string,\n  cvv: string,\n  expirationDate: string,\n  cardholderName: string,\n  firstName: string,\n  lastName: string,\n  company: string,\n  countryName: string,\n  countryCodeAlpha2: string,\n  countryCodeAlpha3: string,\n  countryCodeNumeric: string,\n  locality: string,\n  postalCode: string,\n  region: string,\n  streetAddress: string,\n  extendedAddress: string,\n}\n```\n\n## One Touch on iOS\nTo take advantage of [One Touch](https://developers.braintreepayments.com/guides/one-touch/overview/ios/v3), there are additional setup required:\n\n1. Register a URL scheme in Xcode (should always start with YOUR Bundle ID)\n[More info here](https://developers.braintreepayments.com/guides/paypal/client-side/ios/v3#register-a-url-type) TL;DR\n\n\n#### Add CFBundleURLTypes to Info.Plist\n```js\n\t\u003ckey\u003eCFBundleURLTypes\u003c/key\u003e\n\t\u003carray\u003e\n\t\u003cdict\u003e\n\t\t\u003ckey\u003eCFBundleTypeRole\u003c/key\u003e\n\t\t\u003cstring\u003eEditor\u003c/string\u003e\n\t\t\u003ckey\u003eCFBundleURLName\u003c/key\u003e\n\t\t\u003cstring\u003eyour.bundle.id\u003c/string\u003e\n\t\t\u003ckey\u003eCFBundleURLSchemes\u003c/key\u003e\n\t\t\u003carray\u003e\n\t\t\t\u003cstring\u003eyour.bundle.id.payments\u003c/string\u003e\n\t\t\u003c/array\u003e\n\t\u003c/dict\u003e\n\t\u003c/array\u003e\n```\n#### WhiteList\nIf your app is built using iOS 9 as its Base SDK, then you must add URLs to a whitelist in your app's info.plist\n```js\n   \u003ckey\u003eLSApplicationQueriesSchemes\u003c/key\u003e\n   \u003carray\u003e\n     \u003cstring\u003ecom.paypal.ppclient.touch.v1\u003c/string\u003e\n     \u003cstring\u003ecom.paypal.ppclient.touch.v2\u003c/string\u003e\n     \u003cstring\u003ecom.venmo.touch.v2\u003c/string\u003e\n   \u003c/array\u003e\n```\n\n2. For iOS: Use setupWithURLScheme instead, passing the url scheme you have registered in previous step\n  ```js\n  var BTClient = require('react-native-braintree');\n  BTClient.setupWithURLScheme(token, 'your.bundle.id.payments');\n  ```\n  #### For xplat, you can do something like this:\n\n  ```js\n\n   if (Platform.OS === 'ios') {\n        BTClient.setupWithURLScheme(token, 'your.bundle.id.payments');\n    } else {\n        BTClient.setup(token);\n    }\n  ```\n\n3. Add this delegate method (callback) to your AppDelegate.m\n  ```objc\n#import \"RCTBraintree.h\"\n\n- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url sourceApplication:(NSString *)sourceApplication annotation:(id)annotation {\n  return [[RCTBraintree sharedInstance] application:application openURL:url sourceApplication:sourceApplication annotation:annotation];\n}\n  ```\n## Credits\n\nBig thanks to [@alanhhwong](https://github.com/alanhhwong) and [@surialabs](https://github.com/surialabs) for the original ios \u0026 android modules.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkraffslol%2Freact-native-braintree-xplat","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkraffslol%2Freact-native-braintree-xplat","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkraffslol%2Freact-native-braintree-xplat/lists"}