Front end error handling

This commit is contained in:
David Bomba 2020-06-17 10:55:56 +10:00
parent 09d130c1f7
commit b1bad0b6f4
5 changed files with 49 additions and 23 deletions

View File

@ -117,13 +117,15 @@ var AuthorizeAuthorizeCard = /*#__PURE__*/function () {
_classCallCheck(this, AuthorizeAuthorizeCard);
_defineProperty(this, "handleAuthorization", function () {
var myCard = $('#my-card');
var authData = {};
authData.clientKey = _this.publicKey;
authData.apiLoginID = _this.loginId;
var cardData = {};
cardData.cardNumber = document.getElementById("card_number").value;
cardData.month = document.getElementById("expiration_month").value;
cardData.year = document.getElementById("expiration_year").value;
cardData.cardNumber = myCard.CardJs('cardNumber');
cardData.month = myCard.CardJs('expiryMonth');
cardData.year = myCard.CardJs('expiryYear');
;
cardData.cardCode = document.getElementById("cvv").value;
var secureData = {};
secureData.authData = authData;
@ -132,13 +134,12 @@ var AuthorizeAuthorizeCard = /*#__PURE__*/function () {
//
// secureData.bankData = bankData;
console.log(cardData);
Accept.dispatchData(secureData, _this.responseHandler);
return false;
});
_defineProperty(this, "handle", function () {
console.log(_this.payNowButton);
if (_this.cardButton) {
_this.cardButton.addEventListener("click", function () {
_this.handleAuthorization();
@ -198,11 +199,16 @@ var AuthorizeAuthorizeCard = /*#__PURE__*/function () {
value: function responseHandler(response) {
if (response.messages.resultCode === "Error") {
var i = 0;
var $errors = $('#errors'); // get the reference of the div
while (i < response.messages.message.length) {
console.log(response.messages.message[i].code + ": " + response.messages.message[i].text);
i = i + 1;
}
$errors.show().html("<p>" + response.messages.message[i].code + ": " + response.messages.message[i].text + "</p>"); // while (i < response.messages.message.length) {
// console.log(
// response.messages.message[i].code + ": " +
// response.messages.message[i].text
// );
// document.getElementById('errors').innerHTML = response.messages.message[i].code + ": " + response.messages.message[i].text;
// i = i + 1;
// }
} else if (response.messages.resultCode === "Ok") {
document.getElementById("dataDescriptor").value = response.opaqueData.dataDescriptor;
document.getElementById("dataValue").value = response.opaqueData.dataValue;

View File

@ -7,7 +7,7 @@
"/js/clients/payment_methods/authorize-authorize-card.js": "/js/clients/payment_methods/authorize-authorize-card.js?id=7f63b5cd48631432a424",
"/js/clients/payment_methods/authorize-stripe-card.js": "/js/clients/payment_methods/authorize-stripe-card.js?id=420e22ba244289dd75f8",
"/js/clients/payments/alipay.js": "/js/clients/payments/alipay.js?id=cf114848ef8a3633a51b",
"/js/clients/payments/authorize-credit-card-payment.js": "/js/clients/payments/authorize-credit-card-payment.js?id=5061b0587d137f8f5183",
"/js/clients/payments/authorize-credit-card-payment.js": "/js/clients/payments/authorize-credit-card-payment.js?id=975ed7bccd115deb306e",
"/js/clients/payments/card-js.min.js": "/js/clients/payments/card-js.min.js?id=3fe6822360e6c456d1a2",
"/js/clients/payments/checkout.com.js": "/js/clients/payments/checkout.com.js?id=31df208670107e18f59d",
"/js/clients/payments/process.js": "/js/clients/payments/process.js?id=f4c4b09d4454070a6db6",

View File

@ -20,14 +20,16 @@ class AuthorizeAuthorizeCard {
handleAuthorization = () => {
var myCard = $('#my-card');
var authData = {};
authData.clientKey = this.publicKey;
authData.apiLoginID = this.loginId;
var cardData = {};
cardData.cardNumber = document.getElementById("card_number").value;
cardData.month = document.getElementById("expiration_month").value;
cardData.year = document.getElementById("expiration_year").value;
cardData.cardNumber = myCard.CardJs('cardNumber');
cardData.month = myCard.CardJs('expiryMonth');
cardData.year = myCard.CardJs('expiryYear');;
cardData.cardCode = document.getElementById("cvv").value;
var secureData = {};
@ -38,6 +40,8 @@ class AuthorizeAuthorizeCard {
//
// secureData.bankData = bankData;
console.log(cardData);
Accept.dispatchData(secureData, this.responseHandler);
return false;
@ -54,13 +58,22 @@ class AuthorizeAuthorizeCard {
if (response.messages.resultCode === "Error") {
var i = 0;
while (i < response.messages.message.length) {
console.log(
response.messages.message[i].code + ": " +
response.messages.message[i].text
);
i = i + 1;
}
var $errors = $('#errors'); // get the reference of the div
$errors.show().html("<p>" + response.messages.message[i].code + ": " + response.messages.message[i].text + "</p>");
// while (i < response.messages.message.length) {
// console.log(
// response.messages.message[i].code + ": " +
// response.messages.message[i].text
// );
// document.getElementById('errors').innerHTML = response.messages.message[i].code + ": " + response.messages.message[i].text;
// i = i + 1;
// }
}
else if(response.messages.resultCode === "Ok"){
@ -79,8 +92,6 @@ class AuthorizeAuthorizeCard {
handle = () => {
console.log(this.payNowButton);
if(this.cardButton)
{
this.cardButton.addEventListener("click", () => {

View File

@ -8,6 +8,12 @@
<meta name="year-invalid" content="{{ ctrans('texts.year_invalid') }}">
<meta name="month-invalid" content="{{ ctrans('texts.month_invalid') }}">
<meta name="credit-card-invalid" content="{{ ctrans('texts.credit_card_invalid') }}">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="{{ asset('js/clients/payments/card-js.min.js') }}"></script>
<link href="{{ asset('css/card-js.min.css') }}" rel="stylesheet" type="text/css">
@endpush
@section('body')
@ -45,6 +51,8 @@
</dd>
</div>
<div class="bg-gray-50 px-4 py-5 flex justify-end">
<div id="errors"></div>
<button type="primary" class="button button-primary" id="card_button">{{ ctrans('texts.add_payment_method') }}</button>
</div>
</dl>

View File

@ -1,9 +1,10 @@
<div class="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6 flex items-center flex items-center">
<div class="card-js">
<div class="card-js" id="my-card" data-capture-name="true">
<input class="name" id="cardholder_name" name="card-holders-name" placeholder="{{ ctrans('texts.name')}}">
<input class="card-number my-custom-class" id="card_number" name="card-number">
<input class="expiry-month" name="expiry-month" id="expiration_month">
<input class="expiry-year" name="expiry-year" id="expiration_year">
<input class="cvc" name="cvc" id="cvv">
</div>
<div id="errors"></div>
</div>