Connect-E - Standard Repeat Payment

<div id="recurring-demo-payment"></div>
<div id="recurring-errors"></div>
<button id="recurring-test-pay" class="btn-primary btn pull-right" data-loading-text="Processing...">Pay</button>
<div id="recurring-demo-result" style="display: none">
    <h5>Payment Complete</h5>
    <dl>
        <dt>Status Code</dt>
        <dd id="recurring-status-code"></dd>
        <dt>Auth Code</dt>
        <dd id="recurring-auth-code"></dd>
    </dl>
</div>

const config = {
  onIframeLoaded: () => { console.log("iframe loaded") },
  paymentDetails: {
      paymentToken: /*access token here*/
  },
  containerId: "recurring-demo-payment",
  fontCss: ['https://fonts.googleapis.com/css?family=Do+Hyeon'],
  styles: {
      cv2: {
          default: {
              color: "black",
              textDecoration: "none",
              fontFamily: "'Do Hyeon', sans-serif",
              boxSizing: "border-box",
              padding: ".375rem .75rem",
              boxShadow: 'none',
              fontSize: '1rem',
              borderRadius: '.25rem',
              lineHeight: '1.5',
              backgroundColor: '#fff'
          },
          focus: {
              color: '#495057',
              backgroundColor: '#fff',
              borderColor: '#80bdff',
              outline: '0',
              boxShadow: '0 0 0 0.2rem rgba(0,123,255,.25)'
          },
          error: {
              color: "#B00",
              borderColor: "#B00"
          },
          valid: {
              color: "green"
          },
          label: {
              display: 'none'
          },
          container: {
              width: "50%",
              float: "left",
              paddingLeft: "5px",
              boxSizing: "border-box"
          },
      },

  },
  text: {
      cv2: {
          label: "CVV",
          placeholder: "CVV"
      }
  }
};

const recurringPayment = new Connect.ConnectERecurringPayment(config, displayErrors);

const btnRecurringTestPay = document.getElementById("recurring-test-pay");
btnRecurringTestPay.onclick = () =>{
  btnRecurringTestPay.innerText = 'loading';
  btnRecurringTestPay.setAttribute("disabled", "true");
  recurringPayment.executePayment()
      .then(function(data) {
          document.getElementById("recurring-demo-payment").hidden = true;
          btnRecurringTestPay.remove();
          document.getElementById("recurring-demo-result").hidden = false;
          document.getElementById("recurring-status-code").innerText = data.statusCode;
          document.getElementById("recurring-auth-code").innerText = data.authCode;
      }).catch(function(data) {
              console.log('Payment Request failed: ' + data);
              btnRecurringTestPay.innerText = 'Pay';
              btnRecurringTestPay.removeAttribute("disabled");
              if (typeof data === 'string') {
                  document.getElementById("recurring-errors").innerText = data;
              }
              if (data && data.message) {
                  document.getElementById("recurring-errors").innerText = data.message;
              }
          }
      );
  };

function displayErrors(errors) {
  const errorsDiv = document.getElementById('recurring-errors');
  errorsDiv.innerHTML = '';
  if (errors && errors.length) {
      const list = document.createElement("ul");
      for (const error of errors){
          const item = document.createElement("li");
          item.innerText = error.message;
          list.appendChild(item);
      }
      errorsDiv.appendChild(list);
  }
}

#demo-payment iframe { width: 100%; }

#demo-result, #demo-payment { padding: 5px; }

#errors li { color: #B00; }

iframe.threeDs {
    width: 400px;
    height: 400px;
    margin: 100px 0 0 -175px;
    position: fixed;
    top: 0;
    left: 50%;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.6);
    background-color: white;
}