benlienart/apm_test.html

## apm_test.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Test</title>
    <link href="style.css" rel="stylesheet" />
  </head>
  <body>
    <div class="container">
      <form action="" method="POST" id="apms-form">
        <div id="results">
          <div id="errors"></div>
          <div id="success"></div>
          <div id="loading">Loading...</div>
          <input id="success-token" class="hidden" />
        </div>
      </form>
    </div>
    <script src="https://js.processout.ninja/processout.js"></script>
    <script type="text/javascript">
      document.addEventListener("DOMContentLoaded", function() {
        var client = new ProcessOut.ProcessOut(
          "proj_WWDbkVoacB16Ji121AyUuatsh1lERMte"
        );
        client.fetchGatewayConfigurations(
          {
            invoiceID: "iv_gMvGvlAPTcBoYYjaMcBopRnl53rzvG1a",
            filter: "alternative-payment-methods"
          },
          processoutAPMsReady,
          function(err) {
            document.getElementById("loading").className = "hidden";
            document.getElementById("errors").innerHTML =
              "Woops, couldn't fetch APMs: " + err;
          }
        );

        function processoutAPMsReady(confs) {
          document.getElementById("loading").className = "hidden";
          var formWrapper = document.getElementById("apms-form");
          for (var conf of confs) {
            var el = document.createElement("div");
            el.className = "button";
            el.innerHTML = "Pay with " + conf.gateway.display_name;

            conf.hookForInvoice(
              el,
              function(token) {
                document.getElementById("errors").innerHTML = "";
                document.getElementById("success").innerHTML =
                  "Your user went through the entire APM payment flow. Use the token below to verify the payment in your backend.";
                document.getElementById("success-token").value = token;
                document.getElementById("success-token").className = "";
              },
              function(err) {
                document.getElementById("errors").innerHTML = err.message;
                document.getElementById("success").innerHTML = "";
                document.getElementById("success-token").className = "hidden";
              }
            );

            // Inject our APM element in the form
            formWrapper.appendChild(el);
          }
        }
      });
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Test</title>
	<link href="style.css" rel="stylesheet" />
	</head>
	<body>
	<div class="container">
	<form action="" method="POST" id="apms-form">
	<div id="results">
	<div id="errors"></div>
	<div id="success"></div>
	<div id="loading">Loading...</div>
	<input id="success-token" class="hidden" />
	</div>
	</form>
	</div>
	<script src="https://js.processout.ninja/processout.js"></script>
	<script type="text/javascript">
	document.addEventListener("DOMContentLoaded", function() {
	var client = new ProcessOut.ProcessOut(
	"proj_WWDbkVoacB16Ji121AyUuatsh1lERMte"
	);
	client.fetchGatewayConfigurations(
	{
	invoiceID: "iv_gMvGvlAPTcBoYYjaMcBopRnl53rzvG1a",
	filter: "alternative-payment-methods"
	},
	processoutAPMsReady,
	function(err) {
	document.getElementById("loading").className = "hidden";
	document.getElementById("errors").innerHTML =
	"Woops, couldn't fetch APMs: " + err;
	}
	);

	function processoutAPMsReady(confs) {
	document.getElementById("loading").className = "hidden";
	var formWrapper = document.getElementById("apms-form");
	for (var conf of confs) {
	var el = document.createElement("div");
	el.className = "button";
	el.innerHTML = "Pay with " + conf.gateway.display_name;

	conf.hookForInvoice(
	el,
	function(token) {
	document.getElementById("errors").innerHTML = "";
	document.getElementById("success").innerHTML =
	"Your user went through the entire APM payment flow. Use the token below to verify the payment in your backend.";
	document.getElementById("success-token").value = token;
	document.getElementById("success-token").className = "";
	},
	function(err) {
	document.getElementById("errors").innerHTML = err.message;
	document.getElementById("success").innerHTML = "";
	document.getElementById("success-token").className = "hidden";
	}
	);

	// Inject our APM element in the form
	formWrapper.appendChild(el);
	}
	}
	});
	</script>
	</body>
	</html>