Recurly.js version 3 with additional features

Question

Recurly.js version 3 with additional features

I'm currently exploring the functionality of addons in Recurly.js v3.

For my form, I've linked a recurly.Pricing instance and added a checkbox for an 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

When following the documentation and using data-recurly="addon", I encountered a JavaScript error upon form attachment:

Uncaught TypeError: Cannot read property 'addons' of undefined

This led me to believe that the correct attribute should be data-recurly="addons".

I have also implemented events to track price changes and addon selections:

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 issue

Upon clicking the checkbox, no price change event is triggered. I've dedicated hours to troubleshooting this without any success, so if anyone can provide guidance or relate to struggling with the documentation, it would be greatly appreciated.

Thank you in advance.

javascript recurly

Answer 1

Answer №1

It is important to note that the correct attribute to use is data-recurly="addon".

However, there seems to be an issue with the attach method where it tries to add an addon to the pricing instance before the plan has been added. This results in the failure to locate the desired addon information from the plan.

In relation to using a checkbox, I have submitted a Pull Request here to include explicit support for this input type. Previously, this functionality was not available. Although the value attribution method may not be ideal for numeric values, I believe it serves as a good solution in this scenario.

I will be reporting a bug to address the issue regarding setting addons before the plan is accessible. In the meantime, you can try the following approach, which will update your form upon loading the plan and whenever a different plan is selected.

pricing.on('set.plan', function (plan) {
  // iterate through the plan's addons
  $.map(plan.addons, function (addon) {
    // incorporate an input in the form for each addon
  });

  // since the form content has changed, we must refresh the binding
  pricing.attach(subscription_form.get(0));
});

This method is demonstrated in this example incorporating addons.

Answer 2

It is important to note that the correct attribute to use is data-recurly="addon".

However, there seems to be an issue with the attach method where it tries to add an addon to the pricing instance before the plan has been added. This results in the failure to locate the desired addon information from the plan.

In relation to using a checkbox, I have submitted a Pull Request here to include explicit support for this input type. Previously, this functionality was not available. Although the value attribution method may not be ideal for numeric values, I believe it serves as a good solution in this scenario.

I will be reporting a bug to address the issue regarding setting addons before the plan is accessible. In the meantime, you can try the following approach, which will update your form upon loading the plan and whenever a different plan is selected.

pricing.on('set.plan', function (plan) {
  // iterate through the plan's addons
  $.map(plan.addons, function (addon) {
    // incorporate an input in the form for each addon
  });

  // since the form content has changed, we must refresh the binding
  pricing.attach(subscription_form.get(0));
});

This method is demonstrated in this example incorporating addons.

Recurly.js version 3 with additional features

Answer №1

Similar questions

Issues with Bootstrap Navigation Collapse Utilizing Data Attributes

How to round whole numbers to whole numbers using JavaScript?

Refreshing data and manipulating arrays using AngularJS

Tips for incorporating ajax to load a new webpage into a specific div container

The Intersection Observer API is not compatible with using transform: translateX()

Utilizing long polling technique with jQuery/AJAX on the server end

There seems to be a problem as exits.success is not a recognized function -

Display a particular div when a specific image is present within another div

Creating pathways in AJAX with Rails

My component fails to load using Angular Router even though the URL is correct

Rearrange elements in an array

Using Jest or Mocha alongside Vue: Uncaught SyntaxError: Cannot use import statement outside a module

How can the outer function be connected to the resolve method of $routeProvider?

Structural engineering for massive webpage

Jquery Timer that can be toggled on and off with a single button

Position the div in the center of a container that is 100% width and has floating elements with dynamic widths

Experiencing issues with Errors when Targeting ES5 in Angular2 TypeScript?

Using THREE.js to animate objects and have them settle onto a specific face

Why does adding to an array in the Vuex store replace all existing values with the last entry?

The table disappears when there is no data available in the database