Lukas Navickas Lukas Navickas - 1 month ago 17
Node.js Question

Braintree hosted fields integration with MeteorJS

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 got this error:


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


I followed the official tutorial and I'm pretty sure I included hosted fields correctly. Please take a look at my code:

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 this tutorial: https://blog.michaltakac.com/processing-payments-in-meteor-apps-using-braintree-part-1-transactions-bb2f4811dd63#.fqb5106l3

I tend to believe that the custom fields are not read (correctly). How can I solve this problem?

Thank you in advance.

Answer

Check out this example. Your checkout.html form has the inputs set up as input elements, but when using Hosted Fields, you should call out the Hosted Fields by using a div element.