I am in desperate need of help with my current project. I’ve been trying to Google and find a solution to this problem all day today but nothing seems to be of help.
What I am having trouble with is integrating Braintree payments in the checkout page of my website.
Basically, I have a page with 6 different pricing options. Once an option is selected (e.g. the “Buy Now” button is clicked), the app redirects to “checkout.html” template. The “checkout.html” template contains a form that has the pricing option pre-selected. All that needs to be done is to either checkout using credit card details or PayPal payment.
I just copied the server.js contents, and it seems to work fine. Although I do understand generating tokens and everything, I just can’t get my head around passing data from the template and actually checking out using that data.
What I am looking for is the most bare bones code to get this working that is simple to understand.
I hope someone can help me.
P.S.: I have looked into Stripe and other options, but I have to have credit card as well as PayPal payment options integrated.
The example you referenced shows how to do this. When the customer details and payment information form loads (client/home.html and client/js/home.js), Braintree is initialized via the initializeBraintree function. Part of this initialization is to register a Braintree component into the template, attached to the identified container attribute (in this case the #dropin div). This initialization also registers a callback function called paymentMethodNonceReceived which will be triggered when the payment form is submitted. When the customer clicks on the submit button, submits the form, and triggers the paymentMethodNonceReceived callback, the form contents are serialized via the serializeForm function, then fired into the createTransaction Meteor method. This method then takes care of firing these details into Braintree using the Braintree npm package.
I understand the process of by reading the code, but when I copy paste it almost exactly like it is in the example (only to fit my template), the PayPal form never drops in.
Also, he is using a very strange method for collecting data from the form in the template.
Do you know any other examples that are easier to follow? I watched Stripe videos on youtube and it is incredibly easy to setup, unlike Braintree.
I think this example is pretty easy to follow. Do you see any console errors? Are you able to run the braintree-meteor-example successfully using your credentials?
After a bit of tinkering with I got the server side working fine. However, still having trouble with the client side. I still don’t understand how to submit the form and process the payments when the submit button is clicked.
Right now, the example I posted drops in an express check out form. I got that working by just copy pasting, but I wish to rewrite this completely so I understand the code.
It is a custom form, but still uses BrainTree API. I would like to make my checkout form exactly like that. Although with more pricing options in form of radio buttons or a select field.
I attached a picture if you can’t access that page without logging in to your account.
So I’ve never worked with Braintree, but in my experience with other payment APIs, you can pretty much either use their iframe/dropin checkout form, or create your own customized checkout experience. The second option requires credit card tokenization and is actually a good deal more complicated than using the first option.
I also got in touch with BT support on Twitter and they pointed me to their support email, saying those guys would be happy to help. Let’s see how it goes, hopefully they can give me a bit of assistance with.
Actually I just realised that the article you posted is a better way to process payments without PCI compliance hassles. I will just implement it that way directly then.
