Skip to content

Commit

Permalink
Adding Pay by Credit Card as an option to feed chooser dialog. Thus c…
Browse files Browse the repository at this point in the history 
…oncludes Stripe.js integration. Time to launch!
  • Loading branch information
@samuelclay
samuelclay committed Feb 29, 2012
1 parent 0cdba5d commit fa91738
Show file tree
Hide file tree
Showing 7 changed files with 100 additions and 36 deletions.
9 changes: 5 additions & 4 deletions apps/profile/forms.py
View file
@@ -1,10 +1,11 @@
from django import forms
from vendor.zebra.forms import StripePaymentForm
from django.utils.safestring import mark_safe

PLANS = [
(1, mark_safe("$12 / year <span class='NB-small'>($1/month)</span>")),
(2, mark_safe("$24 / year <span class='NB-small'>($2/month)</span>")),
(3, mark_safe("$36 / year <span class='NB-small'>($3/month)</span>")),
("newsblur-premium-12", mark_safe("$12 / year <span class='NB-small'>($1/month)</span>")),
("newsblur-premium-24", mark_safe("$24 / year <span class='NB-small'>($2/month)</span>")),
("newsblur-premium-36", mark_safe("$36 / year <span class='NB-small'>($3/month)</span>")),
]

class HorizRadioRenderer(forms.RadioSelect.renderer):
Expand All @@ -23,7 +24,7 @@ def __init__(self, *args, **kwargs):
super(StripePlusPaymentForm, self).__init__(*args, **kwargs)
self.fields['email'].initial = email
if plan:
self.fields['plan'].initial = int(plan)
self.fields['plan'].initial = plan

email = forms.EmailField(widget=forms.TextInput(attrs=dict(maxlength=75)),
label='Email address',
Expand Down
7 changes: 4 additions & 3 deletions apps/profile/views.py
View file
Expand Up @@ -11,7 +11,7 @@
from django.conf import settings
from apps.profile.models import Profile, change_password
from apps.reader.models import UserSubscription
from apps.profile.forms import StripePlusPaymentForm
from apps.profile.forms import StripePlusPaymentForm, PLANS
from utils import json_functions as json
from utils.user_functions import ajax_login_required
from vendor.paypal.standard.forms import PayPalPaymentsForm
Expand Down Expand Up @@ -201,7 +201,8 @@ def stripe_form(request):
user = request.user
success_updating = False
stripe.api_key = settings.STRIPE_SECRET
plan = request.GET.get('plan', 2)
plan = int(request.GET.get('plan', 2))
plan = PLANS[plan-1][0]

if request.method == 'POST':
zebra_form = StripePlusPaymentForm(request.POST, email=user.email)
Expand All @@ -211,7 +212,7 @@ def stripe_form(request):

customer = stripe.Customer.create(**{
'card': zebra_form.cleaned_data['stripe_token'],
'plan': int(zebra_form.cleaned_data['plan']),
'plan': zebra_form.cleaned_data['plan'],
'email': user.email,
'description': user.username,
})
Expand Down
2 changes: 2 additions & 0 deletions fabfile.py
View file
Expand Up @@ -134,12 +134,14 @@ def celery():
celery_stop()
celery_start()

@parallel
def celery_stop():
with cd(env.NEWSBLUR_PATH):
run('sudo supervisorctl stop celery')
with settings(warn_only=True):
run('./utils/kill_celery.sh')

@parallel
def celery_start():
with cd(env.NEWSBLUR_PATH):
run('sudo supervisorctl start celery')
Expand Down
33 changes: 28 additions & 5 deletions media/css/reader.css
View file
Expand Up @@ -5189,16 +5189,38 @@ background: transparent;

.NB-modal-feedchooser .NB-feedchooser-paypal {
min-height: 48px;
width: 135px;
width: 50%;
text-align: center;
overflow: hidden;
float: right;
float: left;
clear: both;
padding: 16px 0 0;
}

.NB-modal-feedchooser .NB-feedchooser-paypal img {
margin: 0 auto;
}
.NB-modal-feedchooser .NB-feedchooser-stripe {
min-height: 48px;
width: 44%;
text-align: center;
overflow: hidden;
float: left;
margin-top: 16px;
padding-left: 12px;
border-left: 1px solid #C6B400;
}

.NB-modal-feedchooser .NB-feedchooser-stripe .NB-modal-submit-green {
-moz-box-shadow:2px 2px 0 #E2D121;
box-shadow:2px 2px 0 #E2D121;
}
.NB-modal-feedchooser .NB-creditcards img {
width: 28px;
margin: 4px 2px 0 0;
}
.NB-modal-feedchooser .NB-feedchooser-dollar {
float: left;
margin: 0px 0px 0px 0;
margin: 0px auto;
padding: 4px 0 4px 2px;
font-weight: bold;
}
Expand All @@ -5223,7 +5245,7 @@ background: transparent;
width: 40px;
height: 40px;
top: 0;
left: 0;
left: -40px;
}
.NB-modal-feedchooser .NB-feedchooser-dollar-value.NB-selected.NB-1 .NB-feedchooser-dollar-image {
top: -8px;
Expand All @@ -5245,6 +5267,7 @@ background: transparent;
display: inline;
padding: 0 4px 0 0;
font-size: 15px;
position: relative;
}

