{
+ if ( ! node ) {
+ return;
+ }
+
+ // Set component frame
+ setComponentFrame( node.ownerDocument );
+
+ // Handle button mounting
+ while ( node.firstChild ) {
+ node.removeChild( node.firstChild );
+ }
+ if ( button ) {
+ node.appendChild( button );
+ }
+ } }
+ />
+ { button && (
+
+ ) }
+
);
};
diff --git a/modules/ppcp-googlepay/resources/js/Block/hooks/useButtonStyles.js b/modules/ppcp-googlepay/resources/js/Block/hooks/useButtonStyles.js
index 6e214acb2..c4dc71f92 100644
--- a/modules/ppcp-googlepay/resources/js/Block/hooks/useButtonStyles.js
+++ b/modules/ppcp-googlepay/resources/js/Block/hooks/useButtonStyles.js
@@ -1,19 +1,26 @@
import { useMemo } from '@wordpress/element';
import { combineStyles } from '../../../../../ppcp-button/resources/js/modules/Helper/PaymentButtonHelpers';
-const useButtonStyles = ( buttonConfig, ppcpConfig ) => {
+const useButtonStyles = ( buttonConfig, ppcpConfig, buttonAttributes ) => {
return useMemo( () => {
const styles = combineStyles(
ppcpConfig?.button || {},
buttonConfig?.button || {}
);
- if ( styles.MiniCart && styles.MiniCart.type === 'buy' ) {
+ if ( buttonAttributes && styles.Default ) {
+ styles.Default.height =
+ buttonAttributes.height || styles.Default.height;
+ styles.Default.borderRadius =
+ buttonAttributes.borderRadius || styles.Default.borderRadius;
+ }
+
+ if ( styles.MiniCart?.type === 'buy' ) {
styles.MiniCart.type = 'pay';
}
return styles;
- }, [ buttonConfig, ppcpConfig ] );
+ }, [ buttonConfig, ppcpConfig, buttonAttributes ] );
};
export default useButtonStyles;
diff --git a/modules/ppcp-googlepay/resources/js/Block/hooks/useGooglepayApiToGenerateButton.js b/modules/ppcp-googlepay/resources/js/Block/hooks/useGooglepayApiToGenerateButton.js
index fe5b342a7..295b8c656 100644
--- a/modules/ppcp-googlepay/resources/js/Block/hooks/useGooglepayApiToGenerateButton.js
+++ b/modules/ppcp-googlepay/resources/js/Block/hooks/useGooglepayApiToGenerateButton.js
@@ -6,10 +6,16 @@ const useGooglepayApiToGenerateButton = (
namespace,
buttonConfig,
ppcpConfig,
- googlepayConfig
+ googlepayConfig,
+ buttonAttributes
) => {
const [ googlepayButton, setGooglepayButton ] = useState( null );
- const buttonStyles = useButtonStyles( buttonConfig, ppcpConfig );
+
+ const buttonStyles = useButtonStyles(
+ buttonConfig,
+ ppcpConfig,
+ buttonAttributes
+ );
useEffect( () => {
if (
@@ -35,14 +41,13 @@ const useGooglepayApiToGenerateButton = (
buttonType: buttonConfig.buttonType || 'pay',
buttonLocale: buttonConfig.buttonLocale || 'en',
buttonSizeMode: 'fill',
- };
-
- const button = paymentsClient.createButton( {
- ...googlePayButtonOptions,
+ buttonRadius: parseInt( buttonStyles?.Default?.borderRadius ),
onClick: ( event ) => {
event.preventDefault();
},
- } );
+ };
+
+ const button = paymentsClient.createButton( googlePayButtonOptions );
setGooglepayButton( button );
@@ -51,7 +56,15 @@ const useGooglepayApiToGenerateButton = (
};
}, [ namespace, buttonConfig, ppcpConfig, googlepayConfig, buttonStyles ] );
- return googlepayButton;
+ // Return both the button and the styles needed for the container
+ return {
+ button: googlepayButton,
+ containerStyles: {
+ height: buttonStyles?.Default?.height
+ ? `${ buttonStyles.Default.height }px`
+ : '',
+ },
+ };
};
export default useGooglepayApiToGenerateButton;
diff --git a/modules/ppcp-googlepay/resources/js/GooglepayButton.js b/modules/ppcp-googlepay/resources/js/GooglepayButton.js
index 83416b149..82fe1ff12 100644
--- a/modules/ppcp-googlepay/resources/js/GooglepayButton.js
+++ b/modules/ppcp-googlepay/resources/js/GooglepayButton.js
@@ -106,8 +106,40 @@ class GooglepayButton extends PaymentButton {
*/
#transactionInfo = null;
+ /**
+ * The currently visible payment button.
+ *
+ * @type {HTMLElement|null}
+ */
+ #button = null;
+
+ /**
+ * The Google Pay configuration object.
+ *
+ * @type {Object|null}
+ */
googlePayConfig = null;
+ /**
+ * The start time of the configuration process.
+ *
+ * @type {number}
+ */
+ #configureStartTime = 0;
+
+ /**
+ * The maximum time to wait for buttonAttributes before proceeding with initialization.
+ * @type {number}
+ */
+ #maxWaitTime = 1000;
+
+ /**
+ * The stored button attributes.
+ *
+ * @type {null}
+ */
+ #storedButtonAttributes = null;
+
/**
* @inheritDoc
*/
@@ -142,7 +174,8 @@ class GooglepayButton extends PaymentButton {
externalHandler,
buttonConfig,
ppcpConfig,
- contextHandler
+ contextHandler,
+ buttonAttributes
) {
// Disable debug output in the browser console:
// buttonConfig.is_debug = false;
@@ -152,7 +185,8 @@ class GooglepayButton extends PaymentButton {
externalHandler,
buttonConfig,
ppcpConfig,
- contextHandler
+ contextHandler,
+ buttonAttributes
);
this.init = this.init.bind( this );
@@ -240,29 +274,95 @@ class GooglepayButton extends PaymentButton {
() => ! this.contextHandler?.validateContext(),
`Invalid context handler.`
);
+
+ invalidIf(
+ () =>
+ this.buttonAttributes?.height &&
+ isNaN( parseInt( this.buttonAttributes.height ) ),
+ 'Invalid height in buttonAttributes'
+ );
+
+ invalidIf(
+ () =>
+ this.buttonAttributes?.borderRadius &&
+ isNaN( parseInt( this.buttonAttributes.borderRadius ) ),
+ 'Invalid borderRadius in buttonAttributes'
+ );
+
+ return true;
}
/**
* Configures the button instance. Must be called before the initial `init()`.
*
- * @param {Object} apiConfig - API configuration.
- * @param {Object} transactionInfo - Transaction details; required before "init" call.
+ * @param {Object} apiConfig - API configuration.
+ * @param {Object} transactionInfo - Transaction details; required before "init" call.
+ * @param {Object} buttonAttributes - Button attributes.
*/
- configure( apiConfig, transactionInfo ) {
+ configure( apiConfig, transactionInfo, buttonAttributes = {} ) {
+ // Start timing on first configure call
+ if ( ! this.#configureStartTime ) {
+ this.#configureStartTime = Date.now();
+ }
+
+ // If valid buttonAttributes, store them
+ if ( buttonAttributes?.height && buttonAttributes?.borderRadius ) {
+ this.#storedButtonAttributes = { ...buttonAttributes };
+ }
+
+ // Use stored attributes if current ones are missing
+ const attributes = buttonAttributes?.height
+ ? buttonAttributes
+ : this.#storedButtonAttributes;
+
+ // Check if we've exceeded wait time
+ const timeWaited = Date.now() - this.#configureStartTime;
+ if ( timeWaited > this.#maxWaitTime ) {
+ this.log(
+ 'GooglePay: Timeout waiting for buttonAttributes - proceeding with initialization'
+ );
+ this.googlePayConfig = apiConfig;
+ this.#transactionInfo = transactionInfo;
+ this.buttonAttributes = attributes || buttonAttributes;
+ this.allowedPaymentMethods =
+ this.googlePayConfig.allowedPaymentMethods;
+ this.baseCardPaymentMethod = this.allowedPaymentMethods[ 0 ];
+ this.init();
+ return;
+ }
+
+ // Block any initialization until we have valid buttonAttributes
+ if ( ! attributes?.height || ! attributes?.borderRadius ) {
+ setTimeout(
+ () =>
+ this.configure(
+ apiConfig,
+ transactionInfo,
+ buttonAttributes
+ ),
+ 100
+ );
+ return;
+ }
+
+ // Reset timer for future configure calls
+ this.#configureStartTime = 0;
+
this.googlePayConfig = apiConfig;
this.#transactionInfo = transactionInfo;
-
+ this.buttonAttributes = attributes;
this.allowedPaymentMethods = this.googlePayConfig.allowedPaymentMethods;
this.baseCardPaymentMethod = this.allowedPaymentMethods[ 0 ];
+ this.init();
}
init() {
- // Use `reinit()` to force a full refresh of an initialized button.
+ // Skip if already initialized
if ( this.isInitialized ) {
return;
}
- // Stop, if configuration is invalid.
+ // Validate configuration
if ( ! this.validateConfiguration() ) {
return;
}
@@ -270,16 +370,6 @@ class GooglepayButton extends PaymentButton {
super.init();
this.#paymentsClient = this.createPaymentsClient();
- if ( ! this.isPresent ) {
- this.log( 'Payment wrapper not found', this.wrapperId );
- return;
- }
-
- if ( ! this.paymentsClient ) {
- this.log( 'Could not initialize the payments client' );
- return;
- }
-
this.paymentsClient
.isReadyToPay(
this.buildReadyToPayRequest(
@@ -357,30 +447,86 @@ class GooglepayButton extends PaymentButton {
}
/**
- * Creates the payment button and calls `this.insertButton()` to make the button visible in the
- * correct wrapper.
+ * Creates the payment button and calls `super.insertButton()` to make the button visible in the correct wrapper.
*/
addButton() {
if ( ! this.paymentsClient ) {
return;
}
+ // If current buttonAttributes are missing, try to use stored ones
+ if (
+ ! this.buttonAttributes?.height &&
+ this.#storedButtonAttributes?.height
+ ) {
+ this.buttonAttributes = { ...this.#storedButtonAttributes };
+ }
+
+ this.removeButton();
+
const baseCardPaymentMethod = this.baseCardPaymentMethod;
const { color, type, language } = this.style;
- /**
- * @see https://developers.google.com/pay/api/web/reference/client#createButton
- */
- const button = this.paymentsClient.createButton( {
+ const buttonOptions = {
+ buttonColor: color || 'black',
+ buttonSizeMode: 'fill',
+ buttonLocale: language || 'en',
+ buttonType: type || 'pay',
+ buttonRadius: parseInt( this.buttonAttributes?.borderRadius, 10 ),
onClick: this.onButtonClick,
allowedPaymentMethods: [ baseCardPaymentMethod ],
- buttonColor: color || 'black',
- buttonType: type || 'pay',
- buttonLocale: language || 'en',
- buttonSizeMode: 'fill',
- } );
+ };
- this.insertButton( button );
+ const button = this.paymentsClient.createButton( buttonOptions );
+ this.#button = button;
+
+ super.insertButton( button );
+ this.applyWrapperStyles();
+ }
+
+ /**
+ * Applies CSS classes and inline styling to the payment button wrapper.
+ * Extends parent implementation to handle Google Pay specific styling.
+ */
+ applyWrapperStyles() {
+ super.applyWrapperStyles();
+
+ const wrapper = this.wrapperElement;
+ if ( ! wrapper ) {
+ return;
+ }
+
+ // Try stored attributes if current ones are missing
+ const attributes = this.buttonAttributes?.height
+ ? this.buttonAttributes
+ : this.#storedButtonAttributes;
+
+ if ( attributes?.height ) {
+ const height = parseInt( attributes.height, 10 );
+ if ( ! isNaN( height ) ) {
+ wrapper.style.height = `${ height }px`;
+ wrapper.style.minHeight = `${ height }px`;
+ }
+ }
+ }
+
+ /**
+ * Removes the payment button from the DOM.
+ */
+ removeButton() {
+ if ( ! this.isPresent || ! this.#button ) {
+ return;
+ }
+
+ this.log( 'removeButton' );
+
+ try {
+ this.wrapperElement.removeChild( this.#button );
+ } catch ( Exception ) {
+ // Ignore this.
+ }
+
+ this.#button = null;
}
//------------------------
diff --git a/modules/ppcp-googlepay/resources/js/GooglepayManager.js b/modules/ppcp-googlepay/resources/js/GooglepayManager.js
index f9520d23a..8db6c762c 100644
--- a/modules/ppcp-googlepay/resources/js/GooglepayManager.js
+++ b/modules/ppcp-googlepay/resources/js/GooglepayManager.js
@@ -3,10 +3,11 @@ import GooglepayButton from './GooglepayButton';
import ContextHandlerFactory from './Context/ContextHandlerFactory';
class GooglepayManager {
- constructor( namespace, buttonConfig, ppcpConfig ) {
+ constructor( namespace, buttonConfig, ppcpConfig, buttonAttributes = {} ) {
this.namespace = namespace;
this.buttonConfig = buttonConfig;
this.ppcpConfig = ppcpConfig;
+ this.buttonAttributes = buttonAttributes;
this.googlePayConfig = null;
this.transactionInfo = null;
this.contextHandler = null;
@@ -26,13 +27,18 @@ class GooglepayManager {
bootstrap.handler,
buttonConfig,
ppcpConfig,
- this.contextHandler
+ this.contextHandler,
+ this.buttonAttributes
);
this.buttons.push( button );
const initButton = () => {
- button.configure( this.googlePayConfig, this.transactionInfo );
+ button.configure(
+ this.googlePayConfig,
+ this.transactionInfo,
+ this.buttonAttributes
+ );
button.init();
};
@@ -70,7 +76,8 @@ class GooglepayManager {
for ( const button of this.buttons ) {
button.configure(
this.googlePayConfig,
- this.transactionInfo
+ this.transactionInfo,
+ this.buttonAttributes
);
button.init();
}
diff --git a/modules/ppcp-googlepay/resources/js/GooglepayManagerBlockEditor.js b/modules/ppcp-googlepay/resources/js/GooglepayManagerBlockEditor.js
index 1e3bd6ebb..548e37f8b 100644
--- a/modules/ppcp-googlepay/resources/js/GooglepayManagerBlockEditor.js
+++ b/modules/ppcp-googlepay/resources/js/GooglepayManagerBlockEditor.js
@@ -4,11 +4,13 @@ const GooglepayManagerBlockEditor = ( {
namespace,
buttonConfig,
ppcpConfig,
+ buttonAttributes,
} ) => (
);
diff --git a/modules/ppcp-googlepay/resources/js/boot-block.js b/modules/ppcp-googlepay/resources/js/boot-block.js
index 398cc488c..8c63bba14 100644
--- a/modules/ppcp-googlepay/resources/js/boot-block.js
+++ b/modules/ppcp-googlepay/resources/js/boot-block.js
@@ -20,7 +20,7 @@ if ( typeof window.PayPalCommerceGateway === 'undefined' ) {
window.PayPalCommerceGateway = ppcpConfig;
}
-const GooglePayComponent = ( { isEditing } ) => {
+const GooglePayComponent = ( { isEditing, buttonAttributes } ) => {
const [ paypalLoaded, setPaypalLoaded ] = useState( false );
const [ googlePayLoaded, setGooglePayLoaded ] = useState( false );
const [ manager, setManager ] = useState( null );
@@ -48,11 +48,18 @@ const GooglePayComponent = ( { isEditing } ) => {
const newManager = new GooglepayManager(
namespace,
buttonConfig,
- ppcpConfig
+ ppcpConfig,
+ buttonAttributes
);
setManager( newManager );
}
- }, [ paypalLoaded, googlePayLoaded, isEditing, manager ] );
+ }, [
+ paypalLoaded,
+ googlePayLoaded,
+ isEditing,
+ manager,
+ buttonAttributes,
+ ] );
if ( isEditing ) {
return (
@@ -60,6 +67,7 @@ const GooglePayComponent = ( { isEditing } ) => {
namespace={ namespace }
buttonConfig={ buttonConfig }
ppcpConfig={ ppcpConfig }
+ buttonAttributes={ buttonAttributes }
/>
);
}
@@ -89,5 +97,6 @@ registerExpressPaymentMethod( {
canMakePayment: () => buttonData.enabled,
supports: {
features,
+ style: [ 'height', 'borderRadius' ],
},
} );
diff --git a/modules/ppcp-local-alternative-payment-methods/src/LocalAlternativePaymentMethodsModule.php b/modules/ppcp-local-alternative-payment-methods/src/LocalAlternativePaymentMethodsModule.php
index 6db9de464..b66ad378f 100644
--- a/modules/ppcp-local-alternative-payment-methods/src/LocalAlternativePaymentMethodsModule.php
+++ b/modules/ppcp-local-alternative-payment-methods/src/LocalAlternativePaymentMethodsModule.php
@@ -11,6 +11,7 @@ namespace WooCommerce\PayPalCommerce\LocalAlternativePaymentMethods;
use WC_Order;
use Automattic\WooCommerce\Blocks\Payments\PaymentMethodRegistry;
+use WooCommerce\PayPalCommerce\Onboarding\State;
use WooCommerce\PayPalCommerce\Vendor\Inpsyde\Modularity\Module\ExecutableModule;
use WooCommerce\PayPalCommerce\Vendor\Inpsyde\Modularity\Module\ExtendingModule;
use WooCommerce\PayPalCommerce\Vendor\Inpsyde\Modularity\Module\ModuleClassNameIdTrait;
@@ -46,7 +47,7 @@ class LocalAlternativePaymentMethodsModule implements ServiceModule, ExtendingMo
$settings = $c->get( 'wcgateway.settings' );
assert( $settings instanceof Settings );
- if ( ! $settings->has( 'allow_local_apm_gateways' ) || $settings->get( 'allow_local_apm_gateways' ) !== true ) {
+ if ( ! self::should_add_local_apm_gateways( $settings ) ) {
return true;
}
@@ -58,6 +59,11 @@ class LocalAlternativePaymentMethodsModule implements ServiceModule, ExtendingMo
* @psalm-suppress MissingClosureParamType
*/
function ( $methods ) use ( $c ) {
+ $onboarding_state = $c->get( 'onboarding.state' );
+ if ( $onboarding_state->current_state() === State::STATE_START ) {
+ return $methods;
+ }
+
if ( ! is_array( $methods ) ) {
return $methods;
}
@@ -185,18 +191,6 @@ class LocalAlternativePaymentMethodsModule implements ServiceModule, ExtendingMo
2
);
- add_filter(
- 'woocommerce_paypal_payments_allowed_refund_payment_methods',
- function( array $payment_methods ) use ( $c ): array {
- $local_payment_methods = $c->get( 'ppcp-local-apms.payment-methods' );
- foreach ( $local_payment_methods as $payment_method ) {
- $payment_methods[] = $payment_method['id'];
- }
-
- return $payment_methods;
- }
- );
-
return true;
}
@@ -216,4 +210,17 @@ class LocalAlternativePaymentMethodsModule implements ServiceModule, ExtendingMo
return false;
}
+
+ /**
+ * Check if the local APMs should be added to the available payment gateways.
+ *
+ * @param Settings $settings PayPal gateway settings.
+ * @return bool
+ */
+ private function should_add_local_apm_gateways( Settings $settings ): bool {
+ return $settings->has( 'enabled' )
+ && $settings->get( 'enabled' ) === true
+ && $settings->has( 'allow_local_apm_gateways' )
+ && $settings->get( 'allow_local_apm_gateways' ) === true;
+ }
}
diff --git a/modules/ppcp-onboarding/src/OnboardingModule.php b/modules/ppcp-onboarding/src/OnboardingModule.php
index 40e137832..5c2899491 100644
--- a/modules/ppcp-onboarding/src/OnboardingModule.php
+++ b/modules/ppcp-onboarding/src/OnboardingModule.php
@@ -13,6 +13,7 @@ use WooCommerce\PayPalCommerce\Onboarding\Endpoint\UpdateSignupLinksEndpoint;
use WooCommerce\PayPalCommerce\Onboarding\Assets\OnboardingAssets;
use WooCommerce\PayPalCommerce\Onboarding\Endpoint\LoginSellerEndpoint;
use WooCommerce\PayPalCommerce\Onboarding\Render\OnboardingRenderer;
+use WooCommerce\PayPalCommerce\Settings\SettingsModule;
use WooCommerce\PayPalCommerce\Vendor\Inpsyde\Modularity\Module\ExecutableModule;
use WooCommerce\PayPalCommerce\Vendor\Inpsyde\Modularity\Module\ExtendingModule;
use WooCommerce\PayPalCommerce\Vendor\Inpsyde\Modularity\Module\ModuleClassNameIdTrait;
@@ -44,26 +45,34 @@ class OnboardingModule implements ServiceModule, ExtendingModule, ExecutableModu
*/
public function run( ContainerInterface $c ): bool {
- $asset_loader = $c->get( 'onboarding.assets' );
- /**
- * The OnboardingAssets.
- *
- * @var OnboardingAssets $asset_loader
- */
- add_action(
- 'admin_enqueue_scripts',
- array(
- $asset_loader,
- 'register',
- )
- );
- add_action(
- 'woocommerce_settings_checkout',
- array(
- $asset_loader,
- 'enqueue',
- )
- );
+ if ( ! apply_filters(
+ // phpcs:ignore WordPress.NamingConventions.ValidHookName.UseUnderscores
+ 'woocommerce.feature-flags.woocommerce_paypal_payments.settings_enabled',
+ getenv( 'PCP_SETTINGS_ENABLED' ) === '1'
+ ) || SettingsModule::should_use_the_old_ui()
+ ) {
+
+ $asset_loader = $c->get( 'onboarding.assets' );
+ /**
+ * The OnboardingAssets.
+ *
+ * @var OnboardingAssets $asset_loader
+ */
+ add_action(
+ 'admin_enqueue_scripts',
+ array(
+ $asset_loader,
+ 'register',
+ )
+ );
+ add_action(
+ 'woocommerce_settings_checkout',
+ array(
+ $asset_loader,
+ 'enqueue',
+ )
+ );
+ }
add_filter(
'woocommerce_form_field',
diff --git a/modules/ppcp-save-payment-methods/resources/js/add-payment-method.js b/modules/ppcp-save-payment-methods/resources/js/add-payment-method.js
index 8e75e3ad7..88df7d309 100644
--- a/modules/ppcp-save-payment-methods/resources/js/add-payment-method.js
+++ b/modules/ppcp-save-payment-methods/resources/js/add-payment-method.js
@@ -82,9 +82,8 @@ import {
renderFields( cardFields );
}
- document
- .querySelector( '#place_order' )
- ?.addEventListener( 'click', ( event ) => {
+ const placeOrderButton = document.querySelector( '#place_order' );
+ placeOrderButton?.addEventListener( 'click', ( event ) => {
const cardPaymentToken = document.querySelector(
'input[name="wc-ppcp-credit-card-gateway-payment-token"]:checked'
)?.value;
@@ -95,11 +94,11 @@ import {
) {
return;
}
-
+ placeOrderButton.disabled = true;
event.preventDefault();
-
cardFields.submit().catch( ( error ) => {
console.error( error );
+ placeOrderButton.disabled = false;
} );
} );
} );
diff --git a/modules/ppcp-save-payment-methods/src/Endpoint/CreatePaymentToken.php b/modules/ppcp-save-payment-methods/src/Endpoint/CreatePaymentToken.php
index ae3d7dfa0..434a08925 100644
--- a/modules/ppcp-save-payment-methods/src/Endpoint/CreatePaymentToken.php
+++ b/modules/ppcp-save-payment-methods/src/Endpoint/CreatePaymentToken.php
@@ -94,7 +94,9 @@ class CreatePaymentToken implements EndpointInterface {
)
);
- $result = $this->payment_method_tokens_endpoint->create_payment_token( $payment_source );
+ $customer_id = get_user_meta( get_current_user_id(), '_ppcp_target_customer_id', true );
+
+ $result = $this->payment_method_tokens_endpoint->create_payment_token( $payment_source, $customer_id );
if ( is_user_logged_in() && isset( $result->customer->id ) ) {
$current_user_id = get_current_user_id();
diff --git a/modules/ppcp-save-payment-methods/src/Endpoint/CreateSetupToken.php b/modules/ppcp-save-payment-methods/src/Endpoint/CreateSetupToken.php
index 7eb3a5ace..6952feb43 100644
--- a/modules/ppcp-save-payment-methods/src/Endpoint/CreateSetupToken.php
+++ b/modules/ppcp-save-payment-methods/src/Endpoint/CreateSetupToken.php
@@ -103,7 +103,9 @@ class CreateSetupToken implements EndpointInterface {
);
}
- $result = $this->payment_method_tokens_endpoint->setup_tokens( $payment_source );
+ $customer_id = get_user_meta( get_current_user_id(), '_ppcp_target_customer_id', true );
+
+ $result = $this->payment_method_tokens_endpoint->setup_tokens( $payment_source, $customer_id );
wp_send_json_success( $result );
return true;
diff --git a/modules/ppcp-settings/images/icon-button-payment-method-advanced-cards.svg b/modules/ppcp-settings/images/icon-button-payment-method-advanced-cards.svg
new file mode 100644
index 000000000..51ead20b6
--- /dev/null
+++ b/modules/ppcp-settings/images/icon-button-payment-method-advanced-cards.svg
@@ -0,0 +1,9 @@
+
diff --git a/modules/ppcp-settings/images/icon-button-payment-method-apple-pay.svg b/modules/ppcp-settings/images/icon-button-payment-method-apple-pay.svg
index 9224d4e5a..ca46628f6 100644
--- a/modules/ppcp-settings/images/icon-button-payment-method-apple-pay.svg
+++ b/modules/ppcp-settings/images/icon-button-payment-method-apple-pay.svg
@@ -1,5 +1,10 @@
-