diff --git a/modules/ppcp-button/resources/js/modules/Helper/PayPalScriptLoading.js b/modules/ppcp-button/resources/js/modules/Helper/PayPalScriptLoading.js index b90bad117..48134d2bc 100644 --- a/modules/ppcp-button/resources/js/modules/Helper/PayPalScriptLoading.js +++ b/modules/ppcp-button/resources/js/modules/Helper/PayPalScriptLoading.js @@ -1,10 +1,31 @@ import { loadScript } from '@paypal/paypal-js'; +import dataClientIdAttributeHandler from '../DataClientIdAttributeHandler'; import widgetBuilder from '../Renderer/WidgetBuilder'; import { processConfig } from './ConfigProcessor'; const loadedScripts = new Map(); const scriptPromises = new Map(); +const handleDataClientIdAttribute = async ( scriptOptions, config ) => { + if ( + config.data_client_id?.set_attribute && + config.vault_v3_enabled !== true + ) { + return new Promise( ( resolve, reject ) => { + dataClientIdAttributeHandler( + scriptOptions, + config.data_client_id, + ( paypal ) => { + widgetBuilder.setPaypal( paypal ); + resolve( paypal ); + }, + reject + ); + } ); + } + return null; +}; + export const loadPayPalScript = async ( namespace, config ) => { if ( ! namespace ) { throw new Error( 'Namespace is required' ); @@ -27,6 +48,14 @@ export const loadPayPalScript = async ( namespace, config ) => { 'data-namespace': namespace, }; + const dataClientIdResult = await handleDataClientIdAttribute( + scriptOptions, + config + ); + if ( dataClientIdResult ) { + return dataClientIdResult; + } + const scriptPromise = new Promise( ( resolve, reject ) => { loadScript( scriptOptions ) .then( ( script ) => { diff --git a/modules/ppcp-button/resources/js/modules/Helper/ScriptLoading.js b/modules/ppcp-button/resources/js/modules/Helper/ScriptLoading.js index 9d143ad16..86e16c7de 100644 --- a/modules/ppcp-button/resources/js/modules/Helper/ScriptLoading.js +++ b/modules/ppcp-button/resources/js/modules/Helper/ScriptLoading.js @@ -1,7 +1,9 @@ +import dataClientIdAttributeHandler from '../DataClientIdAttributeHandler'; import { loadScript } from '@paypal/paypal-js'; import widgetBuilder from '../Renderer/WidgetBuilder'; import merge from 'deepmerge'; import { keysToCamelCase } from './Utils'; +import { getCurrentPaymentMethod } from './CheckoutMethodState'; // This component may be used by multiple modules. This assures that options are shared between all instances. const scriptOptionsMap = {}; @@ -69,6 +71,20 @@ export const loadPaypalScript = ( config, onLoaded, onError = null ) => { scriptOptions = merge( scriptOptions, config.script_attributes ); } + // Load PayPal script for special case with data-client-token + if ( + config.data_client_id?.set_attribute && + config.vault_v3_enabled !== '1' + ) { + dataClientIdAttributeHandler( + scriptOptions, + config.data_client_id, + callback, + errorCallback + ); + return; + } + // Adds data-user-id-token to script options. const userIdToken = config?.save_payment_methods?.id_token; if ( userIdToken && config?.user?.is_logged === true ) {