Permalink
Browse files

Adding Pay by Credit Card as an option to feed chooser dialog. Thus c…

…oncludes Stripe.js integration. Time to launch!
  • Loading branch information...
1 parent 0cdba5d commit fa917389a84cf31dfc827c00f391f836e7006a44 @samuelclay committed Feb 29, 2012
View
@@ -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):
@@ -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',
View
@@ -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
@@ -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)
@@ -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,
})
View
@@ -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')
View
@@ -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;
}
@@ -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;
@@ -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 {
@@ -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')
]),
@@ -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"
+ ])
+ ])
])
])
])
@@ -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);
@@ -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');
@@ -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);
}
},
@@ -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;
@@ -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>
@@ -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.