var paysafeCheckoutInstance = undefined;
// Base 64 encoded version of the Single-Use-Token API key.
// Create the key below by concatenating the API username and password
// separated by a colon and Base 64 encoding the result
var apiKey = "T1QtMTE3MDQwOkItcWEyLTAtNTk1NjRlNWMtMC0zMDJjMDIxNDdmMDU4M2I2OGY4ZWQyNjkxNDIxMDczMzZiYWIyMTZmOWMzZGJiNTEwMjE0MTgwYzY1NGQ3OTgzZmI2NTliYzEzZWY4YWMyZmQ1MTliMjVhOTQxZQ==";
var $form = $("#payment-form");
var $payButton = $form.find(".pay");
var options = {
  environment: "TEST",
  amount: 5,
  currency: "USD",
  companyName: "Example Inc.",
  holderName: "John Smith",
  displayPaymentMethods: ["cards"],
  accounts: {
    CC: 1001606520 // 3DS enabled account ID
  },
  threeDS: {
    useThreeDSecureVersion2: true,
    authenticationPurpose: "PAYMENT_TRANSACTION",
    maxAuthorizationsForInstalmentPayment: 5,
    billingCycle: {
      endDate: "2020-01-26",
      frequency: 5
    }
  }
};

$payButton.bind("click", function (event) {
  $payButton.html("Processing <i class='fa fa-spinner fa-pulse'></i>");
  paysafe.checkout.setup(apiKey, options, function (instance, error, result) {
    // handle result or error
    if (error) {
      console.log(error);
      $payButton.html("Try again").prop("disabled", false);
      $form.find(".payment-errors").text(error.displayMessage);
      $form.find(".payment-errors").closest(".row").show();
    } else {
      $form.find(".payment-errors").closest(".row").hide();
      $form.find(".payment-errors").text("");

      // response contains token
      console.log(result.token);

      instance.showSuccessScreen("Successfully issued single use token with 3D Secure 2 details in it.");

      // you would send the "token" to your server here using AJAX. The delay function simulates this process.
      delay(function () {
        $payButton.html("Payment successful <i class='fa fa-check'></i>");
        $payButton.prop("disabled", true);
        showToken(result.token);
        instance.close();
        // do stuff
      }, 2000);// end delay
    }
  }, function (stage) {
    if (stage === "BeforePayment" || stage === "DuringPayment") {
      $payButton.html("Try again").prop("disabled", false);
    }
  });
});

var delay = (function () {
  var timer = 0;
  return function (callback, ms) {
    clearTimeout(timer);
    timer = setTimeout(callback, ms);
  };
})();

function showToken(token) {
  var codetoken = $("span:contains(\"PAYMENT TOKEN RECEIVED FROM CLIENT BROWSER\")").first();
  if (codetoken.length == 1) {
    codetoken.attr("id", "sampletoken");
  }
  else {
    codetoken = $("#sampletoken");
  }
  var tokenP = $("#token");

  codetoken.text('\"' + token + '\"');
  tokenP.text('Returned single-use token ' + token);
}