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!