woocommerce/woocommerce-paypal-payments
2
0
Fork 0
mirror of https://github.com/woocommerce/woocommerce-paypal-payments.git synced 2025-09-05 08:59:14 +08:00
Code Issues Projects Packages Wiki Activity Actions 7

Merge pull request #1925 from woocommerce/PCP-2487-implement-early-wc-validation-for-hosted-card-fields

Browse source 
Implement early WC validation for Hosted Card Fields (2487)
This commit is contained in:
Emili Castells 2024-01-05 12:07:27 +01:00 • committed by GitHub
commit cd6486ce8c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 33 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

38
modules/ppcp-button/resources/js/button.js
View file

@ -40,11 +40,6 @@ const bootstrap = () => {
); );
const spinner = new Spinner(); const spinner = new Spinner();
let creditCardRenderer = new HostedFieldsRenderer(PayPalCommerceGateway, errorHandler, spinner);
if (typeof paypal.CardFields !== 'undefined') {
creditCardRenderer = new CardFieldsRenderer(PayPalCommerceGateway, errorHandler, spinner);
}
const formSaver = new FormSaver( const formSaver = new FormSaver(
PayPalCommerceGateway.ajax.save_checkout_form.endpoint, PayPalCommerceGateway.ajax.save_checkout_form.endpoint,
PayPalCommerceGateway.ajax.save_checkout_form.nonce, PayPalCommerceGateway.ajax.save_checkout_form.nonce,
@ -73,13 +68,7 @@ const bootstrap = () => {
&& document.querySelector(PayPalCommerceGateway.messages.wrapper); && document.querySelector(PayPalCommerceGateway.messages.wrapper);
} }
const onSmartButtonClick = async (data, actions) => { const doBasicCheckoutValidation = () => {
window.ppcpFundingSource = data.fundingSource;
const requiredFields = jQuery('form.woocommerce-checkout .validate-required:visible :input');
requiredFields.each((i, input) => {
jQuery(input).trigger('validate');
});
if (PayPalCommerceGateway.basic_checkout_validation_enabled) { if (PayPalCommerceGateway.basic_checkout_validation_enabled) {
// A quick fix to get the errors about empty form fields before attempting PayPal order, // A quick fix to get the errors about empty form fields before attempting PayPal order,
// it should solve #513 for most of the users, but it is not a proper solution. // it should solve #513 for most of the users, but it is not a proper solution.
@ -117,9 +106,26 @@ const bootstrap = () => {
errorHandler.message(PayPalCommerceGateway.labels.error.required.generic); errorHandler.message(PayPalCommerceGateway.labels.error.required.generic);
} }
return actions.reject(); return false;
} }
} }
return true;
};
const onCardFieldsBeforeSubmit = () => {
return doBasicCheckoutValidation();
};
const onSmartButtonClick = async (data, actions) => {
window.ppcpFundingSource = data.fundingSource;
const requiredFields = jQuery('form.woocommerce-checkout .validate-required:visible :input');
requiredFields.each((i, input) => {
jQuery(input).trigger('validate');
});
if (!doBasicCheckoutValidation()) {
return actions.reject();
}
const form = document.querySelector(checkoutFormSelector); const form = document.querySelector(checkoutFormSelector);
if (form) { if (form) {
@ -149,6 +155,12 @@ const bootstrap = () => {
jQuery(document).trigger('ppcp-smart-buttons-init', this); jQuery(document).trigger('ppcp-smart-buttons-init', this);
buttonsSpinner.unblock(); buttonsSpinner.unblock();
}; };
let creditCardRenderer = new HostedFieldsRenderer(PayPalCommerceGateway, errorHandler, spinner);
if (typeof paypal.CardFields !== 'undefined') {
creditCardRenderer = new CardFieldsRenderer(PayPalCommerceGateway, errorHandler, spinner, onCardFieldsBeforeSubmit);
}
const renderer = new Renderer(creditCardRenderer, PayPalCommerceGateway, onSmartButtonClick, onSmartButtonsInit); const renderer = new Renderer(creditCardRenderer, PayPalCommerceGateway, onSmartButtonClick, onSmartButtonsInit);
const messageRenderer = new MessageRenderer(PayPalCommerceGateway.messages); const messageRenderer = new MessageRenderer(PayPalCommerceGateway.messages);

8
modules/ppcp-button/resources/js/modules/Renderer/CardFieldsRenderer.js
View file

@ -3,7 +3,7 @@ import {cardFieldStyles} from "../Helper/CardFieldsHelper";
class CardFieldsRenderer { class CardFieldsRenderer {
constructor(defaultConfig, errorHandler, spinner) { constructor(defaultConfig, errorHandler, spinner, onCardFieldsBeforeSubmit) {
this.defaultConfig = defaultConfig; this.defaultConfig = defaultConfig;
this.errorHandler = errorHandler; this.errorHandler = errorHandler;
this.spinner = spinner; this.spinner = spinner;
@ -11,6 +11,7 @@ class CardFieldsRenderer {
this.formValid = false; this.formValid = false;
this.emptyFields = new Set(['number', 'cvv', 'expirationDate']); this.emptyFields = new Set(['number', 'cvv', 'expirationDate']);
this.currentHostedFieldsInstance = null; this.currentHostedFieldsInstance = null;
this.onCardFieldsBeforeSubmit = onCardFieldsBeforeSubmit;
} }
render(wrapper, contextConfig) { render(wrapper, contextConfig) {
@ -110,6 +111,11 @@ class CardFieldsRenderer {
return; return;
} }
if (typeof this.onCardFieldsBeforeSubmit === 'function' && !this.onCardFieldsBeforeSubmit()) {
this.spinner.unblock();
return;
}
cardField.submit() cardField.submit()
.catch((error) => { .catch((error) => {
this.spinner.unblock(); this.spinner.unblock();

2
modules/ppcp-button/src/Endpoint/CreateOrderEndpoint.php
View file

@ -294,7 +294,7 @@ class CreateOrderEndpoint implements EndpointInterface {
if ( $this->early_validation_enabled if ( $this->early_validation_enabled
&& $this->form && $this->form
&& 'checkout' === $data['context'] && 'checkout' === $data['context']
&& in_array( $payment_method, array( PayPalGateway::ID, CardButtonGateway::ID ), true ) && in_array( $payment_method, array( PayPalGateway::ID, CardButtonGateway::ID, CreditCardGateway::ID ), true )
) { ) {
$this->validate_form( $this->form ); $this->validate_form( $this->form );
} }