Paypal Braintree

$ ionic cordova plugin add https://github.com/Yomyer/cordova-plugin-paypalbraintree.git
$ npm install @yomyer/paypal-braintree

Supported platforms

• Android
• iOS
• Browser

How it works

Your app or web front-end requests a client token from your server in order to initialize the client SDK Your server generates and sends a client token back to your client with the server SDK Once the client SDK is initialized and the customer has submitted payment information, the SDK communicates that information to Braintree, which returns a payment method nonce You then send the payment method nonce to your server Your server code receives the payment method nonce from your client and then uses the server SDK to create a transaction or perform other functions.

Client token

A client token is a signed data blob that includes configuration and authorization information required by the Braintree client SDK. These should not be reused; a new client token should be generated for each request that's sent to Braintree. For security, we will revoke client tokens if they are reused excessively within a short time period.

Your server is responsible for generating the client token, which contains all of the necessary configuration information to set up the client SDKs. When your server provides a client token to your client, it authenticates the application to communicate directly to Braintree.

Your client is responsible for obtaining the client token from your server and initializing the client SDK.

Prepare your server (nodejs)

Install Braintree server

$ npm install braintree

Config your nodejs server

app.js

const express = require('express')
const braintree = require('braintree')
const bodyParser = require('body-parser');
const app = express()
const port = 3000

var gateway = braintree.connect({
    accessToken: 'ACCESS_TOKEN_BRAINTREE'
});

app.use(bodyParser.json({ limit: '10mb' }));
app.use(bodyParser.urlencoded({ extended: false, limit: '10mb' }));
app.use(function (req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    next();
});


app.get('/braintree/token', (req, res) => {
    gateway.clientToken.generate({}, function (err, response) {
        res.json(response.clientToken);
    });
});

app.post('/braintree/checkout', (req, res) => {
    var saleRequest = {
        amount: '180',
        paymentMethodNonce: req.body.nonce,
        options: {
            submitForSettlement: true,
        }
    };

    gateway.transaction.sale(saleRequest, function (err, result) {
        console.log(err, result);
        if (err || !result.success) {
            return res.status(500).json({ status: 'error' });
        }
        return res.status(200)
            .json({ status: 'success', id: result.transaction.id });
    });
});

app.listen(port, () => console.log(`Example app listening on port ${port}!`))

Usage (ionic)

app.module.ts

import { PaypalBraintree } from '@yomyer/paypal-braintree/ngx';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
  providers: [
    StatusBar,
    SplashScreen,

    PaypalBraintree,

    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

app.component.ts

import { Component, ViewChild, ElementRef } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { PaypalBraintree } from '@yomyer/paypal-braintree/ngx';

@Component({
  selector: 'app-component',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss'],
})
export class HomePage {

    @ViewChild('button', { read: ElementRef }) button: ElementRef;

    constructor(
        private http: HttpClient,
        private paypalBraintree: PaypalBraintree
    ) {
        this.http.get('http://localhost:3000/braintree/token').subscribe(token => {
            this.paypalBraintree.initialize(token.toString(), {
                amount: '180',
                description: 'Description',
                name: 'vendor',
                element: this.button.nativeElement,
                locale: 'es_ES',
                env: 'sandbox',
                items: [
                {
                    quantity: '1',
                    unitAmount: '180',
                    name: 'Name of article',
                    productCode: 'UAD-12345121-2',
                }
                ],
                onError: response => {
                    console.log(response.error);
                },
                onAuthorize: response => {
                    if (!response.userCancelled) {
                        this.http.post('http://localhost:3000/braintree/checkout', {
                        nonce: response.nonce
                        }, { responseType: 'json' }).subscribe(result => {
                        console.log(result);
                        });
                    }
                },
                onClick: () => {
                    // What you want me to do when user click the button
                },
                onRender: () => {
                    // What you want me to do when paypal is ready
                }
            });
        });
    }

    pay() {
        this.paypalBraintree.checkout();
    }
}

app.component.html

<ion-header>
  <ion-toolbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <div class="ion-padding">
    <ion-button (click)="pay()" #button>Pay</ion-button>
  </div>
</ion-content>