recurly / recurly-js

Simple subscription billing in the browser

Documentation

Getting Started & API Documentation

Examples

See our Examples Repo for example client-side and server-side implementations.

Installation

<script src="https://js.recurly.com/v4/recurly.js"></script>

Important: Please do not host recurly.js or bundle it using a package manager. In order to ensure you always run the most stable and secure version possible, you must load recurly.js from our CDN.

Build

Development build server

docker compose up

If you are having issues with the build, try make clean.

Test

$ make test

License

MIT

aurea mediocritas

recurly-js's Issues

Creating signature in node.js

I'm trying to integrate recurly.js into my node.js application. I'm receiving the following error when I submit a form though:

"Your payment session has expired for security. Please refresh the page and try again."

You can see the code I've written here:

https://github.com/cghobbs/pacific-commuter/blob/recurly/libs/recurly.js

Any ideas on what I'm doing wrong?

My best guess is it has something to do with the timestamp but I can't figure out what.

buildBillingInfoUpdateForm ignores default expiration month and year

The buildBillingInfoUpdateForm ignores passed in defaults for the credit card expiration date and always sets it to january of next year.

CVV required

Is there any way to disable the CVV field? PayPal Website Payments Pro UK doesn't require CVV to be submitted, so it's a useless field for us.

I've tried hiding the field and setting it's value to 000 but I get "does not match" and "the transaction was declined. please use a different card or contact your bank" errors when I try to sign up.

Type error when building a subscription form

When I try to create a form like this (substituting the plan I created for 'myplan')

$(function() {

    Recurly.config({
     subdomain: 'mysubdomain', 
     environment: 'sandbox' // or 'production'
    });

    Recurly.buildSubscriptionForm({
      target: '#subscribe', // A jQuery selector for the container element to append the form to
      plan: 'myplan', // A plan you have created in recurly-app
      successURL: '/success?account_code={account_code}' // Redirect on success URL
    });

});

I get

Uncaught TypeError: Object myplan has no method 'createSubscription' on line 1374

var subscription = plan.createSubscription(),
    account = R.Account.create(),
    billingInfo = R.BillingInfo.create();

buildSubscriptionForm shows first/last name when clicking paypal

buildSubscriptionForm with distinguishContactFromBillingInfo enabled and acceptPaypal enabled shows the first and last name fields when subscribing using paypal. In addition it makes these fields required.

This is not the expected behavior, as these fields should disappear just like the credit card fields do when toggling between using a credit card and using paypal. Below is an example of the options enabled.

Recurly.buildSubscriptionForm({
  target: '#subscribe'
, planCode: 'myplancode'
, acceptPaypal: true
, addressRequirement: 'none'
, collectContactInfo:    false
, distinguishContactFromBillingInfo: true
, successURL: 'http://myserver.com/subscriptions/confirmation.php'
});

Email adresses like "[email protected]" pass JS validation but are rejected server-side

Maybe the client-side regexp should be the same with the one you use server-side?

Or do you perform other dynamic checks on addresses ? (like DNS, ...)

No method buildSubscribeForm

The README refers to a method buildSubscribeForm, which doesn't exist.

It looks like it's been renamed to buildSubscriptionForm.

There's also a comma missing after the second parameter to the method in the example.

No signature! buildSubscriptionForm error

I'm getting the following error

"No signature! buildSubscriptionForm requires a signature to prove that you permit the action."

I'm trying to upgrade to Recurly js vs2. I'm passing the plan_code and accode_code correctly and the signature seems to be fine too. Any help will be greatly appreciated.

This is the relevant part of my code...

Recurly.buildSubscriptionForm({
      target: "#recurly-subscribe"
    , planCode: "#{@plan_code}"
    , successURL: "#{subscriptions_path}"
    , signature: "#{Recurly.js.sign_subscription @plan_code, @account_code}"
});

how to troubleshoot errors?

I am getting "Unknown error processing transaction. Please try again later."
This happens when clicking Subscribe on the subscription form.

How do I troubleshoot this?

How to added more info fields in bill

Hello,

I want to add more field list shipping details/ type and more .

Does it possible?

How to make it ?

Select plan

As a SaaS company, we offer several subscriptions for our customers to choose from. It'd be really nice if there was a way to choose from the plans in the recurly.js form.

