browser widget to accept payments by credit card
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!
var pricing = require'pricing-widget';var plans = pricingconsole.log'purchased ' + paymentname;paymentaccept;;plansappendTodocumentbody;plansadd'free'price: 0per: '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.';plansadd'developer'price: 20per: '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';plansadd'team'price:equation: '20 + 10 * (n - 1)'return 20 + 10 * n - 1min: 2max: 10init: 2per: '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!';
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
plans.element dom node to the dom element or query selector string
plan object with a string
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
function starting at
init and constrained between
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
There are several places in the UI where you can add some notes to the html;
'success' are all valid
Set a currency
name different from the default name
Set a currency
symbol different from the default symbol
'payment' object from a payment event, showing the user the success
'payment' object from a payment event, showing the error page with
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.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
This is the raw dom node that pricing-widget appends all its html content to if
you don't want to use
With npm do:
$ npm install pricing-widget
Then use browserify to