const recurly_form_verify = document.querySelector( '#pm-recurly-form-3ds' );
const recurly_active_verify = ( window.recurly && recurly_key && recurly_form_verify && errors ) ? true : false;

document.addEventListener( 'DOMContentLoaded', function() {
    if ( ! recurly_active_verify ) {
        console.log( 'Recurly verify not active' );
        return false;
    }
      // We expect this page to load with the following parameter pattern
      // `/3d-secure.html#token_id=xxx&action_token_id`
      // This is a simple parser for that pattern. You may use window.URLSearchParams
      // instead if IE11 support is not needed
      var hashParams = location.hash.substr(1).split('&').reduce(function (acc, i) {
        var [k,v] = i.split('=');
        acc[k]=v;
        return acc;
      }, {});
      // Configure Recurly.js
      recurly.configure(recurly_key);
      // In order to remain backend agnostic, this example passes the Recurly.js credit card token
      // to this page via the URL hash. Here we add it to the form so that it will be passed
      // to our backend
      document.querySelector('#recurly-token').setAttribute('value',hashParams.token_id);

      // Now we construct the 3-D Secure authentication flow

        var risk = recurly.Risk();
        var threeDSecure = risk.ThreeDSecure({ actionTokenId: hashParams.action_token_id });
        var container = document.querySelector('#container-3ds-authentication');


        // Handle errors that occur during 3-D Secure authentication
        threeDSecure.on('error', error);
        // 'token' is called when your user completes the 3-D Secure authentication flow
        threeDSecure.on('token', function (token) {
            console.log(token);
          // place the result token in your form so that it will be submitted
          // when the customer re-submits
          document.querySelector('#three-d-secure-token').setAttribute('value',token.id);
          // Hide the container once we have a token
          container.style.display = "none";
          // Show the loading message
          document.querySelector('.three-d-secure-submitting-messagge').style.display = "block";
          // submit the form automatically
          recurly_form_verify.submit();
        });

        // Attach our 3D Secure session to the container
        threeDSecure.attach(container);
        // Show the container

        container.style.display = "block";
      // runs some simple animations for the page
      document.querySelector('body').classList.add( 'show' );

      // A simple error handling function to expose errors to the customer
      function error (err) {
          console.log(err);
        if (err.fields) {
            document.querySelector('#errors').text('The following fields appear to be invalid: ' + err.fields.join(', '));
            loop( err.fields, function (i, field ) {
                document.querySelector( '[data-recurly=' + field + ']' ).classList.add( 'error' );
            } );
        //   $.each(err.fields, function (i, field) {
        //     document.querySelector('[data-recurly=' + field + ']').classList.add( 'error' );
        //   });
        } else if (err.message) {
            document.querySelector('#errors').innerHTML = '<p>'+err.message+'</p>';
        }
        document.querySelector('button').disabled = false;
      }
} );