Credit Card Number Validations (spaces, etc)

When a user is entering a credit card, they will often enter it as it appears in their card, i.e, with spaces etc.

The Recurly.js says a number entered with spaces is invalid until you take the spaces out (although, it does allow you to enter numbers with hypens (so why not spaces??)).

Please allow spaces to be entered in the front end, and for them to be filtered out on the backend.

Far better for usability.

Thanks!

Easier to customize.

Hi. I have a suggestion.

How about attaching the identifying classes to the input fields themselves instead of the parent element?
A unique class or ID for every field (how ever you would like it, but I would suggest ID) and then a point to override the default template for the forms?

Then we just need a list of the ID's needed and we can build the forms from scratch.

This would solve the language problem as we could now just translate the template. And it would make it much easier to customize the forms to fit an existing style/behavior.

Of course still keeping the default template for those that just want that.

Other than that, it looks like a really great tool.

accountCode required but not mentioned

accountCode is required in Recurly.buildBillingInfoUpdateForm but is not mentioned in the documentation on http://docs.recurly.com/recurlyjs/reference

Use Recurly.js field validation with other fields

(sorry if it's not appropriate to post this as an issue, but I really have nowhere else to turn right now)
I have another form on the same page with the Recurly.js injected form (shipping address) and I think it would be great if I could utilize Recurly.js's field validation (e.g. ensuring a required field is filled in, and the same validation error message labels).
Does anyone know if this is possible? I tried going through the Recurly.js code, but couldn't figure out where/how the validation is set up.
Thanks!

Problems uglifying the library

The IFFE "recurse" in your library is making problems in our web app

I opened a issue in Uglify.JS library with more details:

mishoo/UglifyJS#446

I opened this issue here just FYI

Provide form validation error callback

I'd like to be able to log if a user has any trouble filling out the subscription form. Right now, I can log if there is a server side error through the buildSubscriptionForm onError callback and that works great. However if there is an error in the form validation, I am unable to capture that event.

Looking through the code, I was wondering if it is possible to add an error callback to the validationGroup function and expose that callback from the buildSubscriptionForm? Let me know if there is an alternative I might be missing. Thanks!

.buildSubscriptionFrom without billing info fields

Usage scenario: Billing info has been already provided. User wants to update existing subscription (change plan, quantity, addons, etc.)

It would be nice to have possiblity to build subscription form using Recurly.js without billing info fileds.

Thanks!

Latest commit (2a235bc87c17db361a11c848c7aee05bc3a8795c) introduces failures on test/all.html

It looks like the tests were not run in the latest commit 2a235bc. test/all.html is pointing to a version of jQuery that was removed in the commit. When fixing the path, 4 failures are present.

Expected:   
"$79.20"
Result:     
"$72.00"
Diff:   
"$79.20" "$72.00" 
Source:     
    at Object.<anonymous> (http://localhost:8080/test/all.html:366:7)


Expected:   
79.2
Result:     
72
Diff:   
79.2 72 
Source:     
    at Object.<anonymous> (http://localhost:8080/test/all.html:371:7)


Expected:   
77
Result:     
70
Diff:   
77 70 
Source:     
    at Object.<anonymous> (http://localhost:8080/test/all.html:378:7)


Expected:   
{
  "account": {
    "account_code": undefined,
    "company_name": undefined,
    "email": "[email protected]",
    "first_name": "joe",
    "last_name": "user"
  },
  "billing_info": {
    "address1": "yee",
    "address2": "haw",
    "city": "doo",
    "country": "US",
    "first_name": undefined,
    "last_name": undefined,
    "month": "3",
    "number": "4111-1111-1111-1111",
    "phone": undefined,
    "state": "TX",
    "vat_number": undefined,
    "verification_value": "123",
    "year": "2013",
    "zip": "12345"
  },
  "js_version": "2.1.3",
  "signature": "thiscanbefakeforthetestsoyeah",
  "subscription": {
    "add_ons": [],
    "coupon_code": undefined,
    "currency": undefined,
    "plan_code": "kitchensink",
    "quantity": 1
  }
}
Result:     
{
  "account": {
    "account_code": undefined,
    "company_name": undefined,
    "email": "[email protected]",
    "first_name": "joe",
    "last_name": "user"
  },
  "billing_info": {
    "address1": "yee",
    "address2": "haw",
    "city": "doo",
    "country": "US",
    "first_name": undefined,
    "last_name": undefined,
    "month": null,
    "number": "4111-1111-1111-1111",
    "phone": undefined,
    "state": "TX",
    "vat_number": undefined,
    "verification_value": "123",
    "year": "2013",
    "zip": "12345"
  },
  "js_version": "2.1.3",
  "signature": "thiscanbefakeforthetestsoyeah",
  "subscription": {
    "add_ons": [],
    "coupon_code": undefined,
    "currency": undefined,
    "plan_code": "kitchensink",
    "quantity": 1
  }
}
Diff:   
 {
   "account":  {
     "account_code":  undefined,
     "company_name":  undefined,
     "email":  "[email protected]",
     "first_name":  "joe",
     "last_name":  "user"
   },
   "billing_info":  {
     "address1":  "yee",
     "address2":  "haw",
     "city":  "doo",
     "country":  "US",
     "first_name":  undefined,
     "last_name":  undefined,
     "month": "3",
    null,
     "number":  "4111-1111-1111-1111",
     "phone":  undefined,
     "state":  "TX",
     "vat_number":  undefined,
     "verification_value":  "123",
     "year":  "2013",
     "zip":  "12345"
   },
   "js_version":  "2.1.3",
   "signature":  "thiscanbefakeforthetestsoyeah",
   "subscription":  {
     "add_ons":  [],
     "coupon_code":  undefined,
     "currency":  undefined,
     "plan_code":  "kitchensink",
     "quantity":  1
   }
 } 
Source:     
    at Function.$.ajax (http://localhost:8080/test/all.html:410:9)
    at Object.R.ajax (http://localhost:8080/build/recurly.js:535:12)
    at Object.R.Subscription.save (http://localhost:8080/build/recurly.js:913:7)
    at http://localhost:8080/build/recurly.js:2071:22
    at validationGroup (http://localhost:8080/build/recurly.js:1096:5)
    at HTMLFormElement.<anonymous> (http://localhost:8080/build/recurly.js:2061:7)
    at HTMLFormElement.jQuery.event.dispatch (http://localhost:8080/lib/jquery-1.9.0.js:3045:9)

Submit button text reverts to 'Pay' after submit or on error

I'm using the 'beforeInject' method to change the text of the submit button on the one-time transaction form. This works fine for the initial load.

But after a validation error, or after the button reverts back from "Please Wait", the default "Pay" message returns.

How can I keep my custom message in the button? I did try afterInject on a lark, but it didn't make any difference.

Recurly JS Form does not work with jquery-1.8.1.min.js.

Im working on modifying subscribe.html that comes in the zip of recurly-js and found that the add-on selection does not work with jquery 1.8.1. When you click on the add-on it does not get added to the total and it does not update the add-on UI. I tried v jquery-1.7.1.js that comes with the recurly js bundle and it worked fine. Will this be updated?

Form built callback

I was wondering what my best way to determine when the form has been built completely and ready for manipulation. Is this something that makes sense as a callback within the build...Form() function?

Recalculating VAT after validation failures sets totals to 0

To reproduce:

1. Render subscription form with EU country pre-filled as billing country
2. Submit form with required fields missing, which results in validation errors
3. Change the country to another EU country and fill in VAT number

This correctly results in the VAT amount disappearing at the top of the form, but instead of the order total being re-calculated correctly, both the amount for the plan and the order total are set to $0.00.

Our subscription form is not live yet so I cannot supply a link.

buildBillingInfoUpdateForm does not allow firstName and lastName to be pre-filled

I'm constructing a billing form using buildBillingInfoUpdateForm with a set of existing values passed in using the billingInfo option.

The address, city, state, country, and zip options are all being applied as expected.

However the firstName and lastName options are being ignored.

Recurly.buildBillingInfoUpdateForm({
  target: ...,
  accountCode: ...,
  successURL: ...,
  signature: ...,
  billingInfo: {
    "firstName":"Matt",
    "lastName":"Brictson",
    "address1":"123 Main St",
    "address2":"",
    "city":"Anycity",
    "state":"CA",
    "country":"US",
    "zip":"12345",
    "vatNumber":null
  }
});

I believe the underlying problem is that the CSS expressions in Recurly.js's preFillMap are wrong.

, billingInfo: {
    firstName:      '.billing_info > .first_name > input'
  , lastName:       '.billing_info > .last_name > input'

Based on looking at the DOM, I believe the correct values are:

, billingInfo: {
    firstName:      '.billing_info > .credit_card > .first_name > input'
  , lastName:       '.billing_info > .credit_card > .last_name > input'

Old Pricing Calculator Logic Bugs

1. R.Cost.prototype.discount checks below zero after returning, so the below zero check is never used for dollar amount discounts.
2. R.Subscription.calculateTotoals applies coupon to current pricing even if there is a trial.
3. Similarly, if coupon can only be used for one billing cycle and there is a trial, R.Subscription.calculateTotals will fail to apply the coupon to recurring pricing.
4. Since setup fee is applied after coupon, the pricing might be higher if coupon set pricing to zero at first.

Issue with token and first_renewal_date

I am trying to use Recurly_js with .net library and I am facing following 2 issues:

1. I am able to create a new subscription and also change billing info using js pages, but recurly_token always returns INVALIDTOKEN, even though the required action is successfully done.
2. While creating a new subscription I am not able to use first_renewal_date/starts_at. A new subscription gets created but starting current date and renewal after 1 month. I am using following code:

Recurly.buildSubscriptionForm({
target: '#recurly-subscribe',
// Signature must be generated server-side with a utility method provided
// in client libraries.
signature: '<%= sign%>',
successURL: 'confirmation.aspx',
planCode: '21-50',
distinguishContactFromBillingInfo: true,
collectCompany: true,
termsOfServiceURL: 'http://example.com/tos',
account: {
firstName: 'Joe',
lastName: 'User',
email: '[email protected]',
phone: '555-555-5555',
companyName: 'Acme'
},
subscription: {
first_renewal_date: '2012-07-07T00:00',
starts_at: '2012-06-06T00:00'
},
billingInfo: {
firstName: 'Joe',
lastName: 'User',
address1: '123 somestreet',
address2: '45',
city: 'San Francisco',
zip: '94107',
state: 'CA',
country: 'US',
cardNumber: '4111-1111-1111-1111',
CVV: '123'
}
});

Please help

signature not in buildSubscriptionForm?

After reading the documentation at the following address i have
question about the security of the implementation:
http://docs.recurly.com/recurlyjs/reference

It seems like buildSubscriptionForm doesn't support signature. The
reason i ask is that because i don't want the user to be able to
manipulate the account_code (this is the logged in user accountId in
our internal system).

Is this intentionally left out? or is there is some other way to
ensure that the user can't forge the account_code.

Thanks,
Talib

no way to enforce an account_code on a new subscription.

I can account_code, and set account: {account_code} per your documentation, but if the subscription's account code is always set to whatever the customer puts in the email field. I do not want this.

Change submit button label?

the current submit button is "Pay", it would be great if it could be changed.

addressRequirement - address still being validated

I have addressRequirement set to 'none', and it does hide the address fields in the subscription form, but the fields are still being validated upon submission. i.e. the address fields are not visible in the signup form but when I press Continue I get "street address can't be empty" and similar errors.

Getting $0 price

In the JS-generated form, the per-month and order totals are both $0 even though I have a price configured in the Recurly web app.
It is, however, correctly pulling and displaying the plan's name. Is there anything else I need to do so the correct price appears?
Thanks

Wrong currency code

Hi, I have no idea if this is where you would like these things, but here it comes.

The currency symbol for Danish Kroner (DKK) is wrong. I have no idea what it currently is, looks like an asian symbol of some sort.

The correct symbol is "dkr" or just "kr". http://en.wikipedia.org/wiki/Danish_krone

I would suggest just going with "kr", since that is what most danes use themselves and it is also what you have used for the Swedish and Norwegian currency.

Updating phone number from the billing info update page

It should be possible to add the Phone Number field to the billing info update page. As it is, one can input a phone number on the subscription form, but then can't change it on on the billing info update form.

Passing dynamic information to the email templates

We're adding a field to our new subscription form that is related to an add-on. Ideally, we would be able to pass the contents of this field as {{ line_description }} in the email template, but it seems that this is not possible and that that line will just be the static information defined in the subscription setup. Anyone have clever workarounds to this?

buildSubscriptionForm returned the the error 'currency not configured'.

buildSubscriptionForm returned the the error 'currency not configured'.

I had to add a currency code to Recurly.config, even though a default currency was already set up in our account.

Configuring accepted cards breaks

using $.extend to update config means that trying to configure any fewer than four card types in acceptedCards will only update the first few, and won't alter the length of the array.

For example, calling Recurly.config({ acceptedCards: ['visa'] }) will change Recurly.settings.acceptedCards to ['visa', 'discover', 'mastercard', 'visa'] rather than just ['visa']

Update the changelog

The current downloadable version is 1.1.5, but the changelog only has entries through 1.1.3.

Bug with unbinding validated input

Recurly.js 2.0.0 has a significant bug with validating inputs. Previous version may suffer from this as well.

Line #1096 tries to .unbind the function bound to 'change keyup' events:

    $input.unbind(handler);

However, .unbind function requires the event object to be passed as an argument, not a callback function.
Lines #1091-1098 should be changed like this to fix that:

$input.bind('change keyup', function handler(ev) { 

  if(validator($input)) {
    $input.removeClass('invalid');
    $e.remove();
    $input.unbind(ev);
  }
});

Sorry for not posting that to a Git repo, but I'm not yet using Git.

bug in reference docs

http://docs.recurly.com/api/recurlyjs/reference#js-buildBillingInfoUpdateForm

successHandler should be updated to afterUpdate

The expiration date always defaults to January of next year

At https://github.com/recurly/recurly-js/blob/master/src/js/ui.js#L388, you find the following line that forces the year to be one more than the current year, essentially invalidating the call a few lines down (https://github.com/recurly/recurly-js/blob/master/src/js/ui.js#L419) to the inner function updateMonths().

  $yearSelect.val(year+1);

This is fixed (tested experimentally) by removing the +1 from the discovered year and allows the default expiration date to be May 2013 as of this writing.

I can submit a pull request, but I wasn't sure if there was reasoning behind the presence of the +1 or if it was, in fact, just a bug.

Recurly JS Minified Version not working

recurly.min.js of version v2.1.3 does not work. recurly.js works fine

Remove East Germany from the list of countries

Default AddOn Quantity

I'm trying to figure out how add an add-on with a quantity when calling Recurly.buildSubscriptionForm. I can't find it in the documentation anywhere, I started reading the source code and thought I'd ask here first before spending a lot of time in the source.

Our use case: we charge $9.95 for our service plus $2.95 for each additional user. We are using the additional users as an Add On for our plan. The account owner can add or remove users through the application during the free trial. When they do subscribe, we need to recurly.js form to populate the number of additional users as an Add On for the plan, and not allow the user to edit that number since it is based on the number of users they have created.

Any thoughts?

Entering incorrect coupon code makes price go to $0

https://js.recurly.com/examples/subscribe.html

fill in an invalid code
click subscribe
notice "$0.00 per month"

submitting patches

What's the official process for submitting patches to recurly.js?

I see you are compiling recurly.js from the js folder but this is not on github.

support for accountCode in buildSubscriptionForm

I would like to specify accountCode in buildSubscriptionForm. This would be similar to buildBillingInfoUpdateForm.

If accountCode is specified, I would expect the subscription to be associated to that accountCode.

Ability to adjust the quantity would be nice

Currently you can sign the quantity but can not set a default quantity on the form.

No IDs or names defined on form fields

Is there a reason that neither IDs nor names are defined on the input fields belonging to the forms that Recurly.js generates? It would make writing integration tests (i.e., filling out the forms with Capybara) much easier if they were.

vat as part of buildTransactionForm

the statement provided regarding this topic on http://docs.recurly.com/api/recurlyjs/faq is:
"VAT is only compatible with the subscription form and is not yet available for the one-time transactions form and on the billing information update form."

Are there any plans adding the vat to one time transaction forms? In theory the REST jsonp enpoint to create the transaction supports this (as listed on the billing info parameters on that page: http://docs.recurly.com/api/transactions).

Translation requires separate scripts.

In order to provide multilingual support, a new translation must be compiled for each desired language. Overrides can be inserted for error messages in R.locale.errors, and technically can also be done for all the DOM elements, but it would be nice if the R.locale object could be utilized a bit more throughout.

What is the current recommendation for providing multilingual support to our clients?