Permalink
Browse files

Initial release of recurly-js private beta

  • Loading branch information...
0 parents commit 88f1024779e5ee16260a5b35e386a188115e67a5 @em em committed Jul 19, 2011
@@ -0,0 +1,84 @@
+# Recurly.js
+
+Recurly.js makes it easy to provide the user experience available on our hosted payment pages, on your site, with complete control over the look and feel, outside of PCI scope.
+
+# Why you should use it
+Don't reinvent the wheel. The fundamentals of paying for subscriptions doesn't change across implementations, there's got to be one approach that gets it right for everyone. We aim to be that solution. The one thing that does change, however, is design: your website has its own look, and we want you to keep it. This is why we created Recurly.js to handle all of the hard work, leaving you with the sole task of styling to fit your design. And with the help of stylus, that couldn't be easier.
+
+# How it works
+
+Recurly.js comes with:
+
+1. A little script that:
+ * Builds the DOM of a well-structured subscription form
+ * Performs the same tricky client-side total calculations on our hosted pages. (quantities,addons,coupons,vat,etc..)
+ * Does inline validation, and server-side validation.
+ * Talks to Recurly (through a JSONP API), pulling down plan criteria, and creating subscriptions.
+
+2. A stock stylesheet that is also very similar to our hosted payment pages. It is coded in stylus, and comes with sass, scss, and css compilations.
+ * Take this stylesheet and tweak it to your heart's desire to match the look and feel of your design.
+
+
+# Getting Started
+
+Download the zip/tar or clone this repository, and take a look at the examples.
+
+Accepting subscriptions is as simple as dropping in this js:
+<pre>
+Recurly.config({
+ subdomain: 'mycompany',
+ environment: 'sandbox' // or 'production'
+});
+
+Recurly.buildSubscribeForm({
+ target: '#subscribe', // A jQuery selector for the container element to append the form to
+ plan: 'myplancode' // A plan you have created in recurly-app
+ successURL: '/success?account_code={account_code}' // Redirect on success URL
+});
+</pre>
+
+# Additional Options
+<pre>
+Recurly.config({
+ subdomain: 'mycompany',
+ environment: 'sandbox', // or 'production'
+ currency: 'USD', // GBP | CAD | EUR, etc...
+ VATPercentage: 10, // European Value Added Tax
+ country: 'GB', // Seller country, needed for VAT to work
+});
+
+Recurly.buildSubscribeForm({
+ target: '#subscribe', // A jQuery selector for the container element to append the form to
+ plan: 'myplancode', // A plan you have created in recurly-app
+ afterSubscribe: function() {}, // Callback after subscription success
+ addressRequirement: 'full', // Address fields to display (full | zipstreet | zip | none)
+ enableAddOns: true | false,
+ enableCoupons: true | false
+});
+</pre>
+
+# Customizing the style
+A stock stylesheet is provided that is coded in stylus, a wonderful language that compiles to CSS.
+
+The first thing you'll want to do is take a look at the variables defined at the top. You'll notice that the default stylesheets is all centered around defined grid system dimensions, making customization a breeze.
+
+# Responding to subscription creates
+Once the user subscribes through the recurly.js form on your site, you have to do act accordingly with your respective business logic. (giving your users what it is they just paid for)
+
+The easiest way to do this is by simply passing a <pre>successURL</pre> option to buildSubscribeForm.
+When the user's credit card is processed successfully, recurly.js will redirect to successURL replacing {account_code} with the newly created account.
+
+All you have to do is have your server read the GET variable, pull down the account from Recurly with one of our client libraries, and act accordingly giving them what they paid for.
+
+Alternatively, you can pass in an option to buildSubscribeForm, 'afterSubscribe', to handle subscription creates.
+
+# Caveats
+You will still need to use one of our existing server-side client libraries to pull down the account after it's been created, and act accordingly. But that's the easy part. The hard part in the past has been building out subscription UX and mediating errors.
+
+It currently depends on jQuery 1.5.2+. Not a problem if you already use it. A future version of the library may be framework agnostic.
+
+# Soon To Come
+
+* Multi-currency
+* Localization
+* Account Management (update billing info, upgrade/downgrade, cancellation)
Binary file not shown.
@@ -0,0 +1,2 @@
+
+<h1> Thanks for subscribing! </h1>
@@ -0,0 +1,110 @@
+body {
+ font: 18px "helvetica neue", helvetica, arial
+}
+
+#container
+{
+ margin: 0 auto;
+ width: 980px;
+ background: #fff;
+}
+
+#header
+{
+ background: #ccc;
+ padding: 20px;
+}
+
+#header h1 { margin: 0; }
+
+#navigation
+{
+ float: left;
+ width: 980px;
+ background: #333;
+}
+
+#navigation ul
+{
+ margin: 0;
+ padding: 0;
+}
+
+#navigation ul li
+{
+ list-style-type: none;
+ display: inline;
+}
+
+#navigation li a
+{
+ display: block;
+ float: left;
+ padding: 5px 10px;
+ color: #fff;
+ text-decoration: none;
+ border-right: 1px solid #fff;
+}
+
+#navigation li a:hover { background: #383; }
+
+#content-container
+{
+ float: left;
+ width: 980px;
+ background: #f0f0f0 url(../images/grid_demo.png) repeat 20px 0;
+}
+
+#content
+{
+ clear: left;
+ float: left;
+ width: 520px;
+ margin: 0 0 0 0px;
+ display: inline;
+}
+
+#sidebar
+{
+ float: right;
+ font-weight: 100;
+ letter-spacing: 1px;
+ width: 400px;
+ padding: 20px 0;
+ margin: 0 0 0 0;
+ display: inline;
+ background: #333;
+ color: white;
+}
+
+#sidebar p { margin: 20px; }
+
+#footer
+{
+ clear: both;
+ background: #ccc;
+ text-align: right;
+ padding: 20px;
+ height: 1%;
+}
+
+
+#demo480 {
+ background: skyblue;
+ width: 480px;
+ padding: 5px 0;
+}
+
+
+#demo960 {
+ background: seagreen;
+ width: 960px;
+ padding: 5px 0;
+}
+
+
+#recurly-subscribe {
+ padding 40px;
+ height 100px;
+}
+
@@ -0,0 +1,86 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+
+<html lang="en">
+<head>
+<title>RecurlyJS Grid System Example</title>
+<link rel="stylesheet" href="gridsystem.css" type="text/css" />
+<link rel="stylesheet" href="../recurly.css" type="text/css" />
+
+<script src="lib/jquery-1.6.1.js"></script>
+<script src="../recurly.js"></script>
+<script>
+ $(function() {
+ Recurly.config({
+ environment: 'sandbox'
+ , subdomain: 'recurlyjsdemo-test'
+ , currency: 'GBP'
+ , country: 'GB'
+ , VATPercent: 10
+ });
+
+ Recurly.buildSubscribeForm({
+ target: '#recurly-subscribe'
+ , plan: 'complex'
+ , addressRequirement: 'full'
+ , successURL: 'success.html?account_code={account_code}'
+ });
+
+ $('#test').click(function() {
+ $('.first_name input').val('emery').change();
+ $('.last_name input').val('denuccio').change();
+ $('.email input').val('emery+test@recurly.com').change();
+ $('.card_number input').val('4111-1111-1111-1111').change();
+ $('.cvv input').val('123').change();
+ });
+ });
+</script>
+
+</head>
+ <body>
+
+<div id="container">
+ <div id="header">
+ <h1>
+ Your Website
+ </h1>
+ </div>
+ <div id="navigation">
+ <ul>
+ <li><a href="#">Home</a></li>
+ <li><a href="#">About</a></li>
+ <li><a href="#">Services</a></li>
+ <li><a href="#">Contact us</a></li>
+ </ul>
+ </div>
+ <div id="content-container">
+ <div id="content">
+
+ <div id="recurly-subscribe">
+ <noscript>
+ <a href="http://mycompany.recurly.com/subscribe/gold">Click here to Pay</a>
+ </noscript>
+ </div>
+
+ </div>
+ <div id="sidebar">
+ <p>
+ This example demonstrates the use of recurly.js in a 960/12/20 grid system.
+ </p>
+ <p>
+ The subscribe form style is tuned to 480/12/20 which makes columns in multiple of 2 and 4 divide evenly into the columns of the 960 container.
+ </p>
+ <p>
+ You can tweak the dimensions in recurly.styl to fit your content and design.
+ </p>
+ </div>
+ <div id="footer">
+ <button id="test">test</button>
+
+ <div id="demo480">480px</div>
+ <div id="demo960">960px</div>
+ </div>
+ </div>
+</div>
+
+ </body>
+</html>
Oops, something went wrong.

0 comments on commit 88f1024

Please sign in to comment.