Braintree hosted fields integration with MeteorJS


#1

I’m creating an Online Shop with MeteorJS. I integrated Braintree payments and it’s working successfully using the drop-in UI. I was using this tutorial: https://blog.michaltakac.com/processing-payments-in-meteor-apps-using-braintree-part-1-transactions-bb2f4811dd63#.fqb5106l3

However, problems began when I tried using my own form. I always get this error:

Object {type: "VALIDATION", message: "User did not enter a payment method"}

client/checkout.js

Template.checkout.onRendered(function() {
Meteor.call('billing.getClientToken', function(error, clientToken) {
  if (error) {
    console.log(error);
  } else {
    console.log(clientToken);
    braintree.setup(clientToken, "custom", {
      id: "payment-form", 
      hostedFields: {
        number: {
          selector: "#card-number"
        },
        cvv: {
          selector: "#cvv"
        },
        expirationDate: {
          selector: "#expiration"
        }
      },
      onPaymentMethodReceived: function (response) {
        // When we submit the payment form,
        // it'll create new customer first...
        var nonce = response.nonce;

        Meteor.call('billing.btCreateCustomer', function(error, success) {
          if (error) {
            throw new Meteor.Error('customer-creation-failed');
          } else {
            // ... and when the customer is successfuly created,
            // call method for creating a transaction (finally!)
            Meteor.call('billing.createTransaction', nonce, function(error, success) {
              if (error) {
                throw new Meteor.Error('transaction-creation-failed');
              } else {
                alert('Thank you for your payment! Reload page to access our premium items!');
              }
            });
          }
        });
      }
    });
  }
});
});

client/checkout.html

<form role="form" id="payment-form">

                <div class="row row_measures">
                  <div class="col s1"></div>
                  <div class="input-field col s10 card_first_name">
                    <input id="card-number" type="text" class="validate input_measures">
                    <label for="card-number">Card number</label>
                  </div>
                  <div class="col s1"></div>
                </div>

                <div class="row row_measures">
                  <div class="col s1"></div>
                  <div class="input-field col s6 card_first_name">
                    <input id="expiration" type="text" class="validate input_measures">
                    <label for="expiration">Expiration Date (MM/YYYY)</label>
                  </div>

                  <div class="input-field col s3 card_last_name">
                    <input id="cvv" type="text" class="validate input_measures">
                    <label for="cvv">CVV</label>
                  </div>
                  <div class="col s1"></div>
                </div>

                <div class="center-align">
                  <input type="submit" class="waves-effect waves-light btn">
                </div>
                </div>
              </form>

Server-side methods are completely the same as in the tutorial.
I believe somebody could help me out!