Braintree payment nodeJS 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.

From the docs, it seems like you need <input type="hidden" name="payment-method-nonce"> — Taku
Thank you for that, and I thinking adding that input could establish the link between those pages, but my primary issue is that the payment container included in the view does not display upon launch. The only thing that shows up is the braintree logo — code_legend
You can see what's happened to that element by right click -> Inspect Element — Taku
Full Disclosure: I work at Braintree. It looks like there are several different things going on here. You're likely to have better luck reaching out to Braintree's support team. — cooljake

Karthik Karthik · Accepted Answer · 2017-01-25T11:59:37

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

Braintree payment nodeJS paymentMethodNonce

1 Answers