biilmann/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Webpop Stripe Extension

This extension lets you easily setup a payment form with strip integration. No credit-card data will ever touch Webpop's servers, so Stripe can take care of just about all the PCI compliance for you.
Using the extension

Sign up with Stripe, and find your credentials (the public key and the secret key.).
In the index.tpl file above you need to replace YOUR PUBLIC STRIPE KEY with your public key.
In the stripe.js extension you should replace YOUR SECRET STRIPE KEY with your secret key.
To set the amount to charge, change the "amount" attribute for the <pop:stripe:charge> tag.
You can also add attributes to set "currency" and "description" on the <pop:stripe:charge> tag.

  
## index.tpl
<!doctype html>
<html>
  <head>
    <title>Stripe Payment Form Example</title>
    <script src="http://code.jquery.com/jquery.min.js"></script>
    <pop:admin/>
  </head>
  <body>
    <script type="text/javascript" src="https://js.stripe.com/v1/"></script>
    <script type="text/javascript">
      // this identifies your website in the createToken call below
      Stripe.setPublishableKey('YOUR PUBLIC STRIPE KEY');

      function stripeResponseHandler(status, response) {
          if (response.error) {
              // show the errors on the form
              $("#form-feedback").append("<p class='payment-errors'>");
              $(".payment-errors").text(response.error.message);
              $(".submit-button").removeAttr("disabled");
          } else {
              var form$ = $("#payment-form");
              // token contains id, last4, and card type
              var token = response['id'];
              // insert the token into the form so it gets submitted to the server
              form$.append("<input type='hidden' name='stripeToken' value='" + token + "'/>");
              // and submit
              form$.get(0).submit();
          }
      }

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

          Stripe.createToken({
              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;
        });
      });
    </script>

    <pop:stripe:charge amount="10000">
      <pop:success>
        <h1>Thank you for your payment!</h1>
      </pop:success>
      <pop:error>
        <h2>Error charging your card</h2>
        <p><pop:value/></p>
      </pop:error>


    </pop:stripe:charge>
    <pop:stripe:no_charge>
      <h1>Pay $100 now!</h1>
      <form action="" method="POST" id="payment-form">
        <div id="form-feedback"></div>
        <div class="form-row">
          <label>Card Number</label>
          <input type="text" size="20" autocomplete="off" class="card-number"/>
        </div>
        <div class="form-row">
          <label>CVC</label>
          <input type="text" size="4" autocomplete="off" class="card-cvc"/>
        </div>
        <div class="form-row">
          <label>Expiration (MM/YYYY)</label>
          <input type="text" size="2" class="card-expiry-month"/>
          <span> / </span>
          <input type="text" size="4" class="card-expiry-year"/>
        </div>
        <button type="submit" class="submit-button">Submit Payment</button>
      </form>
    </pop:stripe:no_charge>

    <pop:log/>
  </body>
</html>

## stripe.js
var http = require("http");

var apiKey = "YOUR SECRET STRIPE KEY";
var url    = "https://api.stripe.com/v1/charges";

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

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

    if (response.status == 200) {
      return {success: true}
    } else {
      return {error: response.body}
    }
  }
}
	<!doctype html>
	<html>
	<head>
	<title>Stripe Payment Form Example</title>
	<script src="http://code.jquery.com/jquery.min.js"></script>
	<pop:admin/>
	</head>
	<body>
	<script type="text/javascript" src="https://js.stripe.com/v1/"></script>
	<script type="text/javascript">
	// this identifies your website in the createToken call below
	Stripe.setPublishableKey('YOUR PUBLIC STRIPE KEY');

	function stripeResponseHandler(status, response) {
	if (response.error) {
	// show the errors on the form
	$("#form-feedback").append("<p class='payment-errors'>");
	$(".payment-errors").text(response.error.message);
	$(".submit-button").removeAttr("disabled");
	} else {
	var form$ = $("#payment-form");
	// token contains id, last4, and card type
	var token = response['id'];
	// insert the token into the form so it gets submitted to the server
	form$.append("<input type='hidden' name='stripeToken' value='" + token + "'/>");
	// and submit
	form$.get(0).submit();
	}
	}

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

	Stripe.createToken({
	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;
	});
	});
	</script>

	<pop:stripe:charge amount="10000">
	<pop:success>
	<h1>Thank you for your payment!</h1>
	</pop:success>
	<pop:error>
	<h2>Error charging your card</h2>
	<p><pop:value/></p>
	</pop:error>


	</pop:stripe:charge>
	<pop:stripe:no_charge>
	<h1>Pay $100 now!</h1>
	<form action="" method="POST" id="payment-form">
	<div id="form-feedback"></div>
	<div class="form-row">
	<label>Card Number</label>
	<input type="text" size="20" autocomplete="off" class="card-number"/>
	</div>
	<div class="form-row">
	<label>CVC</label>
	<input type="text" size="4" autocomplete="off" class="card-cvc"/>
	</div>
	<div class="form-row">
	<label>Expiration (MM/YYYY)</label>
	<input type="text" size="2" class="card-expiry-month"/>
	<span> / </span>
	<input type="text" size="4" class="card-expiry-year"/>
	</div>
	<button type="submit" class="submit-button">Submit Payment</button>
	</form>
	</pop:stripe:no_charge>

	<pop:log/>
	</body>
	</html>
	var http = require("http");

	var apiKey = "YOUR SECRET STRIPE KEY";
	var url = "https://api.stripe.com/v1/charges";

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

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

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