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

Merge pull request #2772 from woocommerce/PCP-3827-implement-block-button-styles-for-google-pay-button

Browse source 
Google Pay: Add support for Button Options in the Block Checkout (3827)
This commit is contained in:
Danny Dudzic 2024-11-14 21:24:26 +01:00 • committed by GitHub
commit f628cffa9e
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
9 changed files with 305 additions and 93 deletions
Download patch file Download diff file Expand all files Collapse all files

52
modules/ppcp-button/resources/js/modules/Renderer/PaymentButton.js
View file

@ -172,6 +172,11 @@ export default class PaymentButton {
*/
#contextHandler;
/**
* Button attributes.
*/
#buttonAttributes;
/**
* Whether the current browser/website support the payment method.
*
@ -211,11 +216,12 @@ export default class PaymentButton {
/**
* Factory method to create a new PaymentButton while limiting a single instance per context.
*
* @param {string} context - Button context name.
* @param {unknown} externalHandler - Handler object.
* @param {Object} buttonConfig - Payment button specific configuration.
* @param {Object} ppcpConfig - Plugin wide configuration object.
* @param {unknown} contextHandler - Handler object.
* @param {string} context - Button context name.
* @param {unknown} externalHandler - Handler object.
* @param {Object} buttonConfig - Payment button specific configuration.
* @param {Object} ppcpConfig - Plugin wide configuration object.
* @param {unknown} contextHandler - Handler object.
* @param {Object} buttonAttributes - Button attributes.
* @return {PaymentButton} The button instance.
*/
static createButton(
@ -223,7 +229,8 @@ export default class PaymentButton {
externalHandler,
buttonConfig,
ppcpConfig,
contextHandler
contextHandler,
buttonAttributes
) {
const buttonInstances = getInstances();
const instanceKey = `${ this.methodId }.${ context }`;
@ -234,7 +241,8 @@ export default class PaymentButton {
externalHandler,
buttonConfig,
ppcpConfig,
contextHandler
contextHandler,
buttonAttributes
);
buttonInstances.set( instanceKey, button );
@ -278,18 +286,20 @@ export default class PaymentButton {
* to avoid multiple button instances handling the same context.
*
* @private
* @param {string} context - Button context name.
* @param {Object} externalHandler - Handler object.
* @param {Object} buttonConfig - Payment button specific configuration.
* @param {Object} ppcpConfig - Plugin wide configuration object.
* @param {Object} contextHandler - Handler object.
* @param {string} context - Button context name.
* @param {Object} externalHandler - Handler object.
* @param {Object} buttonConfig - Payment button specific configuration.
* @param {Object} ppcpConfig - Plugin wide configuration object.
* @param {Object} contextHandler - Handler object.
* @param {Object} buttonAttributes - Button attributes.
*/
constructor(
context,
externalHandler = null,
buttonConfig = {},
ppcpConfig = {},
contextHandler = null
contextHandler = null,
buttonAttributes = {}
) {
if ( this.methodId === PaymentButton.methodId ) {
throw new Error( 'Cannot initialize the PaymentButton base class' );
@ -307,6 +317,7 @@ export default class PaymentButton {
this.#ppcpConfig = ppcpConfig;
this.#externalHandler = externalHandler;
this.#contextHandler = contextHandler;
this.#buttonAttributes = buttonAttributes;
this.#logger = new ConsoleLogger( methodName, context );
@ -921,15 +932,20 @@ export default class PaymentButton {
const styleSelector = `style[data-hide-gateway="${ this.methodId }"]`;
const wrapperSelector = `#${ this.wrappers.Default }`;
const paymentMethodLi = document.querySelector(`.wc_payment_method.payment_method_${ this.methodId }`);
const paymentMethodLi = document.querySelector(
`.wc_payment_method.payment_method_${ this.methodId }`
);
document
.querySelectorAll( styleSelector )
.forEach( ( el ) => el.remove() );
if (paymentMethodLi.style.display === 'none' || paymentMethodLi.style.display === '') {
paymentMethodLi.style.display = 'block';
}
if (
paymentMethodLi.style.display === 'none' ||
paymentMethodLi.style.display === ''
) {
paymentMethodLi.style.display = 'block';
}
document
.querySelectorAll( wrapperSelector )
@ -1007,7 +1023,7 @@ export default class PaymentButton {
this.removeButton();
}
this.log( 'addButton', button );
this.log( 'insertButton', button );
this.#button = button;
wrapper.appendChild( this.#button );