Braintree付款节点JS paymentMethodNonce

Question

Good day everyone,

I am trying to workout Braintree payment system using NodeJs. The view is rendered using HandleBars (HBS), and then upon submision the payment is processed in payment.js. My issue is in the view, the braintree payment by credit card or by paypal container does not display. I am not sure if its because HBS does not support script tags, but i need to grab the paymentMethodNonce code and then inject into payment.js file

Below is the view file

payment.hbs file

<h1> This package will cost you 7$ </h1>
<h3> You can pay via credit card or using paypal </h3>
            <form action="/pickup/payment/process" method="post">
            <fieldset>
                <div class="pure-g">
                </div>

                <br>

                <div id="checkout"></div>

                <b

    utton class="btn-submit" type="submit">Pay now</button>

                </fieldset>
            </form>
        </div>
        <br>
    <br><br>


    <script src="https://js.braintreegateway.com/js/braintree-2.27.0.min.js"></script>
        <script>
            braintree.setup('<%- clientToken %>', 'dropin', {
                container: 'checkout'
            });
        </script>

        <a href="https://www.braintreegateway.com/merchants/ID/verified" target="_blank">
      <img src="https://s3.amazonaws.com/braintree-badges/braintree-badge-wide-dark.png" width="280px" height ="44px" border="0"/>

  </a>

payment.js file

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

var bodyParser = require('body-parser');


var parseUrlEnconded = bodyParser.urlencoded({
});


var util = require('util'),
    braintree = require('braintree');

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

gateway.transaction.sale({
  amount: '7.00',  extended: false

  paymentMethodNonce: "nonce-from-the-client",
  options: {
    submitForSettlement: true
  }
},
  function(err, result) {
    if (result) {
      if (result.success) {
        console.log("Transaction ID: " + result.transaction.id)
      } else {
        console.log(result.message)
      }
    } else {
      console.log(err)
    }
});

Any help will be appreciated. For any clarification, let me know.

Answer 1

Dropin UI will load only when clientToken is provided. You must add new method at payment.js backend to generate client token. Call this method from your frontend and pass clientToken.

btClientToken:function(req,res){

        gateway.clientToken.generate({}, function (err, response) {
            if(err){
                res.status(400).json({'message':err});
            }else{
                res.status(200).json({clientToken: response.clientToken});
            }
        });
    }