A react native interface for integrating payments using Braintree

eKreative

Last update: Dec 30, 2022

Related tags

Miscellaneous react-native-braintree

Overview

@ekreative/react-native-braintree

Getting started

Android Specific

Add this to your build.gradle

    repositories {
        maven {
            url "https://cardinalcommerce.bintray.com/android"
            credentials {
                username 'braintree-team-sdk@cardinalcommerce'
                password '220cc9476025679c4e5c843666c27d97cfb0f951'
            }
        }
    }

In Your AndroidManifest.xml, android:allowBackup="false" can be replaced android:allowBackup="true", it is responsible for app backup.

iOS Specific

cd ios
pod install

Configure a new URL scheme

Add 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:

<key>CFBundleURLTypeskey>
<array>
    <dict>
        <key>CFBundleTypeRolekey>
        <string>Editorstring>
        <key>CFBundleURLNamekey>
        <string>com.myappstring>
        <key>CFBundleURLSchemeskey>
        <array>
            <string>com.myapp.paymentsstring>
        array>
    dict>
array>

Update your code

In your AppDelegate.m:

*)options { if ([url.scheme localizedCaseInsensitiveCompare:self.paymentsURLScheme] == NSOrderedSame) { return [BTAppSwitch handleOpenURL:url options:options]; } return [RCTLinkingManager application:application openURL:url options:options]; } - (NSString *)paymentsURLScheme { NSString *bundleIdentifier = [[NSBundle mainBundle] bundleIdentifier]; return [NSString stringWithFormat:@"%@.%@", bundleIdentifier, @"payments"]; } ">

#import "BraintreeCore.h"

...
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    ...
    [BTAppSwitch setReturnURLScheme:self.paymentsURLScheme];
}

- (BOOL)application:(UIApplication *)application
            openURL:(NSURL *)url
            options:(NSDictionaryid> *)options {

    if ([url.scheme localizedCaseInsensitiveCompare:self.paymentsURLScheme] == NSOrderedSame) {
        return [BTAppSwitch handleOpenURL:url options:options];
    }
    
    return [RCTLinkingManager application:application openURL:url options:options];
}

- (NSString *)paymentsURLScheme {
    NSString *bundleIdentifier = [[NSBundle mainBundle] bundleIdentifier];
    return [NSString stringWithFormat:@"%@.%@", bundleIdentifier, @"payments"];
}

Usage

Show PayPall module

import RNBraintree from '@ekreative/react-native-braintree';

RNBraintree.showPayPalModule({
    clientToken: 'CLIENT_TOKEN_GENERATED_ON_SERVER_SIDE',
    amount: '1.0',
    currencyCode: 'EUR'
    })
    .then(result => console.log(result))
    .catch((error) => console.log(error));

Card tokenization

import RNBraintree from '@ekreative/react-native-braintree';

RNBraintree.tokenizeCard({
    clientToken: 'CLIENT_TOKEN_GENERATED_ON_SERVER_SIDE',
    number: '1111222233334444',
    expirationMonth: '11',
    expirationYear: '24',
    cvv: '123',
    postalCode: '',
    })
    .then(result => console.log(result))
    .catch((error) => console.log(error));

Make Payment

import RNBraintree from '@ekreative/react-native-braintree';

RNBraintree.run3DSecureCheck({
    clientToken: 'CLIENT_TOKEN_GENERATED_ON_SERVER_SIDE',
    nonce: 'CARD_NONCE',
    amount: '122.00',
    email: '[email protected]',
    firstname: '',
    lastname: '',
    phoneNumber: '',
    streetAddress: '',
    streetAddress2: '',
    city: '',
    region: '',
    postalCode: '',
    countryCode: ''
    })
    .then(result => console.log(result))
    .catch((error) => console.log(error));

Request PayPal billing agreement

import RNBraintree from '@ekreative/react-native-braintree';

RNBraintree.requestPayPalBillingAgreement({
    clientToken: 'CLIENT_TOKEN_GENERATED_ON_SERVER_SIDE',
    description: 'BILLING_AGRREEMENT_DESCRIPTION',
    localeCode: 'LOCALE_CODE'
    })
    .then(result => console.log(result))
    .catch((error) => console.log(error));

iOS

Get if Apple Pay available

import RNBraintree from '@ekreative/react-native-braintree';

console.log(RNBraintree.isApplePayAvailable())

Make payment using Apple Pay

import RNBraintree from '@ekreative/react-native-braintree';

RNBraintree.runApplePay({
    clientToken: 'CLIENT_TOKEN_GENERATED_ON_SERVER_SIDE',
    companyName: 'Company',
    amount: '100.0',
    currencyCode: 'EUR'
    })
    .then(result => console.log(result))
    .catch((error) => console.log(error));

Android

Make payment using Google Pay

import RNBraintree from '@ekreative/react-native-braintree';

RNBraintree.runGooglePay({
    clientToken: 'CLIENT_TOKEN_GENERATED_ON_SERVER_SIDE',
    amount: '100.0',
    currencyCode: 'EUR'
    })
    .then(result => console.log(result))
    .catch((error) => console.log(error));

Comments

Google pay is not working in both platform (android and iOS)

when ever I run the following code nothing happens

RNBraintree.runGooglePay({ clientToken:token, amount: '100.0', currencyCode: 'EUR' }) .then(result => console.log(result)) .catch((error) => console.log(error));

.

opened by himanshuvats1996 3
Credentials for https://cardinalcommerceprod.jfrog.io/artifactory/android are not working

May I please ask for the updated credentails for https://cardinalcommerceprod.jfrog.io/artifactory/android

since the credentials provided is returning a wrong/locked user account. Thanks!

