Service no longer available as of November 2015. This page will stay up for archival purposes only.

This tool allows your static website to complete Stripe Checkout transactions without a server and without forcing users to leave your site. I made it as a companion to a website builder for nonprofits, and it is intended for owners of smaller, serverless websites that want to, for instance, accept donations. If you have a store that sells dozens or hundreds of items each day, however, setting up your own server is probably the better option.

Instructions

To use this server, just add your keys above and pass over publishableKey, stripeToken, and amount variables for each transaction, as shown below. The description parameter is optional. And use HTTPS.

That's pretty much it.

The examples use test keys and I recommend doing the same until test payments go through and you're sure everything is properly configured. Obviously at that point you'll need to switch to live keys (make sure they are added above!).

Please refer to Stripe's documentation for more information on using Checkout with custom JavaScript. This server is currently set up for USD transactions, but if there is demand for other currencies I will add that functionality. I'll also add form examples soon.

Make sure to include jQuery and checkout.js

    <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="https://checkout.stripe.com/checkout.js"></script>

Configuration

    token: function(token) {
        $.getJSON ("https://henrygd.me/charge?callback=?", {
            publishableKey: "pk_test_ciRdERN6HSjbwOKiix3DKnSI", // your key
            stripeToken: token.id, // token id, don't change
            amount: 500, // value in cents
            description: "description" // optional string that shows up on the receipt
        });
    }

The next two blocks of code are what I'm using for the test donation at the bottom of the page (the button on the left). A user clicks the button with the id (#) of teststartbtn to bring up a modal with an input field #donationamount where he or she can enter a custom dollar amount, then clicks #stripestartbtn, also within the modal, to launch Stripe Checkout.

When the user submits his or her details, Stripe Checkout creates a token and sends it here (https://henrygd.me/charge), where it is assigned to the the correct secret key. The transaction is completed using the supplied variables and is posted to your Stripe account within seconds. The user is presented with another modal containing the result of the transaction (in this case, direct from the response). Make sure you replace BOTH keys in the script with your publishable keys.

<script>
    var handler = StripeCheckout.configure({
      key: "pk_test_ciRdERN6HSjbwOKiix3DKnSI", // replace with your key
      image: "static/img/square-image.png", // replace or comment out
      token: function(token) {
        $.getJSON ("https://henrygd.me/charge?callback=?", { // do not change
            publishableKey: "pk_test_ciRdERN6HSjbwOKiix3DKnSI", // replace with your key
            stripeToken: token.id, // do not change
            amount: Math.round(Number($("#donationamount").val().replace("$",""))*100),
            description: "Donation" // optional, you may delete line
        }, function (data) { // data is the server response data
          if (data.result != undefined){ // if successful, data.result is returned
            $('#resultinfo').html(data.result) // writes "Thank you!"to #resultinfo in modal
          } else{ // if error, data.error dump is returned
            $('#resultinfo').html(data.error.message) // writes error message to modal
          }
        });
      }
    });

    $("#stripestartbtn").on("click", function(e) { // button id that launches Checkout
      $('#modalpin1, #modal1').fadeOut(150); // closes modal containing above button
      // converts donationamount field to simple integer
      donationAmount = Number($("#donationamount").val().replace("$",""));
      // Open Checkout with further options - customize name and description
      handler.open({
        name: "Test Donation",
        description: "Donation ($" + donationAmount + ")",
        amount: Math.round(donationAmount*100),
        allowRememberMe: false
      });
      e.preventDefault();
    });
</script>

In another script I've defined a global Ajax event that shows a loading icon when Checkout is submitted, then hides it and shows the modal with #resultinfo when the request is complete.

<script>
    $(document).bind("ajaxSend", function(){
      $("#loadingpin, #loading").show();
    }).bind("ajaxComplete", function(){
      $("#loadingpin, #loading").hide();
      $('#modalpin2, #modal2').fadeIn(150);
   });
</script>

Additionally, you can use the callback content to show your own custom message, instead of simply displaying the returned one

function (data) {
    if (data.result != undefined){
        $('#resultinfo').html(
            "YAY MONEY" // whatever you want
        )
    } else{
        $('#resultinfo').html(
            "SORRY THERE WAS AN ERROR"
        )
    }
});

HTTPS for your site

All submissions of payment info using Stripe Checkout and this site are made via a secure HTTPS connection. However, in order to protect yourself from man-in-the-middle attacks, please serve your page(s) containing the payment form with HTTPS as well. This means that any page you have a Checkout form on should start with https:// rather than just http://.

You can force an HTTPS connection by adding the JavaScript below to your page inside the head tags. If you can't enable an HTTPS connection currently on your site, one easy and free option is to route your site through CloudFlare. If you use any external content, such as images or scripts, you should also change those URLs to https:// or your site will display errors and/or have that content blocked.

    <script>
      if (window.location.protocol != "https:")
          window.location.href = "https:" + window.location.href.substring(window.location.protocol.length);
    </script>