Erreur d'exécution: Classe étend la valeur [objet objet] est pas un constructeur ou null

Question

Je veux répliquer une application de démonstration de Braintree à l'aide ionique 3.

J'ai importé Braintree ... import * as braintree from 'braintree';

mais Je ne suis pas capable de me connecter à braintree.

Le message se lit comme suit ... « Erreur d'exécution: Classe étend la valeur [objet objet] est pas un constructeur ou null »

Voici le code dans mon fichier ts

import { Component } from '@angular/core'; 
import { IonicPage, NavController, NavParams, ViewController } from 'ionic-angular'; 

import * as braintree from 'braintree'; 

@IonicPage() 
@Component({ 
    selector: 'page-apply', 
    templateUrl: 'apply.html', 
}) 

export class ApplyPage { 

    gateway: any; 

    constructor(public navCtrl: NavController, public navParams: NavParams, public viewCtrl: ViewController) { 
    this.gateway = braintree.connect({ 
     environment: braintree.Environment.Sandbox, 
     merchantId: 'personalMerchantId', 
     publicKey: 'personalPublicKey', 
     privateKey: 'personalPrivateKey' 
    }); 
    } 

    ionViewDidLoad() { 
    console.log('ionViewDidLoad ApplyPage'); 
    } 


} 

C'est la code dans le fichier index.js du module

'use strict'; 

module.exports = require('./lib/braintree'); 

Et ce code se trouve dans le fichier braintree.js dont index.js points

'use strict'; 

let version = require('../package.json').version; 
let Config = require('./braintree/config').Config; 
let Environment = require('./braintree/environment').Environment; 
let BraintreeGateway = require('./braintree/braintree_gateway').BraintreeGateway; 
let errorTypes = require('./braintree/error_types').errorTypes; 

let Transaction = require('./braintree/transaction').Transaction; 

let CreditCard = require('./braintree/credit_card').CreditCard; 
let PayPalAccount = require('./braintree/paypal_account').PayPalAccount; 
let AndroidPayCard = require('./braintree/android_pay_card').AndroidPayCard; 
let ApplePayCard = require('./braintree/apple_pay_card').ApplePayCard; 
let VenmoAccount = require('./braintree/venmo_account').VenmoAccount; 
let CoinbaseAccount = require('./braintree/coinbase_account').CoinbaseAccount; 
let AmexExpressCheckoutCard = require('./braintree/amex_express_checkout_card').AmexExpressCheckoutCard; 
let VisaCheckoutCard = require('./braintree/visa_checkout_card').VisaCheckoutCard; 
let MasterpassCard = require('./braintree/masterpass_card').MasterpassCard; 

let CreditCardVerification = require('./braintree/credit_card_verification').CreditCardVerification; 
let Subscription = require('./braintree/subscription').Subscription; 
let MerchantAccount = require('./braintree/merchant_account').MerchantAccount; 
let PaymentInstrumentTypes = require('./braintree/payment_instrument_types').PaymentInstrumentTypes; 
let WebhookNotification = require('./braintree/webhook_notification').WebhookNotification; 
let TestingGateway = require('./braintree/testing_gateway').TestingGateway; 
let ValidationErrorCodes = require('./braintree/validation_error_codes').ValidationErrorCodes; 

let CreditCardDefaults = require('./braintree/test/credit_card_defaults').CreditCardDefaults; 
let CreditCardNumbers = require('./braintree/test/credit_card_numbers').CreditCardNumbers; 
let MerchantAccountTest = require('./braintree/test/merchant_account').MerchantAccountTest; 
let Nonces = require('./braintree/test/nonces').Nonces; 
let TransactionAmounts = require('./braintree/test/transaction_amounts').TransactionAmounts; 

let connect = config => new BraintreeGateway(new Config(config)); // eslint-disable-line func-style 
let Test = { 
    CreditCardDefaults: CreditCardDefaults, 
    CreditCardNumbers: CreditCardNumbers, 
    MerchantAccountTest: MerchantAccountTest, 
    Nonces: Nonces, 
    TransactionAmounts: TransactionAmounts 
}; 

