Permalink
Browse files

fix image paths

  • Loading branch information...
1 parent 88f1024 commit 5b20a80ef8862ddf012da5c52cedf30792f19bfa @em em committed Jul 19, 2011
Showing with 48 additions and 50 deletions.
  1. +1 −0 .gitignore
  2. +5 −7 README.md
  3. +5 −6 examples/gridsystem.html
  4. +0 −1 examples/simple.html
  5. BIN images/.DS_Store
  6. +19 −19 recurly.css
  7. +1 −0 recurly.js
  8. +17 −17 recurly.styl
View
@@ -0,0 +1 @@
+.DS_Store
View
@@ -15,14 +15,12 @@ Recurly.js comes with:
* 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.
+2. A stock stylesheet that is also very similar to our hosted payment pages. It is coded in stylus, and comes with the css compilations.
+ * Take this stylesheet and tweak it to your heart's content 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({
@@ -37,7 +35,7 @@ Recurly.buildSubscribeForm({
});
</pre>
-# Additional Options
+## Additional Options
<pre>
Recurly.config({
subdomain: 'mycompany',
@@ -57,13 +55,13 @@ Recurly.buildSubscribeForm({
});
</pre>
-# Customizing the style
+## 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)
+Once the user subscribes through the recurly.js form on your site, you have to 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.
@@ -11,16 +11,18 @@
<script>
$(function() {
Recurly.config({
- environment: 'sandbox'
- , subdomain: 'recurlyjsdemo-test'
+ /* environment: 'sandbox' */
+ /* , subdomain: 'recurlyjsdemo-test' */
+
+ baseURL: 'https://api-sandbox.dev.recurly.com/jsonp/emery-test/'
, currency: 'GBP'
, country: 'GB'
, VATPercent: 10
});
Recurly.buildSubscribeForm({
target: '#recurly-subscribe'
- , plan: 'complex'
+ , plan: 'gold'
, addressRequirement: 'full'
, successURL: 'success.html?account_code={account_code}'
});
@@ -56,9 +58,6 @@
<div id="content">
<div id="recurly-subscribe">
- <noscript>
- <a href="http://mycompany.recurly.com/subscribe/gold">Click here to Pay</a>
- </noscript>
</div>
</div>
@@ -35,7 +35,6 @@
</head>
<body>
<div id="recurly-subscribe">
- <a href="http://mycompany@recurly.com/subscribe/failover">Click here to Subscribe</a>
</div>
</body>
</html>
View
Binary file not shown.
View
@@ -71,7 +71,7 @@
}
.recurly_subscribe .setup_fee {
clear: both;
- background: url("../images/dash.png") repeat-x 1px top;
+ background: url("images/dash.png") repeat-x 1px top;
padding: 20px 0;
}
.recurly_subscribe .setup_fee .title {
@@ -88,7 +88,7 @@
height: 24px;
padding: 20px 20px;
display: none;
- background: url("../images/dash.png") repeat-x 1px top;
+ background: url("images/dash.png") repeat-x 1px top;
}
.recurly_subscribe .vat.applicable {
display: block;
@@ -203,11 +203,11 @@
text-shadow: none;
}
.recurly_subscribe ul.add_ons li.selected {
- background: #fff url("../images/check.png") no-repeat 10px center;
+ background: #fff url("images/check.png") no-repeat 10px center;
padding-left: 24px;
}
.recurly_subscribe ul.add_ons li.selected:hover {
- background: #fcf5f0 url("../images/uncheck.png") no-repeat 10px center;
+ background: #fcf5f0 url("images/uncheck.png") no-repeat 10px center;
}
.recurly_subscribe ul.add_ons li.selected .quantity {
display: block;
@@ -218,7 +218,7 @@
color: #333;
padding: 20px 20px;
position: relative;
- background: rgba(0,0,40,0.02) url("../images/dash.png") repeat-x 1px top;
+ background: rgba(0,0,40,0.02) url("images/dash.png") repeat-x 1px top;
}
.recurly_subscribe .coupon .check {
width: 26px;
@@ -227,24 +227,24 @@
border-radius: 15px 15px 15px 15px;
background: #70ccf8;
border: 1px solid #0090c9;
- background: url("../images/coupon_check.png") no-repeat center center, -webkit-linear-gradient(top, #61bDFA 0%, #35afF5 50%, #00a1e6 50%, #61bEFB 100%);
- background: url("../images/coupon_check.png") no-repeat center center, -moz-linear-gradient(top, #61bDFA 0%, #35afF5 50%, #00a1e6 50%, #61bEFB 100%);
- background: url("../images/coupon_check.png") no-repeat center center, -o-linear-gradient(top, #61bDFA 0%, #35afF5 50%, #00a1e6 50%, #61bEFB 100%);
- background: url("../images/coupon_check.png") no-repeat center center linear-gradient(top, #61bDFA 0%, #35afF5 50%, #00a1e6 50%, #61bEFB 100%);
+ background: url("images/coupon_check.png") no-repeat center center, -webkit-linear-gradient(top, #61bDFA 0%, #35afF5 50%, #00a1e6 50%, #61bEFB 100%);
+ background: url("images/coupon_check.png") no-repeat center center, -moz-linear-gradient(top, #61bDFA 0%, #35afF5 50%, #00a1e6 50%, #61bEFB 100%);
+ background: url("images/coupon_check.png") no-repeat center center, -o-linear-gradient(top, #61bDFA 0%, #35afF5 50%, #00a1e6 50%, #61bEFB 100%);
+ background: url("images/coupon_check.png") no-repeat center center linear-gradient(top, #61bDFA 0%, #35afF5 50%, #00a1e6 50%, #61bEFB 100%);
margin: 3px 0 1px 10px;
box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.35), 0 1px 1px 0 rgba(0,0,0,0.1);
}
.recurly_subscribe .coupon .check:hover {
box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.75), 0 1px 1px 0 rgba(0,0,0,0.1);
- background: url("../images/coupon_check.png") no-repeat center center, -webkit-linear-gradient(top, #71cdfa 0%, #43bef9 50%, #00b1f6 50%, #71cefb 100%);
+ background: url("images/coupon_check.png") no-repeat center center, -webkit-linear-gradient(top, #71cdfa 0%, #43bef9 50%, #00b1f6 50%, #71cefb 100%);
}
.recurly_subscribe .coupon .check:active {
- background: url("../images/coupon_check.png") no-repeat center center, -webkit-linear-gradient(top, #f0f0f0, #fff);
+ background: url("images/coupon_check.png") no-repeat center center, -webkit-linear-gradient(top, #f0f0f0, #fff);
box-shadow: inset 0 3px 3px 0 rgba(0,0,0,0.025);
border: 1px solid #999;
}
.recurly_subscribe .coupon.checking .check {
- background: #f0f0f0 url("../images/coupon_checking.gif") no-repeat center center;
+ background: #f0f0f0 url("images/coupon_checking.gif") no-repeat center center;
box-shadow: inset 0 3px 3px 0 rgba(0,0,0,0.025);
border: 1px solid #999;
}
@@ -307,7 +307,7 @@
}
.recurly_subscribe .contact_info.billing_info,
.recurly_subscribe .billing_info.billing_info {
- background: url("../images/dash.png") repeat-x 1px top;
+ background: url("images/dash.png") repeat-x 1px top;
padding-bottom: 0;
}
.recurly_subscribe .contact_info .title,
@@ -490,16 +490,16 @@
float: left;
}
.recurly_subscribe ul.accepted_cards li.mastercard {
- background-image: url("../images/creditcards/mastercard.gif");
+ background-image: url("images/creditcards/mastercard.gif");
}
.recurly_subscribe ul.accepted_cards li.american_express {
- background-image: url("../images/creditcards/amex.gif");
+ background-image: url("images/creditcards/amex.gif");
}
.recurly_subscribe ul.accepted_cards li.visa {
- background-image: url("../images/creditcards/visa.gif");
+ background-image: url("images/creditcards/visa.gif");
}
.recurly_subscribe ul.accepted_cards li.discover {
- background-image: url("../images/creditcards/discover.gif");
+ background-image: url("images/creditcards/discover.gif");
}
.recurly_subscribe ul.accepted_cards li.no_match {
opacity: 0.5;
@@ -543,7 +543,7 @@
color: inherit;
}
.recurly_subscribe .due_now {
- background: url("../images/due_now.png") no-repeat top left;
+ background: url("images/due_now.png") no-repeat top left;
clear: both;
color: #2a3a3c;
height: 70px;
@@ -576,7 +576,7 @@
padding: 20px;
}
.recurly_subscribe.submitting .footer {
- background: url("../images/submitting.gif") no-repeat 180px 28px;
+ background: url("images/submitting.gif") no-repeat 180px 28px;
}
.recurly_subscribe button.subscribe {
position: relative;
View
@@ -1039,6 +1039,7 @@ R.buildSubscribeForm = function(options) {
updateTotals();
}, function() {
+ subscription.coupon = undefined;
$coupon.removeClass('checking');
$coupon.removeClass('valid').addClass('invalid');
View
@@ -139,7 +139,7 @@ hstack(cols)
.setup_fee
clear both
- background url(../images/dash.png) repeat-x 1px top
+ background url(images/dash.png) repeat-x 1px top
padding column_space 0
.title
@@ -155,7 +155,7 @@ hstack(cols)
height 24px
padding column_space outer_margin
display none
- background url(../images/dash.png) repeat-x 1px top
+ background url(images/dash.png) repeat-x 1px top
&.applicable
display block
@@ -172,7 +172,7 @@ hstack(cols)
ul.add_ons
clear both
margin 0
- // background url(../images/dash.png) repeat-x 1px top
+ // background url(images/dash.png) repeat-x 1px top
&.any
padding (outer_margin/2)
@@ -257,11 +257,11 @@ hstack(cols)
text-shadow none
&.selected
- background #fff url(../images/check.png) no-repeat (outer_margin/2) center
+ background #fff url(images/check.png) no-repeat (outer_margin/2) center
padding-left 24px
&:hover
- background #fcf5f0 url(../images/uncheck.png) no-repeat (outer_margin/2) center
+ background #fcf5f0 url(images/uncheck.png) no-repeat (outer_margin/2) center
&.selected .quantity
display block
@@ -272,7 +272,7 @@ hstack(cols)
color #333
padding column_space outer_margin
position relative
- background rgba(0,0,40,0.02) url(../images/dash.png) repeat-x 1px top
+ background rgba(0,0,40,0.02) url(images/dash.png) repeat-x 1px top
.check
width 26px
@@ -281,24 +281,24 @@ hstack(cols)
border-radius 15px 15px 15px 15px
background #70CCF8
border 1px solid #0090C9
- background image-linear-gradient(url(../images/coupon_check.png) no-repeat center center, top, '#61bDFA 0%', '#35afF5 50%', '#00a1e6 50%', '#61bEFB 100%')
+ background image-linear-gradient(url(images/coupon_check.png) no-repeat center center, top, '#61bDFA 0%', '#35afF5 50%', '#00a1e6 50%', '#61bEFB 100%')
margin 3px 0 1px 10px
box-shadow inset 0 1px 0 0 rgba(255,255,255,.35), 0 1px 1px 0 rgba(0,0,0,0.1)
&:hover
box-shadow inset 0 1px 0 0 rgba(255,255,255,.75), 0 1px 1px 0 rgba(0,0,0,0.1)
- background url(../images/coupon_check.png) no-repeat center center, -webkit-linear-gradient(top, #71CDFA 0%, #43BEF9 50%, #00B1F6 50%, #71CEFB 100%)
+ background url(images/coupon_check.png) no-repeat center center, -webkit-linear-gradient(top, #71CDFA 0%, #43BEF9 50%, #00B1F6 50%, #71CEFB 100%)
&:active
- background url(../images/coupon_check.png) no-repeat center center, -webkit-linear-gradient(top, #f0f0f0, #fff)
+ background url(images/coupon_check.png) no-repeat center center, -webkit-linear-gradient(top, #f0f0f0, #fff)
box-shadow inset 0 3px 3px 0 rgba(0,0,0,0.025)
border 1px solid #999
&.checking .check
- background #f0f0f0 url(../images/coupon_checking.gif) no-repeat center center
+ background #f0f0f0 url(images/coupon_checking.gif) no-repeat center center
box-shadow inset 0 3px 3px 0 rgba(0,0,0,0.025)
border 1px solid #999
@@ -365,7 +365,7 @@ hstack(cols)
overflow hidden
&.billing_info
- background url(../images/dash.png) repeat-x 1px top
+ background url(images/dash.png) repeat-x 1px top
padding-bottom 0
.title
@@ -496,13 +496,13 @@ hstack(cols)
float left
&.mastercard
- background-image url(../images/creditcards/mastercard.gif)
+ background-image url(images/creditcards/mastercard.gif)
&.american_express
- background-image url(../images/creditcards/amex.gif)
+ background-image url(images/creditcards/amex.gif)
&.visa
- background-image url(../images/creditcards/visa.gif)
+ background-image url(images/creditcards/visa.gif)
&.discover
- background-image url(../images/creditcards/discover.gif)
+ background-image url(images/creditcards/discover.gif)
&.match
// nothing
@@ -553,7 +553,7 @@ hstack(cols)
// DUE NOW BAR
.due_now
- background url(../images/due_now.png) no-repeat top left
+ background url(images/due_now.png) no-repeat top left
clear both
color #2a3a3c
height 70px
@@ -587,7 +587,7 @@ hstack(cols)
padding outer_margin
&.submitting .footer
- background url(../images/submitting.gif) no-repeat columns(5) 28px
+ background url(images/submitting.gif) no-repeat columns(5) 28px
button.subscribe
position relative

0 comments on commit 5b20a80

Please sign in to comment.