opened by bll-manapulian 1
No visible @interface for 'BTDataCollector' declares the selector 'collectDeviceData:'

I need to implement Apple Pay in a Project React Native 0.62.2 in Xcode Version 13.2.1 (13C100)

And I get this error:

No visible @interface for 'BTDataCollector' declares the selector 'collectDeviceData:'

how can I solve it? Thanks!!

opened by pckz 1
not an object

Hi, i'm using your library witj expo react and that not work. I show you the error: TypeError: null is not an object (evaluating 'RNBraintree.showPayPalModule') at node_modules\react-native\Libraries\LogBox\LogBox.js:148:8 in registerError at node_modules\react-native\Libraries\LogBox\LogBox.js:59:8 in errorImpl at node_modules\react-native\Libraries\LogBox\LogBox.js:33:4 in console.error at node_modules\expo\build\environment\react-native-logs.fx.js:27:4 in error at node_modules\react-native\Libraries\Core\ExceptionsManager.js:104:6 in reportException at node_modules\react-native\Libraries\Core\ExceptionsManager.js:171:19 in handleException at node_modules\react-native\Libraries\Core\setUpErrorHandling.js:24:6 in handleError at node_modules\expo-error-recovery\build\ErrorRecovery.fx.js:12:21 in ErrorUtils.setGlobalHandler$argument_0 at node_modules\regenerator-runtime\runtime.js:63:36 in tryCatch at node_modules\regenerator-runtime\runtime.js:293:29 in invoke at node_modules\regenerator-runtime\runtime.js:63:36 in tryCatch at node_modules\regenerator-runtime\runtime.js:154:27 in invoke at node_modules\regenerator-runtime\runtime.js:164:18 in PromiseImpl.resolve.then$argument_0 at node_modules\react-native\node_modules\promise\setimmediate\core.js:37:13 in tryCallOne at node_modules\react-native\node_modules\promise\setimmediate\core.js:123:24 in setImmediate$argument_0 at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:130:14 in _callTimer at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:181:14 in _callImmediatesPass at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:441:30 in callImmediates at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:387:6 in __callImmediates at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:135:6 in __guard$argument_0 at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:364:10 in __guard at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:134:4 in flushedQueue at [native code]:null in flushedQueue at [native code]:null in invokeCallbackAndReturnFlushedQueue

opened by ajechenique1 1
UI doesn't appear on android

I have no problem with iOS emulator, but if I try to run .run3DSecureCheck on an android device it doesn't show anything. I followed the instruction to install the module correctly with both the systems. Is there something I am missing? Maybe I have to change the credentials for maven url https://cardinalcommerceprod.jfrog.io/artifactory/android ?

opened by SalvM 0
BrainTree/Apple uses deprecated fields

I believe this package is using an old version for Braintree/Apple which has some deprecated fields in it and that is crashing on ios. I tested on a bareflow latest react native project (0.70.6) and I am having the below error, can someone guide me?

opened by ehtisham-ali-emumba 5

'BraintreeCore.h' file not found

▸ Compiling react-native-braintree-dummy.m
▸ Compiling RNBraintreeApplePay.m
▸ Compiling RNBraintree.m

❌  /Users/boblin/Desktop/WorkSpace/ReactNative/ignite/moon/node_modules/@ekreative/react-native-braintree/ios/RNBraintree.m:2:9: 'BraintreeCore.h' file not found

#import "BraintreeCore.h"

environment

    "react": "18.0.0",
    "react-native": "0.69.6",
    "@ekreative/react-native-braintree": "^1.3.0",

opened by Bob-MYMC 7

Releases(v1.3.0)

v1.3.0(Nov 9, 2022)
Fix:

handle Apple Pay cancel

Source code(tar.gz)
Source code(zip)
v1.2.0(Nov 9, 2022)
Feat:

update PayPalBillingAgreementOptions interface

Source code(tar.gz)
Source code(zip)
v1.1.0(Sep 20, 2022)
Feat:

Export Braintree interfaces ba07a1b52b813c680d51130a0d7d6f9f63f9d462

Source code(tar.gz)
Source code(zip)
v1.0.4(Jul 7, 2022)
Feat:

Add ability to working with gradle plugin version 7+ [Android]

Source code(tar.gz)
Source code(zip)
v1.0.3(Jul 7, 2022)
Feat:

Add requestPayPalBillingAgreement method

Source code(tar.gz)
Source code(zip)
v1.0.2(Oct 17, 2021)
Fix:

Init braintree fragment again after token changed [Android]

Source code(tar.gz)
Source code(zip)
v1.0.1(Oct 17, 2021)

Add docs and types for requestPayPalBillingAgreement
Source code(tar.gz)
Source code(zip)
v1.0.0(Jun 9, 2021)
First release:

PayPal

3DS v2

Google Pay

Apple Pay

Source code(tar.gz)
Source code(zip)

Owner

eKreative

We're a software development company, specializing in apps, sites and online systems for a wide range of industries.

GitHub

React Native library that implements PayPal Checkout flow using purely native code (swift).

react-native-paypal-swift React Native library that implements PayPal Checkout flow using purely native code (swift). Installation npm install react-n

6 Nov 28, 2022

A property finder application written using React Native

React Native PropertyFinder App This repository accompanies the tutorial I published on Ray Wenderlich's website, which describes the process of build

276 Aug 14, 2022

React Native utility library around image and video files for getting metadata like MIME type, timestamp, duration, and dimensions. Works on iOS and Android using Java and Obj-C, instead of Node 🚀.

Qeepsake React Native File Utils Extracts information from image and video files including MIME type, duration (video), dimensions, and timestamp. The