购物网站唤起支付页面前端代码示例 - 轻松实现支付流程 - 常规

<!DOCTYPE html>
<html>
<head>
	<title>购物网站唤起支付页面</title>
	<meta charset='UTF-8'>
	<meta name='viewport' content='width=device-width, initial-scale=1.0'>
	<style>
		body {
			font-family: Arial, sans-serif;
			background-color: #f2f2f2;
		}
		.container {
			max-width: 800px;
			margin: 0 auto;
			padding: 20px;
			background-color: #fff;
			box-shadow: 0 0 10px rgba(0,0,0,0.2);
		}
		h1 {
			text-align: center;
			margin-bottom: 30px;
		}
		form {
			display: flex;
			flex-direction: column;
			align-items: center;
		}
		label {
			font-weight: bold;
			margin-bottom: 10px;
		}
		input[type=text], input[type=email], input[type=tel] {
			width: 100%;
			padding: 10px;
			margin-bottom: 20px;
			border-radius: 5px;
			border: none;
			box-shadow: 0 0 5px rgba(0,0,0,0.2);
		}
		input[type=submit] {
			background-color: #4CAF50;
			color: #fff;
			border: none;
			border-radius: 5px;
			padding: 10px 20px;
			cursor: pointer;
		}
		input[type=submit]:hover {
			background-color: #3e8e41;
		}
	</style>
</head>
<body>
	<div class='container'>
		<h1>唤起支付页面</h1>
		<form>
			<label for='name'>姓名</label>
			<input type='text' id='name' name='name' required>
			<label for='email'>邮箱</label>
			<input type='email' id='email' name='email' required>
			<label for='phone'>电话</label>
			<input type='tel' id='phone' name='phone' required>
			<input type='submit' value='提交'>
		</form>
	</div>
</body>
</html>