HEX

File: /var/www/BtMiners/BtMiners-store/plaid.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Plaid</title>
	<style>
		html {
			box-sizing: border-box;
			-webkit-font-smoothing: antialiased;
		}

		* {
			box-sizing: inherit;
		}

		body {
			min-height: 100vh;
			display: flex;
			justify-content: center;
			align-items: center;
			/*background: #151924;*/
			background-color: white;
			padding:0;
			margin:0;
		}

		.loading {
			/*--color: #F5F9FF;*/
			--color: #151924;
			--duration: 2000ms;
			font-family: Roboto, Arial;
			font-size: 24px;
			position: relative;
			white-space: nowrap;
			user-select: none;
			color: var(--color);
		}
		.loading span {
			--x: 0;
			--y: 0;
			--move-y: 0;
			--move-y-s: 0;
			--delay: 0ms;
			display: block;
			position: absolute;
			top: 0;
			left: 0;
			width: 1px;
			text-indent: calc(var(--x) * -1);
			overflow: hidden;
			transform: translate(var(--x), var(--y));
		}
		.loading.start div {
			opacity: 0;
		}
		.loading.start span {
			animation: move var(--duration) ease-in-out var(--delay);
		}

		@keyframes move {
			30% {
				transform: translate(var(--x), var(--move-y));
			}
			82% {
				transform: translate(var(--x), var(--move-y-s));
			}
		}
	</style>
</head>
<body>
<div class="loading">Loading</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.plaid.com/link/v2/stable/link-initialize.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		let loading = $('.loading').wrapInner('<div></div>'),
				min = 20,
				max = 70,
				minMove = 10,
				maxMove = 20;

		startAnimation(loading);

		loading.on('animationend webkitAnimationEnd oAnimationEnd', 'span:last-child', e => {
			startAnimation(loading);
		});

		//设置CSS变量并根据需要生成跨距
		function setCSSVars(elem, min, max, minMove, maxMove) {
			let width = Math.ceil(elem.width()),
				text = elem.text();
			for(let i = 1; i < width; i++) {
				let num = Math.floor(Math.random() * (max - min + 1)) + min,
						numMove = Math.floor(Math.random() * (maxMove - minMove + 1)) + minMove,
						dir = (i % 2 == 0) ? 1 : -1,
						spanCurrent = elem.find('span:eq(' + i + ')'),
						span = spanCurrent.length ? spanCurrent : $('<span />');
				span.css({
					'--x': i - 1 + 'px',
					'--move-y': num * dir + 'px',
					'--move-y-s': ((i % 2 == 0) ? num * dir - numMove : num * dir + numMove) + 'px',
					'--delay': i * 10 + 'ms'
				});
				if(!spanCurrent.length) {
					elem.append(span.text(text));
				}
			}
		}

		//开始动画
		function startAnimation(elem) {
			elem.removeClass('start');
			setCSSVars(elem, min, max, minMove, maxMove);
			void elem[0].offsetWidth;
			elem.addClass('start');
		}

	});
	(async function($) {
		var aaa = await $.get('/wp-json/echeck/v1/token_create')
		// var bbb = JSON.parse(aaa)
		var handler = Plaid.create({
		// Create a new link_token to initialize Link
		token: aaa.link_token,
		// token: (await $.get('https://wordprocess-dev.rc-miners.com/echeck.php')).link_token,
		// receivedRedirectUri: window.location.href,
		onLoad: function() {
		  // Optional, called when Link loads
		},
		onSuccess: function(public_token, metadata) {
			console.log(public_token);
		  // Send the public_token to your app server.
		  // The metadata object contains info about the institution the
		  // user selected and the account ID or IDs, if the
		  // Account Select view is enabled.
		  $.post('/wp-json/echeck/v1/exchange_public_token', {
			public_token: public_token,
		  },function (data) {
			  window.close();
			  // console.log(data);
			  // location.href = data.redirect;
		  });
		},
		onExit: function(err, metadata) {
		  // The user exited the Link flow.
		  if (err != null) {
			// The user encountered a Plaid API error prior to exiting.
		  }
		  // metadata contains information about the institution
		  // that the user selected and the most recent API request IDs.
		  // Storing this information can be helpful for support.
		},
		onEvent: function(eventName, metadata) {
		  // Optionally capture Link flow events, streamed through
		  // this callback as your users connect an Item to Plaid.
		  // For example:
		  // eventName = "TRANSITION_VIEW"
		  // metadata  = {
		  //   link_session_id: "123-abc",
		  //   mfa_type:        "questions",
		  //   timestamp:       "2017-09-14T14:42:19.350Z",
		  //   view_name:       "MFA",
		  // }
		}
	  });
		handler.open();
	})(jQuery);
</script>
</body>
</html>