var token =
  "o.z8j8aaztW9tUtUg4dlVeYAx+L2MazOFGr0DY8yuK3u79MCYlGK4/q0t5AD1UgLAjXOohnxN8VTZfPswyZcwtChGNn1a8jFMmYWHmLN2cPDW9IrBt1RtrSuu+85HJI+4kML5sIk9SYvULDAU2k0X0E1KFYcPwjmmkUjktrEGtz48XCUM70aKUupkrTh8nL7CXpAXATzVUZ2gEld9jGINwECPPLWmu+cZ4CJb7QMJxnzKFD073+nq/eL+pMth7+u/SkmAWC0+jn8y+Lf6T5Q5PqB6wN7Mvosp8g7U7lbEW2wC0DA92pjblfDHVJOQUkjgT7B1GvryMokLvBjoiaLhKa55iKZE1YDlyqruILkoNF+zGSPS9r17qU6w4ziKhoMdSPzPBJBlLhQhz3MVANXbjfEfJwmtr/JJ1uStUfBFJ710cS1x7goxMJO/cl+q+LVtPy788EKFkgMc5OjfBNCsNL+dBDVbK5CiIJUSbOFzdqdjY/VJ14MEodsHYOwMAjuF4.KRFMeEj0SOur8MLZ362c/UZ/U/Az3CSUkr3/8EVDE6Y=";
var entryPoint = "bozeman-aikido";
var customCssUrl = "https://embedded-component-sandbox.payabli.com/customForm.css";
var payabliConfigCard = {
  type: "methodEmbedded",
  rootContainer: "pay-component-card",
  defaultOpen: "card",
  token: token,
  customCssUrl: customCssUrl,
  entryPoint: entryPoint,
  card: {
    enabled: true,
    amex: false,
    discover: true,
    visa: true,
    mastercard: true,
    inputs: {
      //here we are customizing the input fields
      cardHolderName: {
        label: "NAME ON CARD",
        placeholder: "",
        floating: false,
        value: "John Doe",
        size: 12,
        row: 0,
        order: 0
      },
      cardNumber: {
        label: "CARD NUMBER",
        placeholder: "1234 1234 1234 1234",
        floating: false,
        size: 6,
        row: 1,
        order: 0
      },
      cardExpirationDate: {
        label: "EXPIRATION DATE",
        placeholder: "MM/YY",
        floating: false,
        size: 6,
        row: 1,
        order: 1
      },
      cardCvv: {
        label: "CVV/CVC",
        placeholder: "CVV/CVC",
        floating: false,
        size: 6,
        row: 2,
        order: 0
      },
      cardZipcode: {
        label: "ZIP/POSTAL CODE",
        placeholder: "Zip/Postal Code",
        floating: false,
        size: 6,
        row: 2,
        order: 1,
        country: ["us", "ca"]
      }
    }
  },
  ach: {
    enabled: false
  },
  customerData: {
    customerNumber: "00001",
    firstName: "John",
    lastName: "Doeee",
    billingEmail: "johndoe@email.com"
  },
  functionCallBackSuccess: function (response) {
    alert("card success");
    // paycomponentCard.removeListener();
    paycomponentCard.payabliExec("reinit");
  },
  functionCallBackReady: function (data) {},
  functionCallBackError: function (errors) {
    alert("Error!");
    console.log(errors);
  }
};

var payabliConfigACH = {
  type: "methodEmbedded",
  entryPoint: entryPoint,
  rootContainer: "pay-component-card",
  defaultOpen: "ach",
  token: token,
  customCssUrl: customCssUrl,
  customerData: {
    customerNumber: "00001",
    firstName: "John",
    lastName: "Doe",
    billingEmail: "johndoe@email.com"
  },
  card: {
    enabled: false
  },
  ach: {
    enabled: true,
    checking: true,
    savings: true,
    inputs: {
      achAccountHolderName: {
        label: "ACCOUNTHOLDER NAME",
        floating: false,
        size: 6,
        row: 0,
        order: 0
      },
      achAccountType: {
        label: "ACCOUNT TYPE",
        floating: false,
        size: 6,
        row: 0,
        order: 1
      },
      achRouting: {
        label: "ROUTING NUMBER",
        floating: false,
        size: 6,
        row: 1,
        order: 0,
        confirm: true // Confirm routing number
      },
      achAccount: {
        label: "ACCOUNT NUMBER",
        floating: false,
        size: 6,
        row: 1,
        order: 1,
        confirm: true // Confirm account number
      }
    }
  },
  

  functionCallBackSuccess: function (response) {
    alert("ach");
    // paycomponentCard.payabliExec('reinit');
  },
  functionCallBackError: function (errors) {
    console.log(errors);
  },
  functionCallBackReady: function (data) {}
};

var paycomponentCard = new PayabliComponent(payabliConfigCard);

function executeActionCard() {
  paycomponentCard.payabliExec("pay", {
    paymentDetails: {
      totalAmount: 100,
      serviceFee: 0,
      categories: [
        {
          label: "payment",
          amount: 100,
          qty: 1
        }
      ]
    }
  });
}

let cardTab = document.getElementById("card-tab");
let bankTab = document.getElementById("bank-tab");
let payBtn = document.getElementById("btn-pay");

cardTab.addEventListener("click", function () {
  paycomponentCard.updateConfig(payabliConfigCard);
});

bankTab.addEventListener("click", function () {
  paycomponentCard.updateConfig(payabliConfigACH);
});

payBtn.addEventListener("click", () => {
  paycomponentCard.payabliExec("pay", {
    paymentDetails: {
      totalAmount: 100,
      serviceFee: 0,
      categories: [
        {
          label: "payment",
          amount: 100,
          qty: 1
        }
      ]
    }
  });
});