135 lines
5.3 KiB
HTML
135 lines
5.3 KiB
HTML
{include file="public/head"}
|
|
<link rel="stylesheet" href="/static/css/page-sqpay.css?v=1">
|
|
<script type="text/javascript" src="https://web.squarecdn.com/v1/square.js"></script>
|
|
<script type="text/javascript">
|
|
window.applicationId = "{$applicationId}";
|
|
window.locationId = "{$locationId}";
|
|
window.currency = "{$currency}";
|
|
window.country = "{$pay_country}";
|
|
window.idempotencyKey = "{$uid}";
|
|
</script>
|
|
</head>
|
|
<body class="sqpay-page">
|
|
<div class="sqpay-layout">
|
|
{include file="public/newnav"}
|
|
|
|
<main class="sqpay-main">
|
|
<div class="sqpay-shell">
|
|
<section class="sqpay-card">
|
|
<div class="sqpay-heading">
|
|
<h1 class="sqpay-title">{:lang('sqpay.payment_title')}</h1>
|
|
<p class="sqpay-order">
|
|
{:str_replace('%order_sn%', $order_sn ?? '', lang('pay.order_submitted'))}
|
|
</p>
|
|
</div>
|
|
|
|
<div class="sqpay-amount">
|
|
<p class="sqpay-amount-label">{:lang('sqpay.total_amount_label')}</p>
|
|
<p class="sqpay-amount-value">{$total_fee} {$currency}</p>
|
|
</div>
|
|
|
|
<div class="sqpay-grid">
|
|
<section class="sqpay-method">
|
|
<header class="sqpay-method-head">
|
|
<h2 class="sqpay-method-title">{:lang('sqpay.card_pay_title')}</h2>
|
|
<div class="sqpay-brand-list">
|
|
<img alt="Visa" src="/static/image/pay/visa.png">
|
|
<img alt="Mastercard" src="/static/image/pay/logo_mastercard.png">
|
|
<img alt="JCB" src="/static/image/pay/logo_jcb.png">
|
|
<img alt="Discover" src="/static/image/pay/logo_discover.png">
|
|
<img alt="Diners Club" src="/static/image/pay/logo_diners.png">
|
|
<img alt="CB" src="/static/image/pay/logo_cb.png">
|
|
<img alt="Amex" src="/static/image/pay/logo_amex.png">
|
|
</div>
|
|
</header>
|
|
<div class="sqpay-method-body">
|
|
<form class="payment-form" id="fast-checkout" autocomplete="off">
|
|
<div id="card-container"></div>
|
|
<button id="card-button" class="sqpay-pay-button" type="button">{:lang('sqpay.pay_now')}</button>
|
|
</form>
|
|
</div>
|
|
</section>
|
|
|
|
<aside class="sqpay-notice">
|
|
<h3 class="sqpay-notice-head">{:lang('sqpay.notice_title')}</h3>
|
|
<p class="sqpay-notice-body">{:lang('sqpay.notice_text')}</p>
|
|
</aside>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</main>
|
|
|
|
{include file="public/newfooter"}
|
|
</div>
|
|
<script>
|
|
const order_sn = "{$order_sn}";
|
|
const total_price = "{$total_price}";
|
|
const paySuccessText = "{:lang('sqpay.pay_success')}";
|
|
const payFailedText = "{:lang('sqpay.pay_failed')}";
|
|
|
|
async function CardPay(fieldEl, buttonEl) {
|
|
// Create a card payment object and attach to page
|
|
const card = await window.payments.card();
|
|
await card.attach(fieldEl);
|
|
|
|
async function eventHandler(event) {
|
|
try {
|
|
const result = await card.tokenize();
|
|
if (result.status === 'OK') {
|
|
window.createPayment(result.token);
|
|
}
|
|
} catch (e) {
|
|
console.log( e.message)
|
|
layer.msg(payFailedText, {icon: 2, time: 2000})
|
|
layer.closeAll();
|
|
}
|
|
}
|
|
|
|
buttonEl.addEventListener('click', eventHandler);
|
|
layer.closeAll();
|
|
}
|
|
|
|
async function SquarePaymentFlow() {
|
|
var load = layer.load(2, {shade: 0.3})
|
|
CardPay(document.getElementById('card-container'), document.getElementById('card-button'));
|
|
}
|
|
|
|
window.payments = Square.payments(window.applicationId, window.locationId);
|
|
window.createPayment = async function (token) {
|
|
var load = layer.load(2, {shade: 0.3})
|
|
const dataJsonString = JSON.stringify({
|
|
token,
|
|
idempotencyKey: window.idempotencyKey,
|
|
order_sn: order_sn,
|
|
amount: total_price,
|
|
});
|
|
|
|
try {
|
|
const response = await fetch(`{:url('sqpay/paySquare')}`, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: dataJsonString
|
|
});
|
|
const data = await response.json();
|
|
if (data['code'] == 1) {
|
|
// 跳转成功页面
|
|
layer.msg(paySuccessText, {icon: 1, time: 2000}, function () {
|
|
window.location.href = data.url;
|
|
layer.closeAll();
|
|
})
|
|
} else {
|
|
layer.msg(payFailedText, {icon: 2, time: 2000})
|
|
layer.closeAll();
|
|
}
|
|
} catch (error) {
|
|
layer.msg(payFailedText, {icon: 2, time: 2000})
|
|
layer.closeAll();
|
|
}
|
|
}
|
|
SquarePaymentFlow();
|
|
</script>
|
|
</body>
|
|
</html>
|