module.exports = { 
    connect: connect, 
    version: version, 
    Environment: Environment, 
    errorTypes: errorTypes, 

    Transaction: Transaction, 

    CreditCard: CreditCard, 
    PayPalAccount: PayPalAccount, 
    AndroidPayCard: AndroidPayCard, 
    ApplePayCard: ApplePayCard, 
    VenmoAccount: VenmoAccount, 
    CoinbaseAccount: CoinbaseAccount, 
    AmexExpressCheckoutCard: AmexExpressCheckoutCard, 
    VisaCheckoutCard: VisaCheckoutCard, 
    MasterpassCard: MasterpassCard, 

    CreditCardVerification: CreditCardVerification, 
    Subscription: Subscription, 
    MerchantAccount: MerchantAccount, 
    PaymentInstrumentTypes: PaymentInstrumentTypes, 
    WebhookNotification: WebhookNotification, 
    TestingGateway: TestingGateway, 
    ValidationErrorCodes: ValidationErrorCodes, 

    Test: Test 
}; 

Et voici le code qui se trouve dans le fichier index.js des express.js de travail Démo

var express = require('express'); 
var router = express.Router(); 
var braintree = require('braintree'); 

var gateway = braintree.connect({ 
    environment: braintree.Environment.Sandbox, 
    merchantId: 'personalMerchantID', 
    publicKey: 'personalPublicKey', 
    privateKey: 'personal_PrivateKey' 
}); 

router.get('/', function(req, res) { 
    gateway.clientToken.generate({}, function(err, response) { 
    var token = response.clientToken; 

    res.render('index', {token : token}); 
    }); 
}); 

router.post('/add', function(req, res) { 

    var merchant_id = req.body.merchant_id; 
    var bank_account = req.body.bank_account; 
    var bank_routing = req.body.bank_routing; 

    var merchantAccountParams = { 
    individual: { 
     firstName: "Jane", 
     lastName: "Doe", 
     email: "jane@14ladders.com", 
     phone: "5553334444", 
     dateOfBirth: "1981-11-19", 
     ssn: "456-45-4567", 
     address: { 
     streetAddress: "111 Main St", 
     locality: "Chicago", 
     region: "IL", 
     postalCode: "60622" 
     } 
    }, 
    funding: { 
     destination: braintree.MerchantAccount.FundingDestination.Bank, 
     accountNumber: bank_account, 
     routingNumber: bank_routing 
    }, 
    tosAccepted: true, 
    masterMerchantAccountId: "_my_personal_master_merchant_account_ID", 
    id: merchant_id 
    }; 

    gateway.merchantAccount.create(merchantAccountParams, function (err, result) { 
    res.render('addResult', {result: result}); 
    }); 

}); 

router.get('/find', function(req, res) { 
    var merchant_id = req.query.merchant_id; 

    gateway.merchantAccount.find(merchant_id, function(err, result) { 
    res.render('findResult', {result: result, merchant_id: merchant_id}); 
    }); 

}); 

router.post('/process', function(req, res) { 
    var nonce = req.body.payment_method_nonce; 
    var total = req.body.total; 
    var service = req.body.service; 
    var merchant_id = req.body.merchant_id; 

    gateway.transaction.sale({ 
    amount: total, 
    merchantAccountId: merchant_id, 
    paymentMethodNonce: nonce, 
    serviceFeeAmount: service 
    }, function (err, result) { 
    res.render('processResult', {result: result}); 
    }); 
}); 

module.exports = router; 

Encore une fois le code ci-dessus a été produit par Braintree. Je suis sûr pour des fins de démonstration seulement.

Answer 1

Vous ne devriez pas faire cela. En incluant la bibliothèque du serveur de noeud Braintree dans le client mobile, vous exposez votre clé privée à quiconque utilise l'application. Ceci est très peu sûr. Au lieu de cela, vous devriez avoir un serveur où vous pouvez accepter un non généré par votre application pour traiter les transactions. Le plugin Braintree Cordova posté par @Sampath semble être un moyen raisonnable de générer un nonce dans votre application.

Answer 2

Il semble que vous n'utilisiez aucun plugin avec l'implémentation ci-dessus. Donc, vous devez en utiliser un. C'est le Braintree Cordova Plugin.

npm install plist 
npm install xcode 

cordova platform remove ios 
cordova plugin add https://github.com/taracque/cordova-plugin-braintree 
cordova platform add ios 

Ici, vous pouvez voir comment ajouter none native plugin à l'application Ionic.