Question

我试图弄清楚如何在Recurly.js v3中使用插件。

我已将一个recurly.Pricing实例附加到我的表单，并为一个可选插件创建了一个复选框：

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

如果我按照文档中的说明使用data-recurly="addon"，则在附加表单时会出现Javascript错误：

Uncaught TypeError: Cannot read property 'addons' of undefined

所以我认为正确的值是data-recurly="addons"。

我还附加了事件以检测价格变化和插件设置：

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);
})

问题

单击复选框后，不会触发价格更改事件。我已经花了几个小时没有结果，所以任何像我这样的人都不会感谢任何帮助，因为他们在文档中找不到合适的例子。

提前谢谢。

Answer 1

文档是正确的，因为您应该使用data-recurly="addon"。

也就是说，看起来附加方法中的一个错误是尝试在添加计划之前向定价实例添加插件。因此，它无法从计划中找到所需的插件信息。

至于使用复选框，我已创建Pull Request here以添加对该输入类型的明确支持，因为它之前并未存在。它的归因值的方法对于数值来说并不理想，这在技术上属于该领域，但我认为它是一个很好的用例。

我将提交错误报告，以解决在计划可用之前设置插件的问题。现在，您可以尝试以下操作，这将在计划加载时以及每当有人选择其他计划时更新您的表单。

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));
});

这是an addon-enabled example here采用的策略。

Recurly.js v3和插件

1 个答案: