All examples point to a company we created specifically for this demo, called recurlyjsdemo. Naturally you'll want to replace all occurances with your real company subdomain.
22 |
The demo company defines two plans: simpleplan, and complexplan, and
23 | a forever 30% off coupon, named test.
24 |
25 |
Update Billing Info, and One-time Transactions both require signatures, which must be generated server-side and rendered to an option. For demonstration purposes we pre‑computed the signatures and hardcoded them in.
51 | This example demonstrates the use of recurly.js in a 960/12/20 grid system.
52 |
53 |
54 | The subscribe form style is tuned to 480/12/20 (960/2 = 480) which makes columns in multiple of 2 divide evenly into the columns of the 960 parent.
55 |
56 |
57 | You can tweak the dimensions in recurly.styl to fit your content and design.
58 |
59 |
60 |
65 |
66 |
67 |
68 |
69 |
70 |
--------------------------------------------------------------------------------
/examples/gridsystem.css:
--------------------------------------------------------------------------------
1 | body {
2 | font: 18px "helvetica neue", helvetica, arial
3 | }
4 |
5 | #container
6 | {
7 | margin: 0 auto;
8 | width: 980px;
9 | background: #fff;
10 | }
11 |
12 | #header
13 | {
14 | background: #ccc;
15 | padding: 20px;
16 | }
17 |
18 | #header h1 { margin: 0; }
19 |
20 | #navigation
21 | {
22 | float: left;
23 | width: 980px;
24 | background: #333;
25 | }
26 |
27 | #navigation ul
28 | {
29 | margin: 0;
30 | padding: 0;
31 | }
32 |
33 | #navigation ul li
34 | {
35 | list-style-type: none;
36 | display: inline;
37 | }
38 |
39 | #navigation li a
40 | {
41 | display: block;
42 | float: left;
43 | padding: 5px 10px;
44 | color: #fff;
45 | text-decoration: none;
46 | border-right: 1px solid #fff;
47 | }
48 |
49 | #navigation li a:hover { background: #383; }
50 |
51 | #content-container
52 | {
53 | float: left;
54 | width: 980px;
55 | background: #f0f0f0 url(../images/grid_demo.png) repeat 20px 0;
56 | }
57 |
58 | #content
59 | {
60 | clear: left;
61 | float: left;
62 | width: 520px;
63 | margin: 0 0 0 0px;
64 | display: inline;
65 | }
66 |
67 | #sidebar
68 | {
69 | float: right;
70 | font-weight: 100;
71 | letter-spacing: 1px;
72 | width: 400px;
73 | padding: 20px 0;
74 | margin: 0 0 0 0;
75 | display: inline;
76 | background: #333;
77 | color: white;
78 | }
79 |
80 | #sidebar p { margin: 20px; }
81 |
82 | #footer
83 | {
84 | clear: both;
85 | background: #ccc;
86 | text-align: right;
87 | padding: 20px;
88 | height: 1%;
89 | }
90 |
91 |
92 | #demo480 {
93 | background: skyblue;
94 | width: 480px;
95 | padding: 5px 0;
96 | }
97 |
98 |
99 | #demo960 {
100 | background: seagreen;
101 | width: 960px;
102 | padding: 5px 0;
103 | }
104 |
105 |
106 | #recurly-subscribe {
107 | padding 40px;
108 | height 100px;
109 | }
110 |
111 |
--------------------------------------------------------------------------------
/examples/examples.css:
--------------------------------------------------------------------------------
1 | html {
2 | font-family: "helvetica neue", helvetica, arial;
3 | margin: 0;
4 | padding: 0;
5 | background: #c0c1c3 url("../images/noise.png") no-repeat center top;
6 | }
7 | h1 {
8 | width: 500px;
9 | margin: 30px auto;
10 | text-align: center;
11 | color: #fff;
12 | text-shadow: 0 1px 1px #111;
13 | }
14 | h2 {
15 | width: 500px;
16 | margin: -20px auto 0 auto;
17 | text-align: center;
18 | font-size: 18px;
19 | text-shadow: 0 1px 0 #fff;
20 | }
21 | p {
22 | margin: 20px;
23 | text-shadow: 0 1px 0 #eee;
24 | font-size: 16px;
25 | font-weight: 300;
26 | line-height: 26px;
27 | text-align: justify;
28 | }
29 | pre {
30 | margin: 20px;
31 | padding: 20px;
32 | background: #000;
33 | color: #fff;
34 | }
35 | code {
36 | font-family: menlo, monaco, "Lucida Console", monospace;
37 | padding: 2px 4px;
38 | font-size: 13px;
39 | background: rgba(55,100,150,0.30);
40 | color: #fff;
41 | letter-space: 1px;
42 | text-shadow: 0 1px 0 #467;
43 | border-radius: 4px;
44 | }
45 | a {
46 | color: inherit;
47 | font-weight: bold;
48 | }
49 | #index,
50 | #result {
51 | width: 480px;
52 | margin: 0 auto;
53 | }
54 | #examples {
55 | margin: 20px;
56 | font-weight: inherit;
57 | }
58 | #examples a {
59 | display: block;
60 | overflow: hidden;
61 | padding: 10px 15px;
62 | margin-bottom: 10px;
63 | border-radius: 18px;
64 | color: #fff;
65 | text-shadow: 0 1px 0 #000;
66 | font-weight: inherit;
67 | text-decoration: none;
68 | position: relative;
69 | background: rgba(0,10,0,0.40);
70 | box-shadow: 0 2px 1px rgba(0,0,0,0.10);
71 | }
72 | #examples a:hover {
73 | color: #fff;
74 | background: rgba(0,0,0,0.85);
75 | }
76 | #examples a:hover:after {
77 | content: '\25B6';
78 | position: absolute;
79 | right: 15px;
80 | }
81 | #recurly-subscribe,
82 | #recurly-update-billing-info,
83 | #recurly-transaction {
84 | width: 500px;
85 | margin: 30px auto;
86 | padding: 0px;
87 | border: 1px solid #999;
88 | border-radius: 8px;
89 | background: #fcfcfc url("../images/pulp.jpeg") repeat;
90 | box-shadow: 0px 1px 2px rgba(0,0,0,0.20), inset 0 1px 0 #fff;
91 | }
92 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Recurly.js
2 |
3 | Full Reference: http://docs.recurly.com/recurlyjs/reference/
4 |
5 | Recurly.js is an open-source Javascript library for creating great looking credit card forms to securely create subscriptions, one-time transactions, and update billing information using Recurly. The library is designed to create fully customizable order forms while minimizing your PCI compliance scope.
6 |
7 | This library depends on jQuery 1.5.2+. A future version may be framework agnostic.
8 |
9 | ### Dynamic Total Calculation and Error Handling
10 |
11 | The library performs client-side validation of cardholder data, immediate pricing calculations for add-ons and Value Added Tax (VAT), and coupon validation. The library handles transaction failures gracefully. Should a transaction be declined, the library automatically highlights the appropriate fields and displays proper error messages for your customers.
12 |
13 | ### PCI Compliance
14 |
15 | Recurly.js simplifies PCI compliance for Recurly merchants. After performing client-side validation on the cardholder data, the library securely submits the order details directly to Recurly. Because the sensitive cardholder data is never transmitted to your web servers, your PCI compliance scope is dramatically reduced. This allows you to host the credit card order forms on your website without the headaches of PCI compliance.
16 |
17 | ### Fully Customizable CSS
18 |
19 | Recurly.js is designed to be fully customized to fit within your website. To help get you started, this library includes a sample stylesheet that resembles Recurly's hosted payment pages. We use [stylus](https://github.com/LearnBoost/stylus) to create the CSS.
20 |
21 | __Learn more:__ View the Recurly.js [intro video and examples](http://js.recurly.com) and [documentation](http://docs.recurly.com/recurlyjs/overview).
22 |
23 |
24 | # In the Project
25 |
26 | Recurly.js includes:
27 |
28 | * A Javscript library (_recurly.js_) for creating well-structured forms with validation and error handling
29 | * A stock stylesheet (_recurly.css_)
30 | * [stylus](https://github.com/LearnBoost/stylus) source for customizing the stylesheet (_recurly.styl_)
31 | * And examples for creating subscriptions, one time transactions, and updating billing information
32 |
33 | # Getting Started
34 |
35 | Accepting subscriptions is as simple as dropping in this Javascript:
36 |
37 | ```javascript
38 | Recurly.config({
39 | subdomain: 'mycompany',
40 | });
41 |
42 | Recurly.buildSubscriptionForm({
43 | target: '#subscribe', // A jQuery selector for the container element to append the form to
44 | planCode: 'myplancode' // A plan you have created in recurly-app
45 | successURL: '/success' // Redirect on success URL
46 | });
47 | ```
48 |
49 | View our [documentation](http://docs.recurly.com/recurlyjs/overview) for more details.
50 |
51 | ## Additional Options
52 | ```javascript
53 | Recurly.config({
54 | subdomain: 'mycompany'
55 | , currency: 'USD' // GBP | CAD | EUR, etc...
56 | , VATPercent: 10 // European Value Added Tax
57 | , country: 'GB' // Seller country, needed for VAT to work
58 | , locale: {
59 | // Currency formatting rules
60 | currency: {
61 | format: "%u%n" // Unit symbol and Number
62 | , separator: "."
63 | , delimiter: ","
64 | , precision: 2
65 | }
66 | // Error messages
67 | , errors: {
68 | emptyField: 'Forget something?'
69 | , invalidEmail: 'This doesn\'t look right.'
70 | , invalidCC: 'This doesn\'t look right.'
71 | , invalidCVV: 'This doesn\'t look right.'
72 | , invalidCoupon: 'Coupon not found'
73 | }
74 | }
75 | });
76 |
77 | Recurly.buildSubscriptionForm({
78 | target: '#subscribe' // A jQuery selector for the container element to append the form to
79 | , planCode: 'myplancode' // A plan you have created in recurly-app
80 | , afterSubscribe: function() {} // Callback after subscription success
81 | , addressRequirement: 'full' // Address fields to display (full | zipstreet | zip | none)
82 | , enableAddOns: true | false
83 | , enableCoupons: true | false
84 | , accountCode // Account code for the account created w/ subscription. Defaults to email address if not provided.
85 | });
86 | ```
87 |
88 | ## Customizing the style
89 |
90 | A stock stylesheet is provided that is coded in [stylus](/LearnBoost/stylus), a wonderful language that compiles to CSS.
91 |
92 | Stylus is officially implemented in node.js, but you don't need to have a node app to use it. You can install node and npm install stylus, then use the stylus command-line to compile to CSS. There is also a Ruby gem for stylus, [ruby-stylus](https://github.com/lucasmazza/ruby-stylus).
93 |
94 | Alternatively, you could modify the compiled css and ignore the stylus source. But this is heavily discouraged. It's much easier to get accustom to stylus, than to attempt to work with the compiled CSS which has lost all of the original structure that stylus provides. Give it a try, it's worth it.
95 |
96 | The default stylesheet is designed around the grid system. You will notice the default grid variables at the top of _recurly.styl_.
97 |
98 | # Responding to subscription creates
99 |
100 | Once the subscription is successfully started, Recurly.js will POST to `successURL`. The parameters are signed by Recurly for validation. Using the client library, you should validate the results and start the subscription. Alternatively, you may skip the validation and simply use the API to query the account's subscription status.
101 |
102 | Alternatively, you can pass in an option to buildSubscriptionForm, afterSubscribe, to handle subscription creates.
103 |
104 | # Additional Requirements
105 |
106 |
107 | You will need a Recurly client library in order to sign the protected fields for one-time transaction and billing info updates. Today, our [PHP](https://github.com/recurly/recurly-client-php) and [Ruby](https://github.com/recurly/recurly-client-ruby) clients have support for creating Recurly.js signatures. A client library is also necessary for performing other actions, such as retrieving account information, upgrading or downgrading a subscription, etc.
108 |
109 | # Coming Soon
110 |
111 | * Multi-currency (Supporting more than one currency per merchant)
112 | * Multi-lingual support (English only today)
113 |
--------------------------------------------------------------------------------
/test/all.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
501 |
502 |
503 |
504 |