Paypal Payment Buttons with Meteor

Recently I began investigating how one would use Paypal’s Payment buttons (http://paypal.github.io/JavaScriptButtons/) with Meteor. Since I wrote the Paypal Meteor package (http://github.com/davidbrear/meteor-paypal) I figured I would address this question. Contrary to what you would believe, to use Meteor with this payment option, you do not need to add the meteor-paypal package. Here are the steps required to get the buttons working with your meteor application.

 

Setup your Paypal Developer

This can be done on http://developer.paypal.com. You will need this sandbox account to test that your button is working correctly. This information will be used to create the button.

Setup the Button Itself

Follow the instructions on the page at: http://paypal.github.io/JavaScriptButtons/ to set up the button and for testing purposes change the callback url to something like http://localhost:3000/paypalCallback. This will be used on your development machine to verify the callback is being hit. You will need to change this when you deploy your application to your production URL.

Add a Route To Your Application

Using a plugin such as IronRouter set up a route. For our example here we will use paypallCallback as our callback route. That means locally you can address our callback route with http://localhost:3000/paypalCallback and on a production system it would be http://mysite.com/paypalCallback.

In the router, I have setup the code:

Router.map(function() {

this.route(‘/paypalCallback’, {

where: ‘server’,

action: function() { Meteor.call(‘callBackendCode’, this.params, function(err, res) {

console.log(‘got the response’);

console.log(res);

}}

});

});

Add a Meteor Method

In the server directory create a js file to hold the server call. I named mine paypal_secret.js. Inside this file I created the Meteor method I’m going to be calling:

Meteor.methods({

callBackendCode: function(params) {

console.log(‘you sent up the parameters’ + params);

//here you will do all your paypal tracking. The params should have information regarding the customer.

}

});

Add the Form to the Page

This is where you need to customize the form to fit the element you’re looking to sell. Copy the following form into your template and replace the values in blue:

<form method=”post” action=”https://www.sandbox.paypal.com/cgi-bin/webscr&#8221; class=”paypal-button” target=”_top” style=”opacity: 1;”>

    <div class=”hide” id=”errorBox”></div>

    <input type=”hidden” name=”button” value=”buynow”>

    <input type=”hidden” name=”business” value=”YOUR EMAIL“>

    <input type=”hidden” name=”item_name” value=”ITEM NAME“>

    <input type=”hidden” name=”quantity” value=”THE QUANTITY“>

    <input type=”hidden” name=”amount” value=”THE PRICE“>

    <input type=”hidden” name=”currency_code” value=”THE CURRENCY (usually set to ‘USD’)“>

    <input type=”hidden” name=”shipping” value=”THE SHIPPING COST“>

    <input type=”hidden” name=”tax” value=”THE TAX AMOUNT“>

    <input type=”hidden” name=”notify_url” value=”http://localhost:3000/paypalCallback”&gt;

    <input type=”hidden” name=”env” value=”www.sandbox”>

    <input type=”hidden” name=”cmd” value=”_xclick”>

    <input type=”hidden” name=”bn” value=”JavaScriptButton_buynow”>

    <button type=”submit” class=”paypal-button large”>Buy Now</button>

 

  </form>

For a reference you can Create & Preview a button and then inspect the code for the button to find the form it created.