Recurly.js checkout not working in Firefox when in a Vue.js component

Question

The following code is a snippet I've stripped back to show this problem in isolation. It works in Chrome and Safari but I can't get it working in Firefox.

I'm building a Recurly.js checkout as a Vue component. The call to recurly.configure() replaces the four bottom input fields with hosted iframes to get the card details of a customer. The template used is just the example form from the recurly.js documentation https://dev.recurly.com/docs/recurlyjs

In Firefox (version 49, OSX), something goes wrong with the recurly initialisation as the iframes are present but the inputs have a value of hidden so they can't be edited. I can't see any js errors in the console though.

In fact, it does start working in Firefox if the call to recurly.configure() is placed at the bottom of the script instead of within the Vue component's ready hook. I'm hesitant to place it outside of the component though as the ready hook function is 'Called after compilation and the $el is inserted into the document for the first time' - from the Vue.js docs, so making sure the component is rendered and in the DOM.

In order for recurly.js to inject the card payment hosted fields into your form, the target elements must be present in the document at the time you make the recurly.configure call.

Any ideas how to fix this problem?

<!DOCTYPE html>
<html>
<head>
    <title></title>

    <style type="text/css">
        .recurly-hosted-field {
            border: 1px solid black;
            height: 20px;
            width: 200px;
            margin-top: 10px;
        }
    </style>
</head>
<body id="app">

    <checkout></checkout>

    <script src="https://js.recurly.com/v4/recurly.js"></script>
    <script type="text/javascript" src="http://cdn.jsdelivr.net/vue/1.0.28/vue.min.js"></script>

    <script>
        var Checkout = Vue.extend({
            template: '<form><input type="text" data-recurly="first_name"><input type="text" data-recurly="last_name"><div data-recurly="number"></div><div data-recurly="month"></div><div data-recurly="year"></div><div data-recurly="cvv"></div><input type="hidden" name="recurly-token" data-recurly="token"><button>submit</button></form>',
            ready: function() {
                recurly.configure({
                    publicKey: 'ewr1-hpPo5Al5WT46ulA4Rk2Z4t',
                });
            }
        });

        Vue.component('checkout', Checkout);

        new Vue({
            el: '#app',
        });

    </script>
</body>
</html>

Recurly.js checkout not working in Firefox when in a Vue.js component

0 Answers0