405 lines
15 KiB
HTML
Executable File
405 lines
15 KiB
HTML
Executable File
@{
|
|
Layout = "";
|
|
}
|
|
@model Nop.Plugin.Payments.TapPay.Models.PaymentInfoModel
|
|
|
|
<input type="hidden" asp-for="AppId" />
|
|
<input type="hidden" asp-for="AppKey" />
|
|
<input type="hidden" asp-for="ServerType" />
|
|
<input type="hidden" id="Prime" name="Prime" />
|
|
|
|
<style>
|
|
.tappay-table {
|
|
width: 100%;
|
|
border-collapse: separate;
|
|
border-spacing: 2px 10px;
|
|
}
|
|
|
|
.tappay-table label {
|
|
font-weight: 600;
|
|
color: #555;
|
|
}
|
|
|
|
.tappay-table .form-control,
|
|
.tappay-table .tappay-input {
|
|
height: 38px;
|
|
border: 1px solid #ccc;
|
|
border-radius: 4px;
|
|
padding: 8px;
|
|
box-sizing: border-box;
|
|
transition: border-color .2s ease, color .2s ease, box-shadow .2s ease;
|
|
}
|
|
|
|
.tappay-table .tappay-input {
|
|
width: 100%;
|
|
}
|
|
|
|
.tappay-table .has-error .form-control,
|
|
.tappay-table .has-error .tappay-input {
|
|
border-color: #e74c3c;
|
|
color: #e74c3c;
|
|
box-shadow: 0 0 0 1px rgba(231, 76, 60, 0.15);
|
|
}
|
|
|
|
.tappay-table .has-success .form-control,
|
|
.tappay-table .has-success .tappay-input {
|
|
border-color: #2ecc71;
|
|
color: #2ecc71;
|
|
box-shadow: 0 0 0 1px rgba(46, 204, 113, 0.15);
|
|
}
|
|
|
|
.tappay-table .phone-wrapper {
|
|
display: flex;
|
|
gap: 6px;
|
|
align-items: center;
|
|
}
|
|
|
|
.tappay-table .country-code-input {
|
|
max-width: 70px;
|
|
text-align: center;
|
|
}
|
|
|
|
.tappay-table .country-prefix {
|
|
font-weight: 600;
|
|
margin-right: 4px;
|
|
}
|
|
</style>
|
|
|
|
<table class="tappay-table" width="100%" cellspacing="2" cellpadding="1" border="0">
|
|
<tr class="card-number-group">
|
|
<td>
|
|
<label><span id="cardtype"></span>@T("Payment.CardNumber"):</label>
|
|
</td>
|
|
<td>
|
|
<div class="form-control card-number"></div>
|
|
</td>
|
|
</tr>
|
|
<tr class="expiration-date-group">
|
|
<td>
|
|
<label>@T("Payment.ExpirationDate"):</label>
|
|
</td>
|
|
<td>
|
|
<div class="form-control expiration-date"></div>
|
|
</td>
|
|
</tr>
|
|
<tr class="ccv-group">
|
|
<td>
|
|
<label>@T("Payment.CardCode"):</label>
|
|
</td>
|
|
<td>
|
|
<div class="form-control ccv"></div>
|
|
</td>
|
|
</tr>
|
|
<tr class="name-en-group">
|
|
<td>
|
|
<label>@T("Payment.CardHolderName"):</label>
|
|
</td>
|
|
<td>
|
|
<input class="tappay-input" type="text" id="CardholderNameEn" name="CardholderNameEn" maxlength="45" placeholder="@T("Payment.CardHolderName")"/>
|
|
</td>
|
|
</tr>
|
|
<tr class="email-group">
|
|
<td>
|
|
<label>@T("Payment.CardHolderEmail"):</label>
|
|
</td>
|
|
<td>
|
|
<input class="tappay-input" type="text" id="CardholderEmail" name="CardholderEmail" maxlength="40" placeholder="@T("Payment.CardHolderEmail")"/>
|
|
</td>
|
|
</tr>
|
|
<tr id="phone_group">
|
|
<td>
|
|
<label>@T("Payment.CardHolderPhone"):</label>
|
|
</td>
|
|
<td>
|
|
<div class="phone-wrapper">
|
|
<div class="phone-code-group">
|
|
<span class="country-prefix">+</span>
|
|
<input class="tappay-input country-code-input" type="tel" id="CardholderPhoneNumberCountryCode" name="CardholderPhoneNumberCountryCode" minlength="1" maxlength="4" placeholder="886" value="886"/>
|
|
</div>
|
|
<div class="phone-number-group">
|
|
<input class="tappay-input phone-number-input" type="tel" id="CardholderPhoneNumber" name="CardholderPhoneNumber" maxlength="16" placeholder="912345678"/>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
<script asp-location="Footer">
|
|
var tappayCustomFieldState = {
|
|
nameEn: { valid: false, dirty: false },
|
|
email: { valid: false, dirty: false },
|
|
phoneCode: { valid: false, dirty: false },
|
|
phoneNumber: { valid: false, dirty: false }
|
|
};
|
|
|
|
var tappayCanGetPrime = false;
|
|
|
|
function setGroupState(selector, isValid, isDirty) {
|
|
var group = $(selector);
|
|
group.removeClass('has-error has-success');
|
|
if (isDirty) {
|
|
group.addClass(isValid ? 'has-success' : 'has-error');
|
|
}
|
|
}
|
|
|
|
function validateNameEn(markDirty) {
|
|
var value = $('#CardholderNameEn').val().trim();
|
|
tappayCustomFieldState.nameEn.dirty = tappayCustomFieldState.nameEn.dirty || markDirty || value.length > 0;
|
|
tappayCustomFieldState.nameEn.valid = /^[A-Za-z]+(?:[\s'-][A-Za-z]+)*$/.test(value) && value.length > 1;
|
|
setGroupState('.name-en-group', tappayCustomFieldState.nameEn.valid, tappayCustomFieldState.nameEn.dirty);
|
|
return tappayCustomFieldState.nameEn.valid;
|
|
}
|
|
|
|
function validateEmail(markDirty) {
|
|
var value = $('#CardholderEmail').val().trim();
|
|
tappayCustomFieldState.email.dirty = tappayCustomFieldState.email.dirty || markDirty || value.length > 0;
|
|
tappayCustomFieldState.email.valid = /^[^\s@@]+@@[^\s@@]+\.[^\s@@]+$/.test(value);
|
|
setGroupState('.email-group', tappayCustomFieldState.email.valid, tappayCustomFieldState.email.dirty);
|
|
return tappayCustomFieldState.email.valid;
|
|
}
|
|
|
|
function validatePhoneCode(markDirty) {
|
|
var value = $('#CardholderPhoneNumberCountryCode').val().trim();
|
|
tappayCustomFieldState.phoneCode.dirty = tappayCustomFieldState.phoneCode.dirty || markDirty || value.length > 0;
|
|
tappayCustomFieldState.phoneCode.valid = /^\d{1,4}$/.test(value);
|
|
setGroupState('#phone_group .phone-code-group', tappayCustomFieldState.phoneCode.valid, tappayCustomFieldState.phoneCode.dirty);
|
|
return tappayCustomFieldState.phoneCode.valid;
|
|
}
|
|
|
|
function validatePhoneNumber(markDirty) {
|
|
var value = $('#CardholderPhoneNumber').val().trim();
|
|
tappayCustomFieldState.phoneNumber.dirty = tappayCustomFieldState.phoneNumber.dirty || markDirty || value.length > 0;
|
|
tappayCustomFieldState.phoneNumber.valid = /^\d{4,16}$/.test(value);
|
|
setGroupState('#phone_group .phone-number-group', tappayCustomFieldState.phoneNumber.valid, tappayCustomFieldState.phoneNumber.dirty);
|
|
return tappayCustomFieldState.phoneNumber.valid;
|
|
}
|
|
|
|
function areCustomFieldsValid(markDirty) {
|
|
var nameValid = validateNameEn(markDirty);
|
|
var emailValid = validateEmail(markDirty);
|
|
var phoneCodeValid = validatePhoneCode(markDirty);
|
|
var phoneNumberValid = validatePhoneNumber(markDirty);
|
|
|
|
return nameValid && emailValid && phoneCodeValid && phoneNumberValid;
|
|
}
|
|
|
|
function updateSubmitButton(canGetPrime) {
|
|
if (typeof canGetPrime === 'boolean') {
|
|
tappayCanGetPrime = canGetPrime;
|
|
}
|
|
var canSubmit = tappayCanGetPrime && areCustomFieldsValid(false);
|
|
$('.button-1.payment-info-next-step-button').prop('disabled', !canSubmit);
|
|
}
|
|
|
|
$(function () {
|
|
$('#CardholderNameEn').on('input blur', function () {
|
|
validateNameEn(true);
|
|
updateSubmitButton();
|
|
});
|
|
$('#CardholderEmail').on('input blur', function () {
|
|
validateEmail(true);
|
|
updateSubmitButton();
|
|
});
|
|
$('#CardholderPhoneNumberCountryCode').on('input blur', function () {
|
|
validatePhoneCode(true);
|
|
updateSubmitButton();
|
|
});
|
|
$('#CardholderPhoneNumber').on('input blur', function () {
|
|
validatePhoneNumber(true);
|
|
updateSubmitButton();
|
|
});
|
|
|
|
// initialize default validation state
|
|
validatePhoneCode(false);
|
|
updateSubmitButton(false);
|
|
});
|
|
|
|
$.ajax({
|
|
url: "https://js.tappaysdk.com/sdk/tpdirect/v5.24.0",
|
|
dataType: "script",
|
|
cache: true,
|
|
success: function() {
|
|
TPDirect.setupSDK($('#AppId').val(), $('#AppKey').val(), $('#ServerType').val());
|
|
$('.button-1.payment-info-next-step-button').prop('disabled', true);
|
|
$('.button-1.payment-info-next-step-button').removeAttr('onclick');
|
|
$('.button-1.payment-info-next-step-button').off('click');
|
|
$('.button-1.payment-info-next-step-button').click(function(event) {
|
|
event.preventDefault();
|
|
|
|
// fix keyboard issue in iOS device
|
|
forceBlurIos();
|
|
|
|
const tappayStatus = TPDirect.card.getTappayFieldsStatus();
|
|
console.log(tappayStatus);
|
|
|
|
tappayCanGetPrime = tappayStatus.canGetPrime;
|
|
|
|
if (!areCustomFieldsValid(true)) {
|
|
updateSubmitButton(tappayCanGetPrime);
|
|
alert('請完整填寫持卡人資訊');
|
|
return;
|
|
}
|
|
|
|
// Check TPDirect.card.getTappayFieldsStatus().canGetPrime before TPDirect.card.getPrime
|
|
if (tappayStatus.canGetPrime === false) {
|
|
alert('can not get prime');
|
|
return;
|
|
}
|
|
|
|
TPDirect.card.getPrime(function (result) {
|
|
if (result.status !== 0) {
|
|
alert('get prime error ' + result.msg);
|
|
return;
|
|
}
|
|
$('#Prime').val(result.card.prime);
|
|
if(typeof PaymentInfo !== 'undefined')
|
|
{
|
|
PaymentInfo.save();
|
|
}
|
|
else
|
|
{
|
|
$("form[action='/checkout/paymentinfo'").submit();
|
|
}
|
|
});
|
|
});
|
|
|
|
TPDirect.card.setup({
|
|
fields: {
|
|
number: {
|
|
element: '.form-control.card-number',
|
|
placeholder: '**** **** **** ****'
|
|
},
|
|
expirationDate: {
|
|
element: '.form-control.expiration-date',
|
|
placeholder: 'MM / YY'
|
|
},
|
|
ccv: {
|
|
element: '.form-control.ccv',
|
|
placeholder: '後三碼'
|
|
}
|
|
},
|
|
@* cardholder: {
|
|
name_en: {
|
|
element: document.getElementById('name_en'),
|
|
placeholder: '持卡人姓名'
|
|
},
|
|
email: {
|
|
element: document.getElementById('email'),
|
|
placeholder: 'Email'
|
|
},
|
|
phone: {
|
|
country_code: {
|
|
element: document.getElementById('phone_country_code'),
|
|
placeholder: '886'
|
|
},
|
|
number: {
|
|
element: document.getElementById('phone_number'),
|
|
placeholder: '912345678'
|
|
}
|
|
}
|
|
|
|
}, *@
|
|
styles: {
|
|
'input': {
|
|
'color': 'gray'
|
|
},
|
|
'input.ccv': {
|
|
// 'font-size': '16px'
|
|
},
|
|
':focus': {
|
|
'color': 'black'
|
|
},
|
|
'.valid': {
|
|
'color': 'green'
|
|
},
|
|
'.invalid': {
|
|
'color': 'red'
|
|
}
|
|
},
|
|
// 此設定會顯示卡號輸入正確後，會顯示前六後四碼信用卡卡號
|
|
isMaskCreditCardNumber: true,
|
|
maskCreditCardNumberRange: {
|
|
beginIndex: 6,
|
|
endIndex: 11
|
|
}
|
|
});
|
|
|
|
// listen for TapPay Field
|
|
TPDirect.card.onUpdate(function (update) {
|
|
/* Disable / enable submit button depend on update.canGetPrime */
|
|
/* ============================================================ */
|
|
|
|
// update.canGetPrime === true
|
|
// --> you can call TPDirect.card.getPrime()
|
|
// const submitButton = document.querySelector('button[type="submit"]')
|
|
updateSubmitButton(update.canGetPrime);
|
|
|
|
/* Change card type display when card type change */
|
|
/* ============================================== */
|
|
|
|
// cardTypes = ['visa', 'mastercard', ...]
|
|
var newType = update.cardType === 'unknown' ? '' : update.cardType.toUpperCase();
|
|
$('#cardtype').text(newType);
|
|
|
|
/* Change form-group style when tappay field status change */
|
|
/* ======================================================= */
|
|
|
|
// number 欄位是錯誤的
|
|
if (update.status.number === 2) {
|
|
setNumberFormGroupToError('.card-number-group');
|
|
} else if (update.status.number === 0) {
|
|
setNumberFormGroupToSuccess('.card-number-group');
|
|
} else {
|
|
setNumberFormGroupToNormal('.card-number-group');
|
|
}
|
|
|
|
if (update.status.expiry === 2) {
|
|
setNumberFormGroupToError('.expiration-date-group');
|
|
} else if (update.status.expiry === 0) {
|
|
setNumberFormGroupToSuccess('.expiration-date-group');
|
|
} else {
|
|
setNumberFormGroupToNormal('.expiration-date-group');
|
|
}
|
|
|
|
if (update.status.ccv === 2) {
|
|
setNumberFormGroupToError('.ccv-group');
|
|
} else if (update.status.ccv === 0) {
|
|
setNumberFormGroupToSuccess('.ccv-group');
|
|
} else {
|
|
setNumberFormGroupToNormal('.ccv-group');
|
|
}
|
|
});
|
|
}
|
|
});
|
|
|
|
function setNumberFormGroupToError(selector) {
|
|
$(selector).addClass('has-error');
|
|
$(selector).removeClass('has-success');
|
|
}
|
|
|
|
function setNumberFormGroupToSuccess(selector) {
|
|
$(selector).removeClass('has-error');
|
|
$(selector).addClass('has-success');
|
|
}
|
|
|
|
function setNumberFormGroupToNormal(selector) {
|
|
$(selector).removeClass('has-error');
|
|
$(selector).removeClass('has-success');
|
|
}
|
|
|
|
function forceBlurIos() {
|
|
if (!isIos()) {
|
|
return;
|
|
}
|
|
var input = document.createElement('input');
|
|
input.setAttribute('type', 'text');
|
|
// Insert to active element to ensure scroll lands somewhere relevant
|
|
document.activeElement.prepend(input);
|
|
input.focus();
|
|
input.parentNode.removeChild(input);
|
|
}
|
|
|
|
function isIos() {
|
|
return /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
|
|
}
|
|
</script>
|