mingca/accept_hosted.html

## accept_hosted.html
<!DOCTYPE html>

<html>
<head>
  <title>Accept</title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <meta name="viewport" content="width=320, user-scalable=no">

  <% if Accounting.config.gateway == :production %>
    <script type="text/javascript" src="https://js.authorize.net/v1/Accept.js" charset="utf-8"></script>
  <% else %>
    <script type="text/javascript" src="https://jstest.authorize.net/v1/Accept.js" charset="utf-8"></script>
  <% end %>

  <style type="text/css">
    body {
      display: flex;
      background: azure;
      justify-content: center;
      align-content: center;
    }
    button {
      text-align: center;
      align-self: center;
    }
  </style>
</head>
<body>
  <div id="container">
    <textarea id="log"></textarea>
  </div>

  <script>
    (function(){

      var promiseChain = Promise.resolve();

      var init = function() {

        const log = function(msg) {
          var logger = document.getElementById('log');
          logger.value = logger.value + '\n' + msg;
        }

        window.document.addEventListener('message', function(e) {
          log("message received from react native");

          var message;
          try {
            message = JSON.parse(e.data);
          }
          catch(err) {
            log("failed to parse message from react-native " + err);
            return;
          }

          promiseChain.then(function(){
            /* Make Accept.js Request */
            promiseChain = new Promise(function(resolve){
              window.Accept.dispatchData(message, resolve);
            }).then(function(result){
              log(JSON.stringify(result));
              window.postMessage(JSON.stringify(result));
            }).catch(function (e) {
              window.postMessage(JSON.stringify({error: e.message}));
              log('rnBridge send failed ' + e.message);
            });
          });
        });
        log(window.location.href);
      };

      init();

      /* Enable this to test on browser */
      // var event = new CustomEvent("message", { "detail": "Example of an event" });
      // window.document.dispatchEvent(event);

    }());
  </script>

</body>
</html>
	<!DOCTYPE html>

	<html>
	<head>
	<title>Accept</title>
	<meta http-equiv="content-type" content="text/html; charset=utf-8">
	<meta name="viewport" content="width=320, user-scalable=no">

	<% if Accounting.config.gateway == :production %>
	<script type="text/javascript" src="https://js.authorize.net/v1/Accept.js" charset="utf-8"></script>
	<% else %>
	<script type="text/javascript" src="https://jstest.authorize.net/v1/Accept.js" charset="utf-8"></script>
	<% end %>

	<style type="text/css">
	body {
	display: flex;
	background: azure;
	justify-content: center;
	align-content: center;
	}
	button {
	text-align: center;
	align-self: center;
	}
	</style>
	</head>
	<body>
	<div id="container">
	<textarea id="log"></textarea>
	</div>

	<script>
	(function(){

	var promiseChain = Promise.resolve();

	var init = function() {

	const log = function(msg) {
	var logger = document.getElementById('log');
	logger.value = logger.value + '\n' + msg;
	}

	window.document.addEventListener('message', function(e) {
	log("message received from react native");

	var message;
	try {
	message = JSON.parse(e.data);
	}
	catch(err) {
	log("failed to parse message from react-native " + err);
	return;
	}

	promiseChain.then(function(){
	/* Make Accept.js Request */
	promiseChain = new Promise(function(resolve){
	window.Accept.dispatchData(message, resolve);
	}).then(function(result){
	log(JSON.stringify(result));
	window.postMessage(JSON.stringify(result));
	}).catch(function (e) {
	window.postMessage(JSON.stringify({error: e.message}));
	log('rnBridge send failed ' + e.message);
	});
	});
	});
	log(window.location.href);
	};

	init();

	/* Enable this to test on browser */
	// var event = new CustomEvent("message", { "detail": "Example of an event" });
	// window.document.dispatchEvent(event);

	}());
	</script>

	</body>
	</html>