Add GooglePay validations

This commit is contained in:
Pedro Silva 2023-08-31 17:38:23 +01:00
parent dc9eb96d99
commit 0ac4089bec
No known key found for this signature in database
GPG key ID: E2EE20C0669D24B3
6 changed files with 85 additions and 37 deletions

View file

@ -1,5 +1,5 @@
.ppcp-button-googlepay {
margin-top: 5px;
margin: 5px 0;
overflow: hidden;
height: 45px;
@ -15,7 +15,7 @@
.woocommerce-checkout {
.ppcp-button-googlepay {
margin-top: 0;
margin: 0;
border-radius: 18px;
height: 38px;
}
@ -23,6 +23,6 @@
.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout {
.ppcp-button-googlepay {
margin-top: 0;
margin: 0;
}
}

View file

@ -25,6 +25,10 @@ class GooglepayButton {
}
this.isInitialized = true;
if (!this.validateConfig()) {
return;
}
this.googlePayConfig = config;
this.allowedPaymentMethods = config.allowedPaymentMethods;
this.baseCardPaymentMethod = this.allowedPaymentMethods[0];
@ -44,6 +48,20 @@ class GooglepayButton {
});
}
validateConfig() {
if ( ['PRODUCTION', 'TEST'].indexOf(this.buttonConfig.environment) === -1) {
console.error('[GooglePayButton] Invalid environment.', this.buttonConfig.environment);
return false;
}
if ( !this.contextHandler ) {
console.error('[GooglePayButton] Invalid context handler.', this.contextHandler);
return false;
}
return true;
}
buildReadyToPayRequest(allowedPaymentMethods, baseRequest) {
return Object.assign({}, baseRequest, {
allowedPaymentMethods: allowedPaymentMethods,
@ -52,7 +70,7 @@ class GooglepayButton {
initClient() {
this.paymentsClient = new google.payments.api.PaymentsClient({
environment: 'TEST', // TODO: Use 'PRODUCTION' for real transactions
environment: this.buttonConfig.environment,
// add merchant info maybe
paymentDataCallbacks: {
//onPaymentDataChanged: onPaymentDataChanged,
@ -72,18 +90,24 @@ class GooglepayButton {
? this.buttonConfig.button.mini_cart_wrapper
: this.buttonConfig.button.wrapper;
const shape =
const ppcpStyle =
(this.context === 'mini-cart')
? this.ppcpConfig.button.mini_cart_style.shape
: this.ppcpConfig.button.style.shape;
? this.ppcpConfig.button.mini_cart_style
: this.ppcpConfig.button.style;
jQuery(wrapper).addClass('ppcp-button-' + shape);
const buttonStyle =
(this.context === 'mini-cart')
? this.buttonConfig.button.mini_cart_style
: this.buttonConfig.button.style;
jQuery(wrapper).addClass('ppcp-button-' + ppcpStyle.shape);
const button =
this.paymentsClient.createButton({
onClick: this.onButtonClick.bind(this),
allowedPaymentMethods: [baseCardPaymentMethod],
buttonType: 'pay',
buttonColor: buttonStyle.color || 'black',
buttonType: buttonStyle.type || 'pay',
buttonSizeMode: 'fill',
});
jQuery(wrapper).append(button);

View file

@ -29,7 +29,8 @@ class GooglepayManager {
init() {
(async () => {
await this.config();
// Gets GooglePay configuration of the PayPal merchant.
this.googlePayConfig = await paypal.Googlepay().config();
for (const button of this.buttons) {
button.init(this.googlePayConfig);
@ -37,15 +38,6 @@ class GooglepayManager {
})();
}
/**
* Gets GooglePay configuration of the PayPal merchant.
* @returns {Promise<null>}
*/
async config() {
this.googlePayConfig = await paypal.Googlepay().config();
return this.googlePayConfig;
}
}
export default GooglepayManager;

View file

@ -14,14 +14,7 @@ if (typeof window.PayPalCommerceGateway === 'undefined') {
window.PayPalCommerceGateway = ppcpConfig;
}
console.log('ppcpData', ppcpData);
console.log('ppcpConfig', ppcpConfig);
console.log('buttonData', buttonData);
console.log('buttonConfig', buttonConfig);
const GooglePayComponent = () => {
console.log('GooglePayComponent render');
const [bootstrapped, setBootstrapped] = useState(false);
const [paypalLoaded, setPaypalLoaded] = useState(false);
const [googlePayLoaded, setGooglePayLoaded] = useState(false);

View file

@ -16,8 +16,6 @@ use WooCommerce\PayPalCommerce\Googlepay\Assets\Button;
use WooCommerce\PayPalCommerce\Vendor\Psr\Container\ContainerInterface;
return array(
// TODO.
'googlepay.button' => static function ( ContainerInterface $container ): ButtonInterface {
// TODO : check other statuses.

View file

@ -126,13 +126,15 @@ class Button implements ButtonInterface {
* @return bool
*/
public function render_buttons(): bool {
$is_googlepay_button_enabled = $this->settings->has( 'googlepay_button_enabled' ) ? $this->settings->get( 'googlepay_button_enabled' ) : false;
if ( ! $this->isGooglePayButtonEnabled() ) {
return false;
}
$button_enabled_product = $is_googlepay_button_enabled && $this->settings_status->is_smart_button_enabled_for_location( 'product' );
$button_enabled_cart = $is_googlepay_button_enabled && $this->settings_status->is_smart_button_enabled_for_location( 'cart' );
$button_enabled_checkout = $is_googlepay_button_enabled;
$button_enabled_payorder = $is_googlepay_button_enabled;
$button_enabled_minicart = $is_googlepay_button_enabled && $this->settings_status->is_smart_button_enabled_for_location( 'mini-cart' );
$button_enabled_product = $this->settings_status->is_smart_button_enabled_for_location( 'product' );
$button_enabled_cart = $this->settings_status->is_smart_button_enabled_for_location( 'cart' );
$button_enabled_checkout = true;
$button_enabled_payorder = true;
$button_enabled_minicart = $this->settings_status->is_smart_button_enabled_for_location( 'mini-cart' );
/**
* Param types removed to avoid third-party issues.
@ -238,7 +240,7 @@ class Button implements ButtonInterface {
* @return bool
*/
public function should_load_script(): bool {
return true; // TODO.
return $this->isGooglePayButtonEnabled();
}
/**
@ -276,12 +278,51 @@ class Button implements ButtonInterface {
*/
public function script_data(): array {
return array(
'environment' => $this->environment->current_environment_is( Environment::SANDBOX ) ? 'TEST' : 'PRODUCTION',
'sdk_url' => $this->sdk_url,
'button' => array(
'wrapper' => '#ppc-button-googlepay-container',
'style' => $this->button_styles_for_context( 'cart' ), // For now use cart. Pass the context if necessary.
'mini_cart_wrapper' => '#ppc-button-googlepay-container-minicart',
'mini_cart_style' => $this->button_styles_for_context( 'mini-cart' ),
),
);
}
/**
* Determines the style for a given indicator in a given context.
*
* @param string $context The context.
*
* @return array
*/
private function button_styles_for_context( string $context ): array {
// Use the cart/checkout styles for blocks.
$context = str_replace( '-block', '', $context );
$values = array(
'color' => 'black',
'type' => 'pay',
);
foreach ( $values as $style => $value ) {
if ( $this->settings->has( 'googlepay_button_' . $context . '_' . $style ) ) {
$values[ $style ] = $this->settings->get( 'googlepay_button_' . $context . '_' . $style );
} elseif ( $this->settings->has( 'googlepay_button_' . $style ) ) {
$values[ $style ] = $this->settings->get( 'googlepay_button_' . $style );
}
}
return $values;
}
/**
* Returns if Google Pay button is enabled
*
* @return bool
*/
private function isGooglePayButtonEnabled(): bool {
return $this->settings->has('googlepay_button_enabled') && !!$this->settings->get('googlepay_button_enabled');
}
}