Archive

Archive for the ‘Uncategorized’ Category

Paypal Payment Buttons with Meteor

July 30, 2014 Leave a comment

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.

 

Categories: Uncategorized

Rows Without Grouping

October 19, 2013 Leave a comment

Disclaimer: I am using bootstrap 3 for this webapplication so I will be referencing rows and columns as .row and .col-lg-# respectively.

Recently I started working on a feature for an application that required rows of elements with 4 elements per row. This was easy enough using Rails with the in_groups_of method and doing each grouping inside a .row. The problem came in when I wanted to allow these elements to be removed. I did not want to refresh the page but wanted the removed elemented to be taken out of the flow the page.

Enter CSS’s nth-child pseudo class. I was able to create a class called .row-4 and inside, added the following css:

.row.row-4 {

    .col-lg-3:nth-child(4n+1) { clear: left; }

    .col-lg-3:nth-child(4n) { clear: right; }

}

    I was then able to use jquery’s animate functionality to do: animate({‘width’: 0, ‘opacity’: 0}, function(){ $(this).remove(); }); to slide the element over  as it fades out and then remove it. While this caused a little bit of jumping, it was much more visually friendly than removing the element. and having everything jump.

    There is still a problem in that the text of the element, as it’s being smashed down horizontally begins to expand vertically. This, for a brief moment would cause the element below to be pushed way down then jump back when the element is removed. I solved this by using the styles: white-space: nowrap; and text-overflow: hidden because I only had a heading.

Categories: Uncategorized