pricing-widget

Accept online payments by credit card.

This module provides only the browser interface code necessary for accepting online payments.

We use this widget code at browserling which you should definitely check out if you need to do some cross-browser testing!

example

The default style looks like this, but you can get fancy.

var pricing = require('pricing-widget');
var plans = pricing(function (payment) {
    console.log('purchased ' + payment.name);
    payment.accept();
});
plans.appendTo(document.body);

plans.add('free', {
    price: 0,
    per: 'month',
    image: 'images/free.png',
    description: 'Great for students, casual cross-browser testing,'
        + ' and product evaluation',
    features: [ '5-minute sessions' ],
    more: [
        'Use browserling for 5 minutes at a time as much as you like.',
        'Sometimes you\'ll need to wait in a queue if the site is busy.'
    ]
});

plans.add('developer', {
    price: 20,
    per: 'month',
    image: 'images/developer.png',
    description: 'Perfect for designers, front-end developers, and freelancers'
        + ' who need to check their work against all the browsers.',
    features: [ 'unlimited sessions', 'ssh tunnels' ],
    more: [
        'Use browserling for as long as you need, as much as you like.',
        'SSH tunnels to access localhost and intranet services'
    ]
});

plans.add('team', {
    price: {
        equation: '20 + 10 * (n - 1)',
        formula: function (n) { return 20 + 10 * (n - 1) },
        min: 2,
        max: 10,
        init: 2
    },
    per: 'month',
    image: 'images/team.png',
    description: 'Perfect for whole teams of designers and developers!',
    features: [ 'unlimited sessions', 'ssh tunnels' ],
    more: [
        'Use browserling for as long as you need, as much as you like.',
        'SSH tunnels to access localhost and intranet services',
        'Share a plan among your whole team!'
    ]
});

methods

var plans = pricing(opts={}, cb)

Create a new pricing widget.

You can optionally set the opts.path root to use for push-state routing.

cb is an optional shortcut to listen on 'payment' events.

plans.appendTo(target)

Append the plans.element dom node to the dom element or query selector string target.

plans.add(name, plan)

Add a plan object with a string name.

plan should have a:

• plan.description - text to briefly describe the plan
• plan.image - the image to show for the plan
• plan.price - the amount to pay

plan.price can get fancy, as in the example above that uses a formula function starting at init and constrained between min and max with equation as a formula description.

plan can optionally have:

• plan.per - payment interval, if applicable
• plan.features - short list to show below the plan name
• plan.more - long-form string to describe the plan when clicked on

plans.note(page, msg)

There are several places in the UI where you can add some notes to the html;

'currency', 'purchase', 'busy', and 'success' are all valid page locations.

plans.setCurrency(name)

Set a currency name different from the default name 'USD'.

plans.setSymbol(symbol)

Set a currency symbol different from the default symbol '$'.

payment.accept()

Accept a 'payment' object from a payment event, showing the user the success page.

payment.reject(err)

Reject a 'payment' object from a payment event, showing the error page with the err message.

events

plans.on('payment', function (payment) {})

When somebody clicks the purchase button, this payment event fires.

At this point you should make the api calls out to your payment processor and then call either payment.accept() or payment.reject(errMessage) to show the user what the result of the transaction is.

The parameters to payment are designed to fit well with the stripe create_charge api endpoint. The keys in payment are:

• name
• number
• amount
• cvc
• exp_month
• exp_year

attributes

plans.element

This is the raw dom node that pricing-widget appends all its html content to if you don't want to use .appendTo().

install

With npm do:

$ npm install pricing-widget

Then use browserify to require('pricing-widget').

license

MIT