Recurly.js v3 and addons

Question

I'm trying to figure out how to use addons in Recurly.js v3.

I've attached one recurly.Pricing instance to my form and created a checkbox for one optional addon:

HTML

<label for="plan-mobile" class="checkbox">
  <input type="checkbox" value="1" data-recurly="addons" data-recurly-addon="plan+mobile" id="plan-mobile">
  Mobile Version
</label>

Javascript

var pricing = recurly.Pricing();
pricing.attach(subscription_form.get(0)); // subscription_form is a jQuery object

If I use data-recurly="addon" as stated in the documentation I get a Javascript error when I attach the form:

Uncaught TypeError: Cannot read property 'addons' of undefined 

So I suppose that the correct value is data-recurly="addons" .

I've also attached events to detect the price change and the addon setting:

pricing.on('set.addon', function(addon) {
  console.log('set.addon');
  console.log(addon);
});

pricing.on('change', function(price){
  console.log('changed price');
  console.log(price);
})

The problem

When I click the checkbox no price change event is triggered. I've spent a few hours on this with no result so any help would be appreciated by anyone like me that don't find proper examples in the documentation.

Thank you in advance.

Answer 1

The documentation is correct in that you should be using data-recurly="addon" .

That said, it looks like there's a bug in the attach method that tries to add an addon to the pricing instance before the plan has been added. Thus, it fails to find the desired addon information from the plan.

As for using a checkbox, I've created a Pull Request here to add explicit support for that input type, as it wasn't present before. Its method of attributing value isn't ideal for numeric values, which that field technically is, but I think it's a good use case.

I'm going to submit a bug report to fix the issue around setting addons before the plan is available. For now, you might try the following, which will update your form when the plan loads, and whenever someone selects a different plan.

pricing.on('set.plan', function (plan) {
  // loop through your plan addons
  $.map(plan.addons, function (addon) {
    // add an input to the form corresponding to this addon
  });

  // since the form contents have changed, we need to refresh the binding
  pricing.attach(subscription_form.get(0));
});

This is the strategy employed by an addon-enabled example here .