6

A react native interface for integrating payments using Braintree

 1 year ago
source link: https://reactnativeexample.com/a-react-native-interface-for-integrating-payments-using-braintree/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

@ekreative/react-native-braintree

Getting started

Android Specific

Add this to your build.gradle

allprojects {
    repositories {
        maven {
            // Braintree 3D Secure
            // https://developer.paypal.com/braintree/docs/guides/3d-secure/client-side/android/v4#generate-a-client-token
            url "https://cardinalcommerceprod.jfrog.io/artifactory/android"
            credentials {
                username 'braintree_team_sdk'
                password 'AKCp8jQcoDy2hxSWhDAUQKXLDPDx6NYRkqrgFLRc3qDrayg6rrCbJpsKKyMwaykVL8FWusJpp'
            }
        }
    }
}
Groovy

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

Also, add this intent-filter to your main activity in AndroidManifest.xml

<activity>
    ...
    <intent-filter>
        <action android:name="android.intent.action.VIEW" />
        <category android:name="android.intent.category.DEFAULT" />
        <category android:name="android.intent.category.BROWSABLE" />
        <data android:scheme="${applicationId}.braintree" />
    </intent-filter>
</activity>

NOTE: Card payments do not work on rooted devices and Android Emulators

If your project uses Progurad, add the following lines into proguard-rules.pro file

-keep class com.cardinalcommerce.dependencies.internal.bouncycastle.**
-keep class com.cardinalcommerce.dependencies.internal.nimbusds.**
-keep class com.cardinalcommerce.shared.**

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>CFBundleURLTypes</key>
<array>
    <dict>
        <key>CFBundleTypeRole</key>
        <string>Editor</string>
        <key>CFBundleURLName</key>
        <string>com.myapp</string>
        <key>CFBundleURLSchemes</key>
        <array>
            <string>com.myapp.payments</string>
        </array>
    </dict>
</array>
Update your code

In your AppDelegate.m:

#import "BraintreeCore.h"

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

- (BOOL)application:(UIApplication *)application
            openURL:(NSURL *)url
            options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options {

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

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

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));
JavaScript
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));
JavaScript
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));
JavaScript
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));
JavaScript
Check if Apple Pay is available
import RNBraintree from '@ekreative/react-native-braintree';

console.log(RNBraintree.isApplePayAvailable())
JavaScript
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));
JavaScript

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));
JavaScript

GitHub

https://github.com/ekreative/react-native-braintree


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK