Why we use Stripe payment integration for our shopping cart.

Michael Ruescher

Cash MoneyWhen we went looking for a payment gateway to integrate with our new Ecommerce theme, we had one condition: Whichever provider we went with, they would have to be true to Webpops credo of providing complete control over the markup, something that empowers our customers to craft truly custom sites and webapps.

Of the many options that are out there, Stripe won us over for its speed of integration, simple API and all around great experience provided by its documentation and customer service.

Stripe Integration

Stripe integration is really easy to setup. Here’s the official docs for it. But basically, here’s what happens.

  1. A customer inputs their credit card info into a standard html form.
  2. You use jQuery to collect the form values and pass them on to stripe.js.
  3. Stripe.js then turns that sensitive credit card info into an encrypted token using your stripe public key and then sends that token directly to Stripe’s servers.
  4. Once Stripe verifies the card it sends back a “single use token” which you then submit back to their server with the transaction details of the charge you wish to make.

Here's the client side javascript for steps 2 & 3:

$(document).ready(function() {
  $("#confirmation-form").submit(function(event) {
    // disable the submit button to prevent repeated clicks
    $('.submit-button').attr("disabled", "disabled");

      number: $('.card-number').val(),
      cvc: $('.card-cvc').val(),
      exp_month: $('.card-expiry-month').val(),
      exp_year: $('.card-expiry-year').val()
    }, stripeResponseHandler);

    // prevent the form from submitting with the default action
    return false;

Here's the server side Javascript for Step 4.

exports.charge = function(options, enclosed, scope) {
  if (request.request_method === "POST") {
    var token = request.params.stripeToken;

    var response = http.request({
      url: url,
      type: "POST",
      username: credentials().secret_key,
      data: {
        amount: options.amount,
        currency: options.currency || "USD",
        card: token,
        description: options.description || ""

    var id = JSON.parse(response.body).id;

    if (response.status == 200) {
      return {success: true, stripe_id: id}
    } else {
      return {error: response.body}

Essentially this creates a <pop:stripe:charge> tag that sends the following info to Stripe:

  • the single use token received back from Stripe validating the credit card.
  • the Stripe secret key that is stored in Webpops storage module.
  • the order details stored in the user session as they fill their shopping cart.

If the token and secret key are valid, Stripe makes the actual charge the credit card.

If the transaction is succesful, it returns Stripe's unique id for the transcation record as <pop:stripe_id/>.  You can read about how this id gets used in the the shopping cart extension for internal book keeping here.

PCI Compliance with Stripe is as simple as it gets.

Because the credit card data never touches the Webpops servers, you don’t need to deal with PCI compliance.

You Still Need SSL

Even with Stripe where the data never touches your servers, you are still putting your cusomers at risk if you accept credit card info without having an SSL certificate on your checkout page.

The risk is whats known as a "man in the middle" attack. Let's say you're using a card over public wifi and someone is controlling that connection, now they might have a malicious tool that rewrites <script src="sripe.js"> to <script src="evil-stripe-fishing.js"> which send your form submission with the raw credit card data to their own server.

The transaction on the checkout page wouldn't go through, it would be obvious something was wrong, but the attacker would already have your card at that point.

So using SSL, and having that https:// url will prevent such a scenario from being possible. Right now, the best way to add SSL to a Webpop site is with Cloudflare.


Simple and reasonable rates, 2.9% + $.30 per charge, it’s slightly higher than average, but there aren’t any hidden fees or extra charges for things like refunds or declined transactions.

Stripe alternatives

The biggest drawback to Stripe is that it only pays out to US and Canadian customers at moment, here are some alternatives for other countries.

Braintree - Serving Europe, Australia, Canada and US. 130+ currencies. Webpop uses Braintree internally. It’s quite powerful, but also has a higher learning curve than Stripe. You still need do some stuff to meet the minimum PCI compliance.

Paymill - Similar to Stripe, but serving the European market. Easy API, no redirects & simple pricing.

Paypal - It’s possible to create a completely custom checkout, but it requires paying a $30 monthly fee for PayPal Pro

« Back to Blog Index

Sign up now

30 days free trial. Sign up in 60 seconds. Upgrade, downgrade, cancel at any time.
blog comments powered by Disqus