How to use Recurly.js with ASP.Net
Friday, May 18, 2012 at 8:08AM We’ve recently been looking at using Recurly to handle subscription payments for a client. One of the benefits of Recurly as a platform is it’s API and the level of integration that you can achieve. One part of the API isn’t well documented for .Net developers and that’s how to achieve integration with Recurly.js
Recurly.js was attractive as a solution as it has a lower PCI compliance overhead, and rather uniquely for a payment system allows a fair amount of control over the presentation of the payment forms.
Recurly provide examples in Python / Ruby and PHP, but unfortunately not in .Net, fortunately there is a good starting point in the .Net client library that can be easily pulled from GitHub project site.
https://github.com/recurly/recurly-client-net
Once you have this incorporated into your .Net solution, getting Recurly.js to work is actually very easy.
Step 1 – The basics
To make use of Recurly.js you simply need to include links to jQuery and the Recurly.js in the
of the HTML page, we’d advocate including the jQuery from a CDN for performance reasons in real world usage.<script src="/js/jquery-1.7.1.js"></script> <script src="/js/recurly.min.js"></script>
Once these have been included, you simply need to add the following script to the head as well, this is just a placeholder for now - but should render the form for you.
<script>
Recurly.config({
subdomain: 'recurlyjsdemo-test'
, currency: 'USD'
, country: 'US'
});
Recurly.buildBillingInfoUpdateForm({
target: '#recurly-update-billing-info'
, accountCode: 'testaccount'
, distinguishContactFromBillingInfo: false
, successURL: 'confirmation.html'
, signature: '718b7edee68792a690da68a3161ceae045e32b6f|account%5Baccount_code%5D=testaccount&nonce=4facf840e3f65×tamp=1336735808'
});
</script>
Once these elements are in place in the <head> the only other thing you need is to add a <div> to the page with an id that you’ve referenced in the <script> you’ve just added.
This might look something like this:
<body>
<h1>Update Billing Info</h1>
<h2>Account Code: testaccount (exists)</h2>
<div id="recurly-update-billing-info">
</div>
</body>
At this point – when you view your .aspx page you should see the Recurly form on the page.
Step 2 – Creating the signature
This is the part that is least clear from the Recurly documentation, but very straightforward thanks to the .Net client available on GitHub. There are static methods available within the RecurlyVerification class to generate the signature for you.
This means that the work in creating a 160-bit HMAC-SHA1 hash code in C# has already been implemented for you, and looking at StackOverflow, this seems to be an area that has caused problems for people looking to implement the solution using Java.
public string RecurlySignature
{
get
{
return RecurlyVerification.SignBillingInfoUpdate("AccountCode");
}
}
To get the signature into the JavaScript you can simply call the property within your code behind on within the markup on the .aspx
// Signature must be generated server-side with a utility method provided // in client libraries. signature: '<%= RecurlySignature %>', successURL: '/sign-up/payment-complete/', accountCode: '<%= RecurlyAccountCode %>'
The <%= RecurlySignature %> will create the necessary signature for the post to work.
Step 3 – Styling the form
We were able to achieve a very good likeness between this form and the other forms that we have created on the site. You can read more on how to style the form at js.recurly.com
Thank you to kayh who initially pointed me in the correct direction for a .Net implementation, hopefully this will be useful for other .Net developers looking at Recurly.js
1 Comment 
Reader Comments (1)
Man you saved my bacon, that client library said it hadn't been updated in 2 years so I was thinking, "Crap, I'm going to have to convert all that junk from php/ruby to .net".
Thanks