rizdaprasetya/index.html

## index.html
<!DOCTYPE html>
<html>
  <head>
    <title>Sandbox</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.15.0/themes/prism.css" />
  </head>

  <body>
    <h3>Test Register Card API w/ JSONP method</h3>
    <pre class="cardData">Card Data:
</pre>
    <button class="registerBtn">Register!</button>
    <pre class="result">API response:
...
</pre>
<br><br>
<hr>
<br><br>
    <h3>JS Script used:</h3>
    <pre>
      <code
        class="language-javascript"
        id="sourceJs"
        style="max-width: 50vw;"
        ></code>
    </pre>

    <!-- Main example script for Register Card via JSONP -->
    <script type="text/javascript" class="mainScript">

      var registerCardApiUrl = "https://api.sandbox.midtrans.com/v2/card/register/";
      var cardData = {
        card_number: "4811 1111 1111 1114",
        card_exp_month: "03",
        card_exp_year: "2022",
        // TODO: replace client_key with your own
        client_key: "SB-Mid-client-61XuGAwQ8Bj8LxSS",
        callback: "onCardRegistered"
      };

      var doJsonpRequest = function(url) {
        var script = document.createElement("script");
        script.src = url;
        document.body.appendChild(script);
      };

      // This will be called after API request complete
      var onCardRegistered = function(responseObject) {
        // TODO: Replace with your own implementation
        console.log(`- onCardRegistered called w/ response:`);
        console.log(responseObject);
        // print to HTML as demo
        document.querySelector(".result").innerText +=
          JSON.stringify(responseObject, null, 2);
      };

      var triggerRegisterCard = function(){
      	var queryParam = new URLSearchParams(cardData);
        var finalUrl = registerCardApiUrl + "?" + queryParam;

        // this will produce final url like:
        // https://api.sandbox.midtrans.com/v2/card/register/?card_number=4811 1111 1111 1114&card_exp_month=03&card_exp_year=2022&client_key=SB-Mid-client-61XuGAwQ8Bj8LxSS&callback=onCardRegistered

        doJsonpRequest(finalUrl);

      }

      // Execute script on button click
      document.querySelector(".registerBtn")
        .addEventListener('click', triggerRegisterCard);
    </script>

    <!-- DEMO RELATED SCRIPTS -->
    <script type="text/javascript">
      document.querySelector(".cardData").innerText +=
        JSON.stringify(cardData, null, 2)
      document.querySelector("#sourceJs").innerHTML +=
        document.querySelector(".mainScript")
          .innerHTML
          .replace(/</g, "&lt;")
          .replace(/>/g, "&gt;")
          .replace(/\\/g, "");
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.15.0/prism.js"></script>

  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Sandbox</title>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.15.0/themes/prism.css" />
	</head>

	<body>
	<h3>Test Register Card API w/ JSONP method</h3>
	<pre class="cardData">Card Data:
	</pre>
	<button class="registerBtn">Register!</button>
	<pre class="result">API response:
	...
	</pre>
	<br><br>
	<hr>
	<br><br>
	<h3>JS Script used:</h3>
	<pre>
	<code
	class="language-javascript"
	id="sourceJs"
	style="max-width: 50vw;"
	></code>
	</pre>

	<!-- Main example script for Register Card via JSONP -->
	<script type="text/javascript" class="mainScript">

	var registerCardApiUrl = "https://api.sandbox.midtrans.com/v2/card/register/";
	var cardData = {
	card_number: "4811 1111 1111 1114",
	card_exp_month: "03",
	card_exp_year: "2022",
	// TODO: replace client_key with your own
	client_key: "SB-Mid-client-61XuGAwQ8Bj8LxSS",
	callback: "onCardRegistered"
	};

	var doJsonpRequest = function(url) {
	var script = document.createElement("script");
	script.src = url;
	document.body.appendChild(script);
	};

	// This will be called after API request complete
	var onCardRegistered = function(responseObject) {
	// TODO: Replace with your own implementation
	console.log(`- onCardRegistered called w/ response:`);
	console.log(responseObject);
	// print to HTML as demo
	document.querySelector(".result").innerText +=
	JSON.stringify(responseObject, null, 2);
	};

	var triggerRegisterCard = function(){
	var queryParam = new URLSearchParams(cardData);
	var finalUrl = registerCardApiUrl + "?" + queryParam;

	// this will produce final url like:
	// https://api.sandbox.midtrans.com/v2/card/register/?card_number=4811 1111 1111 1114&card_exp_month=03&card_exp_year=2022&client_key=SB-Mid-client-61XuGAwQ8Bj8LxSS&callback=onCardRegistered

	doJsonpRequest(finalUrl);

	}

	// Execute script on button click
	document.querySelector(".registerBtn")
	.addEventListener('click', triggerRegisterCard);
	</script>

	<!-- DEMO RELATED SCRIPTS -->
	<script type="text/javascript">
	document.querySelector(".cardData").innerText +=
	JSON.stringify(cardData, null, 2)
	document.querySelector("#sourceJs").innerHTML +=
	document.querySelector(".mainScript")
	.innerHTML
	.replace(/</g, "<")
	.replace(/>/g, ">")
	.replace(/\\/g, "");
	</script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.15.0/prism.js"></script>

	</body>
	</html>