Create Affirm checkout button

by chantalaffirm

HTML

<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">
<div>
  <p class="fs-5 fw-medium" id="amount-tag-tatal">
    <strong>Total amount:
      <span id="total-amount">$1,234.56</span></strong>
  </p>
  <p>
    <input id="cc-number" type="text" placeholder="Credit card number" />
  </p>
  <p>
    <input id="cc-exp" type="text" placeholder="MM/YY" />
  </p>
  <p>
    <input id="cc-csc" type="text" placeholder="CVV" />
  </p>
  <p id="buttonLocation">
  
  </p>
</div>

JavaScript

const omniHotelsConfig = {
  publicKey: '1JBIENSSOW6S62OV',
  afjsScriptUrl: 'https://sandbox.affirm-stage.com/js/v2/affirm.js',
  totalAmountTag: '#grand-total-price',
  ccNumberTag: '#creditCardNumber',
  expMonthTag: '#expMonth',
  expYearTag: '#expYear',
  /*     cscTag: '#cc-csc', */
  buttonLocation: '#creditCardInputs',
};
const bookingsComConfig = {
  publicKey: '1JBIENSSOW6S62OV',
  afjsScriptUrl: 'https://sandbox.affirm-stage.com/js/v2/affirm.js',
  totalAmountTag: '.e2e-price-details__total-charge--user',
  ccNumberTag: 'input[autocomplete="cc-number"]',
  expMonthTag: 'input[autocomplete="cc-exp"]',
  expYearTag: 'input[autocomplete="cc-exp"]',
  cscTag: 'input[autocomplete="cc-csc"]',
  buttonLocation: '.pc-available-payment-methods-container',
};
const jsFiddleConfig = {
  publicKey: '1JBIENSSOW6S62OV',
  afjsScriptUrl: 'https://sandbox.affirm-stage.com/js/v2/affirm.js',
  totalAmountTag: '#total-amount',
  ccNumberTag: '#cc-number',
  expMonthTag: '#cc-exp',
  expYearTag: '#cc-exp',
  cscTag: '#cc-csc',
  buttonLocation: '#buttonLocation',
}
const affirmDemo = {
  config: jsFiddleConfig,
  createBreezeButton() {
    const buttonParent = document.querySelector(affirmDemo.config.buttonLocation);
    const button = document.createElement('button');
    button.innerText = 'Checkout with Affirm';
    button.classList.add('affirm-lite-checkout', 'affirm-checkout-btn');
    button.style.margin = '10px 0 20px';
    button.setAttribute('data-total-amount-tag', affirmDemo.config.totalAmountTag);
    button.setAttribute('data-cc-number-tag', affirmDemo.config.ccNumberTag);
    button.setAttribute('data-cc-exp-month-tag', affirmDemo.config.expMonthTag);
    button.setAttribute('data-cc-exp-year-tag', affirmDemo.config.expYearTag);
    button.setAttribute('data-cc-csc-tag', affirmDemo.config.cscTag);
    button.setAttribute('type', 'button');
    buttonParent.appendChild(button);
  },
  runAffirm() {
    /* BEGIN AFFIRM.JS */
    _affirm_config = {
     ...