{"id":22122780,"url":"https://github.com/ekreative/react-native-braintree","last_synced_at":"2025-07-25T14:31:11.568Z","repository":{"id":43635775,"uuid":"370664300","full_name":"ekreative/react-native-braintree","owner":"ekreative","description":"A react native interface for integrating payments using Braintree","archived":false,"fork":false,"pushed_at":"2024-03-11T18:46:30.000Z","size":728,"stargazers_count":39,"open_issues_count":0,"forks_count":19,"subscribers_count":5,"default_branch":"master","last_synced_at":"2024-04-14T06:05:25.438Z","etag":null,"topics":["android","braintree","hacktoberfest","ios","react-native"],"latest_commit_sha":null,"homepage":"https://github.com/ekreative/react-native-braintree","language":"Java","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ekreative.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-05-25T11:11:01.000Z","updated_at":"2024-08-15T06:40:14.787Z","dependencies_parsed_at":"2023-10-27T13:39:37.612Z","dependency_job_id":"f70ec7ae-607b-4392-9eda-2d4f1277ae46","html_url":"https://github.com/ekreative/react-native-braintree","commit_stats":{"total_commits":26,"total_committers":7,"mean_commits":"3.7142857142857144","dds":0.6153846153846154,"last_synced_commit":"003ce5ef5e28f5b43a96ec98b9e1822b556fe47a"},"previous_names":[],"tags_count":17,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ekreative%2Freact-native-braintree","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ekreative%2Freact-native-braintree/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ekreative%2Freact-native-braintree/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ekreative%2Freact-native-braintree/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ekreative","download_url":"https://codeload.github.com/ekreative/react-native-braintree/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":227584542,"owners_count":17789709,"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","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":["android","braintree","hacktoberfest","ios","react-native"],"created_at":"2024-12-01T15:27:46.105Z","updated_at":"2024-12-01T15:27:46.667Z","avatar_url":"https://github.com/ekreative.png","language":"Java","funding_links":["https://developer.paypal.com/braintree/docs/guides/3d-secure/client-side/android/v4"],"categories":[],"sub_categories":[],"readme":"# Take a look at the https://github.com/msasinowski/react-native-expo-braintree\n\n## Getting started\n\n## Android Specific\nAdd this to your `build.gradle`\n\n```groovy\nallprojects {\n    repositories {\n        maven {\n            // Braintree 3D Secure\n            // https://developer.paypal.com/braintree/docs/guides/3d-secure/client-side/android/v4#generate-a-client-token\n            url \"https://cardinalcommerceprod.jfrog.io/artifactory/android\"\n            credentials {\n                username 'braintree_team_sdk'\n                password 'AKCp8jQcoDy2hxSWhDAUQKXLDPDx6NYRkqrgFLRc3qDrayg6rrCbJpsKKyMwaykVL8FWusJpp'\n            }\n        }\n    }\n}\n```\n\nIn Your `AndroidManifest.xml`, `android:allowBackup=\"false\"` can be replaced `android:allowBackup=\"true\"`, it is responsible for app backup.\n\nAlso, add this intent-filter to your main activity in `AndroidManifest.xml`:\n\n```xml\n\u003cactivity\u003e\n    ...\n    \u003cintent-filter\u003e\n        \u003caction android:name=\"android.intent.action.VIEW\" /\u003e\n        \u003ccategory android:name=\"android.intent.category.DEFAULT\" /\u003e\n        \u003ccategory android:name=\"android.intent.category.BROWSABLE\" /\u003e\n        \u003cdata android:scheme=\"${applicationId}.braintree\" /\u003e\n    \u003c/intent-filter\u003e\n\u003c/activity\u003e\n```\n\nIf you need to specify a custom `appLinkReturnUrl`, you may do so:\n\n```xml\n\u003cactivity\u003e\n    ...\n    \u003cintent-filter\u003e\n        \u003caction android:name=\"android.intent.action.VIEW\" /\u003e\n        \u003ccategory android:name=\"android.intent.category.DEFAULT\" /\u003e\n        \u003ccategory android:name=\"android.intent.category.BROWSABLE\" /\u003e\n        \u003cdata android:scheme=\"${applicationId}.braintree.custom\" /\u003e\n    \u003c/intent-filter\u003e\n\u003c/activity\u003e\n```\n\nYou will need to pass this value to to `RNBraintree.showPayPalModule` as an option (see **Show PayPall module** below).\n\n**NOTE: Card payments do not work on rooted devices and Android Emulators**\n\nIf your project uses Progurad, add the following lines into `proguard-rules.pro` file\n```\n-keep class com.cardinalcommerce.dependencies.internal.bouncycastle.**\n-keep class com.cardinalcommerce.dependencies.internal.nimbusds.**\n-keep class com.cardinalcommerce.shared.**\n```\n\n## iOS Specific\n```bash\ncd ios\npod install\n```\n###### Configure a new URL scheme\nAdd a bundle url scheme {BUNDLE_IDENTIFIER}.payments in your app Info via XCode or manually in the Info.plist. In your Info.plist, you should have something like: \n\n```xml \n\u003ckey\u003eCFBundleURLTypes\u003c/key\u003e\n\u003carray\u003e\n    \u003cdict\u003e\n        \u003ckey\u003eCFBundleTypeRole\u003c/key\u003e\n        \u003cstring\u003eEditor\u003c/string\u003e\n        \u003ckey\u003eCFBundleURLName\u003c/key\u003e\n        \u003cstring\u003ecom.myapp\u003c/string\u003e\n        \u003ckey\u003eCFBundleURLSchemes\u003c/key\u003e\n        \u003carray\u003e\n            \u003cstring\u003ecom.myapp.payments\u003c/string\u003e\n        \u003c/array\u003e\n    \u003c/dict\u003e\n\u003c/array\u003e\n```\n###### Update your code\nIn your `AppDelegate.m`:\n\n```objective-c\n#import \"BraintreeCore.h\"\n\n...\n- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions\n{\n    ...\n    [BTAppContextSwitcher setReturnURLScheme:self.paymentsURLScheme];\n}\n\n- (BOOL)application:(UIApplication *)application\n            openURL:(NSURL *)url\n            options:(NSDictionary\u003cUIApplicationOpenURLOptionsKey,id\u003e *)options {\n\n    if ([url.scheme localizedCaseInsensitiveCompare:self.paymentsURLScheme] == NSOrderedSame) {\n        return [BTAppContextSwitcher handleOpenURL:url];\n    }\n    \n    return [RCTLinkingManager application:application openURL:url options:options];\n}\n\n- (NSString *)paymentsURLScheme {\n    NSString *bundleIdentifier = [[NSBundle mainBundle] bundleIdentifier];\n    return [NSString stringWithFormat:@\"%@.%@\", bundleIdentifier, @\"payments\"];\n}\n```\n\n\n## Usage\n\n##### Show PayPall module\n\n```javascript\nimport RNBraintree from '@ekreative/react-native-braintree';\n\nRNBraintree.showPayPalModule({\n    clientToken: 'CLIENT_TOKEN_GENERATED_ON_SERVER_SIDE',\n    amount: '1.0',\n    currencyCode: 'EUR',\n    // Change button text to “Complete Purchase\", optional\n    userAction: 'commit',\n    // Define a custom return URL for Android, optional\n    appLinkReturnUrl: 'com.application.braintree.custom',\n    })\n    .then(result =\u003e console.log(result))\n    .catch((error) =\u003e console.log(error));\n\n\n```\n\n##### Card tokenization\n```javascript\nimport RNBraintree from '@ekreative/react-native-braintree';\n\nRNBraintree.tokenizeCard({\n    clientToken: 'CLIENT_TOKEN_GENERATED_ON_SERVER_SIDE',\n    number: '1111222233334444',\n    expirationMonth: '11',\n    expirationYear: '24',\n    cvv: '123',\n    postalCode: '',\n    })\n    .then(result =\u003e console.log(result))\n    .catch((error) =\u003e console.log(error));\n\n```\n##### Make Payment\n```javascript\nimport RNBraintree from '@ekreative/react-native-braintree';\n\nRNBraintree.run3DSecureCheck({\n    // Optional if you ran `tokenizeCard()` or other Braintree methods before\n    clientToken: 'CLIENT_TOKEN_GENERATED_ON_SERVER_SIDE',\n    nonce: 'CARD_NONCE',\n    amount: '122.00',\n    // Pass as many of the following fields as possible, but they're optional\n    email: 'email@mail.com',\n    firstname: '',\n    lastname: '',\n    phoneNumber: '',\n    streetAddress: '',\n    streetAddress2: '',\n    city: '',\n    region: '',\n    postalCode: '',\n    countryCode: ''\n    })\n    .then(result =\u003e console.log(result))\n    .catch((error) =\u003e console.log(error));\n```\n\n##### Request PayPal billing agreement\n```javascript\nimport RNBraintree from '@ekreative/react-native-braintree';\n\nRNBraintree.requestPayPalBillingAgreement({\n    clientToken: 'CLIENT_TOKEN_GENERATED_ON_SERVER_SIDE',\n    description: 'BILLING_AGRREEMENT_DESCRIPTION',\n    localeCode: 'LOCALE_CODE'\n    })\n    .then(result =\u003e console.log(result))\n    .catch((error) =\u003e console.log(error));\n```\n### iOS\n##### Check if Apple Pay is available\n```javascript\nimport RNBraintree from '@ekreative/react-native-braintree';\n\nconsole.log(RNBraintree.isApplePayAvailable())\n```\n##### Make payment using Apple Pay\n```javascript\nimport RNBraintree from '@ekreative/react-native-braintree';\n\nRNBraintree.runApplePay({\n    clientToken: 'CLIENT_TOKEN_GENERATED_ON_SERVER_SIDE',\n    companyName: 'Company',\n    amount: '100.0',\n    currencyCode: 'EUR'\n    })\n    .then(result =\u003e console.log(result))\n    .catch((error) =\u003e console.log(error));\n```\n### Android\n##### Make payment using Google Pay\n```javascript\nimport RNBraintree from '@ekreative/react-native-braintree';\n\nRNBraintree.runGooglePay({\n    clientToken: 'CLIENT_TOKEN_GENERATED_ON_SERVER_SIDE',\n    amount: '100.0',\n    currencyCode: 'EUR'\n    })\n    .then(result =\u003e console.log(result))\n    .catch((error) =\u003e console.log(error));\n```\n\n## TODO\n\n- [ ] Android. Check if we can split the logic in the `getDeviceData` method to call `new DataCollector(mBraintreeClient).collectDeviceData()` only once (it seems like it's currently may be called a second time from the `setup` method) https://github.com/ekreative/react-native-braintree/pull/37#issuecomment-1752470507\n- [ ] iOS. Try to use the new `getDeviceData` method in other methods, such as `tokenizeCard`, `showPayPalModule` https://github.com/ekreative/react-native-braintree/pull/37#issuecomment-1752470507\n\n## Useful Links and Resources\nIf you want to read further you can follow these links\n\n- https://reactnative.directory/?search=react-native-braintree\n- https://reintech.io/blog/tutorial-for-react-developers-what-are-the-best-react-native-libraries-for-creating-mobile-payments\n- https://reactnativeexample.com/a-react-native-interface-for-integrating-payments-using-braintree/\n- https://www.npmjs.com/package/@ekreative/react-native-braintree\n\n\n## Contributors\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --\u003e\n\u003c!-- prettier-ignore-start --\u003e\n\u003c!-- markdownlint-disable --\u003e\n\n\u003c!-- markdownlint-restore --\u003e\n\u003c!-- prettier-ignore-end --\u003e\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:END --\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fekreative%2Freact-native-braintree","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fekreative%2Freact-native-braintree","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fekreative%2Freact-native-braintree/lists"}