Skip to content

Commit

Permalink
Added card vendor error
Browse files Browse the repository at this point in the history
  • Loading branch information
@L3RAZ
L3RAZ committed Jan 10, 2024
1 parent 848405f commit 148c236
Show file tree
Hide file tree
Showing 4 changed files with 29 additions and 46 deletions.
2 changes: 1 addition & 1 deletion _dev/js/front/src/api/ps-checkout.api.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -216,7 +216,7 @@ export class PsCheckoutApi extends BaseClass {
paypal_transaction
);

// window.location.href = confirmationUrl.toString();
window.location.href = confirmationUrl.toString();
}

if (response.error && 'INSTRUMENT_DECLINED' === response.error) {
Expand Down
52 changes: 20 additions & 32 deletions _dev/js/front/src/components/common/card-fields.component.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,6 @@ export class CardFieldsComponent extends BaseComponent {
payPalService: 'PayPalService',
psCheckoutApi: 'PsCheckoutApi',
psCheckoutService: 'PsCheckoutService',
sdk: 'PayPalSDK',
};

created() {
Expand All @@ -77,9 +76,14 @@ export class CardFieldsComponent extends BaseComponent {
this.data.HTMLElementCardNumber = this.getCardNumber();
this.data.HTMLElementCardCVV = this.getCardCVV();
this.data.HTMLElementCardExpirationDate = this.getCardExpirationDate();
this.data.HTMLElementSection = this.getSection();

this.data.clearCardFields = () => {console.log('CLEAR CARD FIELDS')};
this.data.HTMLElementCardNameError= this.getCardNameFieldError();
this.data.HTMLElementCardNumberError= this.getCardNumberFieldError();
this.data.HTMLElementCardVendorError= this.getCardVendorFieldError();
this.data.HTMLElementCardExpiryError= this.getCardExpiryFieldError();
this.data.HTMLElementCardCvvError= this.getCardCvvFieldError();

this.data.HTMLElementSection = this.getSection();
}


Expand Down Expand Up @@ -127,6 +131,11 @@ export class CardFieldsComponent extends BaseComponent {
return document.querySelector(cardNameErrorSelector);
}

getCardVendorFieldError() {
const cardVendorErrorSelector = `#ps_checkout-hosted-fields-error-vendor`;
return document.querySelector(cardVendorErrorSelector);
}

getCardExpiryFieldError() {
const cardNameErrorSelector = `#ps_checkout-hosted-fields-error-expiry`;
return document.querySelector(cardNameErrorSelector);
Expand Down Expand Up @@ -164,30 +173,31 @@ export class CardFieldsComponent extends BaseComponent {
this.data.cardFieldsState.fields.cardNameField;
const hideError = isFocused || !this.data.cardFieldsFocused.name || isValid || isPotentiallyValid;

this.getCardNameFieldError().classList.toggle('hidden', hideError)
this.data.HTMLElementCardNameError.classList.toggle('hidden', hideError)
}

toggleCardNumberFieldError() {
const { isFocused, isEmpty, isValid, isPotentiallyValid } =
this.data.cardFieldsState.fields.cardNumberField;
const hideError = isPotentiallyValid && (isFocused || !this.data.cardFieldsFocused.number || isValid);
const hideError = isFocused || !this.data.cardFieldsFocused.number || isValid;

this.getCardNumberFieldError().classList.toggle('hidden', hideError)
this.data.HTMLElementCardNumberError.classList.toggle('hidden', !isPotentiallyValid || hideError)
this.data.HTMLElementCardVendorError.classList.toggle('hidden', isPotentiallyValid)
}

toggleCardExpiryFieldError() {
const { isFocused, isEmpty, isValid, isPotentiallyValid } =
this.data.cardFieldsState.fields.cardExpiryField;
const hideError = isPotentiallyValid && (isFocused || !this.data.cardFieldsFocused.expiry || isValid);

this.getCardExpiryFieldError().classList.toggle('hidden', hideError)
this.data.HTMLElementCardExpiryError.classList.toggle('hidden', hideError)
}
toggleCardCvvFieldError() {
const { isFocused, isEmpty, isValid, isPotentiallyValid } =
this.data.cardFieldsState.fields.cardCvvField;
const hideError = isPotentiallyValid && (isFocused || !this.data.cardFieldsFocused.cvv || isValid);

this.getCardCvvFieldError().classList.toggle('hidden', hideError)
this.data.HTMLElementCardCvvError.classList.toggle('hidden', hideError)
}

toggleCardFieldErrors() {
Expand All @@ -212,16 +222,6 @@ export class CardFieldsComponent extends BaseComponent {
this.toggleCardFieldErrors();
}

clearCardFields() {
console.log('CARD-FIELDS', this.data.cardFields);
if (this.data.cardFields) {
this.data.cardFields.NameField.clear();
this.data.card.NumberField.clear()
this.data.card.CVVField.clear()
this.data.card.ExpiryField.clear()
}
}

renderPayPalCardFields() {
this.data.HTMLElementCardForm.classList.toggle('loading', true);

Expand Down Expand Up @@ -251,7 +251,6 @@ export class CardFieldsComponent extends BaseComponent {
{
style,
createOrder: async (data) => {
console.log('createOrder', data);
this.data.HTMLElementButton.setAttribute('disabled', true);

return this.psCheckoutApi
Expand All @@ -271,16 +270,11 @@ export class CardFieldsComponent extends BaseComponent {
})
},
onApprove: async (data) => {
console.log('onApprove', data);
return this.psCheckoutApi.postValidateOrder({
...data,
fundingSource: this.data.name,
isHostedFields: true
})
.then(data => {
this.clearCardFields();
return data;
})
.catch(error => {
let message = error.message || '';

Expand All @@ -294,7 +288,7 @@ export class CardFieldsComponent extends BaseComponent {
})
},
onError: async (error) => {
console.log('onError', error);
this.data.loader.hide();
let message = error.message || '';
this.data.notification.showError(message);
this.data.HTMLElementButton.removeAttribute('disabled');
Expand Down Expand Up @@ -323,7 +317,6 @@ export class CardFieldsComponent extends BaseComponent {
*/
onBlur: (event) => {
this.updateCardFieldsState(event);
this.data.clearCardFields();
window.ps_checkout.events.dispatchEvent(
new CustomEvent('hostedFieldsBlur', {
detail: { ps_checkout: window.ps_checkout, event }
Expand All @@ -335,15 +328,12 @@ export class CardFieldsComponent extends BaseComponent {
*/
onInputSubmitRequest: (event) => {
this.updateCardFieldsState(event);
console.log('SUBMIT', event, this.sdk.CardFields());
},
}

},
)
.then(cardFields => {
this.data.clearCardFields = cardFields.clear;
console.log(cardFields, this.data.cardFields);
this.data.HTMLElementCardForm.classList.toggle('loading', false);
if (this.data.HTMLElement !== null) {
this.data.HTMLElementButton.addEventListener('click', event => {
Expand All @@ -352,9 +342,7 @@ export class CardFieldsComponent extends BaseComponent {
// this.data.HTMLElementButton.classList.toggle('disabled', true);
this.data.HTMLElementButton.setAttribute('disabled', '');

cardFields.submit({contingencies: this.getContingencies()}).then((data) => {
console.log(this.data.cardFields);
});
cardFields.submit({contingencies: this.getContingencies()});
});
}
});
Expand Down
1 change: 1 addition & 0 deletions views/css/payments.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -529,6 +529,7 @@ label[for="ps_checkout-hosted-fields-card-cvv"] {

#ps_checkout-hosted-fields-error-name.hidden,
#ps_checkout-hosted-fields-error-number.hidden,
#ps_checkout-hosted-fields-error-vendor.hidden,
#ps_checkout-hosted-fields-error-expiry.hidden,
#ps_checkout-hosted-fields-error-cvv.hidden {
display: none;
Expand Down
20 changes: 7 additions & 13 deletions views/templates/hook/paymentOptions.tpl
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,21 +32,20 @@
</div>
<div class="form-group">
<label class="form-control-label" for="ps_checkout-hosted-fields-card-name">{l s='Cardholder Name (optional)' mod='ps_checkout'}</label>
<div id="ps_checkout-hosted-fields-card-name">
</div>
<div id="ps_checkout-hosted-fields-card-name"></div>
<div id="ps_checkout-hosted-fields-error-name" class="alert alert-danger hidden">{l s='Card holder name is invalid' mod='ps_checkout'}</div>
</div>
<div class="form-group">
<label class="form-control-label" for="ps_checkout-hosted-fields-card-number">{l s='Card number' mod='ps_checkout'}</label>
<div id="ps_checkout-hosted-fields-card-number" >
<div id="card-image">
<img class="default-credit-card" src="{$modulePath}views/img/credit_card.png" alt="">
</div>
</div>
<div id="ps_checkout-hosted-fields-card-number" ></div>
<div id="ps_checkout-hosted-fields-error-number" class="alert alert-danger hidden">{l s='Card number is invalid' mod='ps_checkout'}</div>
<div id="ps_checkout-hosted-fields-error-vendor" class="alert alert-danger hidden">{l s='Card vendor is invalid' mod='ps_checkout'}</div>
</div>
<div class="row">
<div class="form-group col-xs-6 col-6">
<label class="form-control-label" for="ps_checkout-hosted-fields-card-expiration-date">{l s='Expiry date' mod='ps_checkout'}</label>
<div id="ps_checkout-hosted-fields-card-expiration-date" ></div>
<div id="ps_checkout-hosted-fields-error-expiry" class="alert alert-danger hidden">{l s='Card expiration date is invalid' mod='ps_checkout'}</div>
</div>
<div class="form-group col-xs-6 col-6">
<label class="form-control-label" for="ps_checkout-hosted-fields-card-cvv">{l s='CVC' mod='ps_checkout'}</label>
Expand All @@ -59,14 +58,9 @@
</div>
</div>
<div id="ps_checkout-hosted-fields-card-cvv" ></div>
<div id="ps_checkout-hosted-fields-error-cvv" class="alert alert-danger hidden">{l s='CVV code is invalid' mod='ps_checkout'}</div>
</div>
</div>
<div id="ps_checkout-hosted-fields-errors">
<div id="ps_checkout-hosted-fields-error-name" class="alert alert-danger hidden">NAME</div>
<div id="ps_checkout-hosted-fields-error-number" class="alert alert-danger hidden">NUMBER</div>
<div id="ps_checkout-hosted-fields-error-expiry" class="alert alert-danger hidden">EXPIRY</div>
<div id="ps_checkout-hosted-fields-error-cvv" class="alert alert-danger hidden">CVV</div>
</div>
<div id="payments-sdk__contingency-lightbox"></div>
</form>
<script>
Expand Down

0 comments on commit 148c236

Please sign in to comment.