.NB-modal-feedchooser .NB-selected .NB-feedchooser-dollar-month {
Expand Down
79 changes: 58 additions & 21 deletions media/js/newsblur/reader_feedchooser.js
View file
Expand Up @@ -31,20 +31,20 @@ NEWSBLUR.ReaderFeedchooser.prototype = {

this.$modal = $.make('div', { className: 'NB-modal-feedchooser NB-modal' }, [
$.make('h2', { className: 'NB-modal-title' }, 'Choose Your '+this.MAX_FEEDS),
$.make('h2', { className: 'NB-modal-subtitle' }, [
$.make('b', [
'You have a ',
$.make('span', { style: 'color: #303060;' }, 'Standard Account'),
', which can follow up to '+this.MAX_FEEDS+' sites.'
]),
'You can always change these.'
]),
$.make('div', { className: 'NB-feedchooser-type'}, [
$.make('div', { className: 'NB-feedchooser-info'}, [
$.make('div', { className: 'NB-feedchooser-info-type' }, [
$.make('span', { className: 'NB-feedchooser-subtitle-type-prefix' }, 'Free'),
' Standard Account'
]),
$.make('h2', { className: 'NB-modal-subtitle' }, [
$.make('b', [
'You have a ',
$.make('span', { style: 'color: #303060;' }, 'Standard Account'),
', which can follow up to '+this.MAX_FEEDS+' sites.'
]),
'You can always change these.'
]),
$.make('div', { className: 'NB-feedchooser-info-counts'}),
$.make('div', { className: 'NB-feedchooser-info-sort'}, 'Auto-Selected By Popularity')
]),
Expand Down Expand Up @@ -101,23 +101,49 @@ NEWSBLUR.ReaderFeedchooser.prototype = {
]),
$.make('div', { className: 'NB-modal-submit NB-modal-submit-paypal' }, [
// this.make_google_checkout()
$.make('div', { className: 'NB-feedchooser-paypal' }),
$.make('div', { className: 'NB-feedchooser-dollar' }, [
$.make('div', { className: 'NB-feedchooser-dollar-value NB-1' }, [
$.make('div', { className: 'NB-feedchooser-dollar-image' }),
$.make('div', { className: 'NB-feedchooser-dollar-month' }, '$12/year'),
$.make('div', { className: 'NB-feedchooser-dollar-month' }, [
$.make('div', { className: 'NB-feedchooser-dollar-image' }),
'$12/year'
]),
$.make('div', { className: 'NB-feedchooser-dollar-year' }, '($1/month)')
]),
$.make('div', { className: 'NB-feedchooser-dollar-value NB-2' }, [
$.make('div', { className: 'NB-feedchooser-dollar-image' }),
$.make('div', { className: 'NB-feedchooser-dollar-month' }, '$24/year'),
$.make('div', { className: 'NB-feedchooser-dollar-month' }, [
$.make('div', { className: 'NB-feedchooser-dollar-image' }),
'$24/year'
]),
$.make('div', { className: 'NB-feedchooser-dollar-year' }, '($2/month)')
]),
$.make('div', { className: 'NB-feedchooser-dollar-value NB-3' }, [
$.make('div', { className: 'NB-feedchooser-dollar-image' }),
$.make('div', { className: 'NB-feedchooser-dollar-month' }, '$36/year'),
$.make('div', { className: 'NB-feedchooser-dollar-month' }, [
$.make('div', { className: 'NB-feedchooser-dollar-image' }),
'$36/year'
]),
$.make('div', { className: 'NB-feedchooser-dollar-year' }, '($3/month)')
])
]),
$.make('div', { className: 'NB-feedchooser-processor' }, [
$.make('div', { className: 'NB-feedchooser-paypal' }, [
$.make('img', { src: NEWSBLUR.Globals.MEDIA_URL + '/img/reader/logo-paypal.png', height: 30 }),
$.make('div', { className: 'NB-feedchooser-paypal-form' })
]),
$.make('div', { className: 'NB-feedchooser-stripe' }, [
$.make('div', { className: 'NB-creditcards' }, [
$.make('img', { src: "https://manage.stripe.com/img/credit_cards/visa.png" }),
$.make('img', { src: "https://manage.stripe.com/img/credit_cards/mastercard.png" }),
$.make('img', { src: "https://manage.stripe.com/img/credit_cards/amex.png" }),
$.make('img', { src: "https://manage.stripe.com/img/credit_cards/discover.png" })
]),
$.make('div', {
className: "NB-stripe-button NB-modal-submit-button NB-modal-submit-green"
}, [
"Pay by",
$.make('br'),
"Credit Card"
])
])
])
])
])
Expand All @@ -126,7 +152,7 @@ NEWSBLUR.ReaderFeedchooser.prototype = {

make_paypal_button: function() {
var self = this;
var $paypal = $('.NB-feedchooser-paypal', this.$modal);
var $paypal = $('.NB-feedchooser-paypal-form', this.$modal);
$.get('/profile/paypal_form', function(response) {
$paypal.html(response);
self.choose_dollar_amount(2);
Expand Down Expand Up @@ -374,6 +400,10 @@ NEWSBLUR.ReaderFeedchooser.prototype = {
});
},

open_stripe_form: function() {
window.location.href = "https://" + NEWSBLUR.URLs.domain + "/profile/stripe_form?plan=" + this.plan;
},

update_homepage_count: function() {
var $count = $('.NB-module-account-feedcount');
var $button = $('.NB-module-account-upgrade');
Expand All @@ -384,17 +414,19 @@ NEWSBLUR.ReaderFeedchooser.prototype = {
$('.NB-module-account-trainer').removeClass('NB-hidden').hide().slideDown(500);
},

choose_dollar_amount: function(step) {
choose_dollar_amount: function(plan) {
var $value = $('.NB-feedchooser-dollar-value', this.$modal);
var $input = $('input[name=a3]');

this.plan = plan;

$value.removeClass('NB-selected');
$value.filter('.NB-'+step).addClass('NB-selected');
if (step == 1) {
$value.filter('.NB-'+plan).addClass('NB-selected');
if (plan == 1) {
$input.val(12);
} else if (step == 2) {
} else if (plan == 2) {
$input.val(24);
} else if (step == 3) {
} else if (plan == 3) {
$input.val(36);
}
},
Expand Down Expand Up @@ -427,6 +459,11 @@ NEWSBLUR.ReaderFeedchooser.prototype = {
this.close_and_add();
}, this));

$.targetIs(e, { tagSelector: '.NB-stripe-button' }, _.bind(function($t, $p) {
e.preventDefault();
this.open_stripe_form();
}, this));

$.targetIs(e, { tagSelector: '.NB-feedchooser-dollar-value' }, _.bind(function($t, $p) {
e.preventDefault();
var step;
Expand Down
2 changes: 1 addition & 1 deletion templates/mail/email_base.xhtml
View file
Expand Up @@ -46,7 +46,7 @@
<p style="line-height: 20px;">There's plenty of ways to use NewsBlur beyond the website:</p>
<p style="line-height: 20px;">
<ul style="list-style: none;">
<li style="line-height:22px;"><a href="http://www.newsblur.com/iphone/" style="text-decoration:none"><img src="http://www.newsblur.com/media/img/reader/iphone_icon.png" style="width:16px;height:16px;vertical-align:top;padding-top:3px;"> <i>Download the free iPhone App</i></a></li>
<li style="line-height:22px;"><a href="http://www.newsblur.com/iphone/" style="text-decoration:none"><img src="http://www.newsblur.com/media/img/reader/iphone_icon.png" style="width:16px;height:16px;vertical-align:top;padding-top:3px;"> Download the free iPhone App</a></li>
<li style="line-height:22px;"><a href="https://market.android.com/details?id=bitwrit.Blar" style="text-decoration:none"><img src="http://www.newsblur.com/media/img/reader/android_icon.png" style="width:16px;height:16px;vertical-align:top;padding-top:3px;"> Download the Android App on the Android Market</a>.</li>
<li style="line-height:22px;"><a href="http://www.newsblur.com{{ user.profile.autologin_url }}?next=goodies" style="text-decoration:none"><img src="http://www.newsblur.com/media/img/icons/silk/package_green.png" style="width:16px;height:16px;vertical-align:top;padding-top:3px;"> Download browser extensions for Safari, Firefox, and Chrome</a>.</li>
</ul>
Expand Down
4 changes: 2 additions & 2 deletions vendor/paypal/standard/conf.py
View file
Expand Up @@ -16,6 +16,6 @@ class PayPalSettingsError(Exception):

# Images
IMAGE = getattr(settings, "PAYPAL_IMAGE", "http://images.paypal.com/images/x-click-but01.gif")
SUBSCRIPTION_IMAGE = "https://www.paypal.com/en_US/i/btn/btn_subscribeCC_LG.gif"
SUBSCRIPTION_IMAGE = "https://www.paypal.com/en_US/i/btn/btn_subscribe_LG.gif"
SANDBOX_IMAGE = getattr(settings, "PAYPAL_SANDBOX_IMAGE", "https://www.sandbox.paypal.com/en_US/i/btn/btn_buynowCC_LG.gif")
SUBSCRIPTION_SANDBOX_IMAGE = "https://www.sandbox.paypal.com/en_US/i/btn/btn_subscribeCC_LG.gif"
SUBSCRIPTION_SANDBOX_IMAGE = "https://www.sandbox.paypal.com/en_US/i/btn/btn_subscribe_LG.gif"

0 comments on commit fa91738

Please sign in to comment.