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

Rename the new script loading script

Browse source
This commit is contained in:
Daniel Dudzic 2024-10-08 00:41:30 +02:00
parent eba3d12e4e
commit e76c8b257b
No known key found for this signature in database
GPG key ID: 31B40D33E3465483
9 changed files with 153 additions and 95 deletions
Download patch file Download diff file Expand all files Collapse all files

7
modules/ppcp-axo-block/resources/js/hooks/usePayPalScript.js
View file

@ -1,7 +1,7 @@
import { useEffect } from '@wordpress/element';
import { useDispatch, useSelect } from '@wordpress/data';
import { log } from '../../../../ppcp-axo/resources/js/Helper/Debug';
import UnifiedScriptLoader from '../../../../ppcp-button/resources/js/modules/Helper/UnifiedScriptLoader';
import { loadPayPalScript } from '../../../../ppcp-button/resources/js/modules/Helper/PayPalScriptLoading';
import { STORE_NAME } from '../stores/axoStore';
/**
@ -28,10 +28,7 @@ const usePayPalScript = ( namespace, ppcpConfig, isConfigLoaded ) => {
const loadScript = async () => {
if ( ! isPayPalLoaded && isConfigLoaded ) {
try {
await UnifiedScriptLoader.loadPayPalScript(
namespace,
ppcpConfig
);
await loadPayPalScript( namespace, ppcpConfig );
setIsPayPalLoaded( true );
} catch ( error ) {
log(

4
modules/ppcp-axo/resources/js/boot.js
View file

@ -1,5 +1,5 @@
import AxoManager from './AxoManager';
import UnifiedScriptLoader from '../../../ppcp-button/resources/js/modules/Helper/UnifiedScriptLoader';
import { loadPayPalScript } from '../../../ppcp-button/resources/js/modules/Helper/PayPalScriptLoading';
import { log } from './Helper/Debug';
( function ( { axoConfig, ppcpConfig, jQuery } ) {
@ -15,7 +15,7 @@ import { log } from './Helper/Debug';
}
// Load PayPal
UnifiedScriptLoader.loadPayPalScript( namespace, ppcpConfig )
loadPayPalScript( namespace, ppcpConfig )
.then( () => {
bootstrap();
} )

13
modules/ppcp-blocks/resources/js/checkout-block.js
View file

@ -15,7 +15,7 @@ import {
cartHasSubscriptionProducts,
isPayPalSubscription,
} from './Helper/Subscription';
import UnifiedScriptLoader from '../../../ppcp-button/resources/js/modules/Helper/UnifiedScriptLoader';
import { loadPayPalScript } from '../../../ppcp-button/resources/js/modules/Helper/PayPalScriptLoading';
import { PayPalScriptProvider, PayPalButtons } from '@paypal/react-paypal-js';
import { normalizeStyleForFundingSource } from '../../../ppcp-button/resources/js/modules/Helper/Style';
import buttonModuleWatcher from '../../../ppcp-button/resources/js/modules/ButtonModuleWatcher';
@ -56,7 +56,7 @@ const PayPalComponent = ( {
if ( ! paypalScriptLoaded ) {
if ( ! paypalScriptPromise ) {
// for editor, since canMakePayment was not called
paypalScriptPromise = UnifiedScriptLoader.loadPayPalScript(
paypalScriptPromise = loadPayPalScript(
namespace,
config.scriptData
);
@ -825,11 +825,10 @@ if ( block_enabled && config.enabled ) {
ariaLabel: config.title,
canMakePayment: async () => {
if ( ! paypalScriptPromise ) {
paypalScriptPromise =
UnifiedScriptLoader.loadPayPalScript(
namespace,
config.scriptData
);
paypalScriptPromise = loadPayPalScript(
namespace,
config.scriptData
);
paypalScriptPromise.then( () => {
const messagesBootstrap =
new BlockCheckoutMessagesBootstrap(

6
modules/ppcp-button/resources/js/modules/ContextBootstrap/SingleProductBootstap.js
View file

@ -2,7 +2,7 @@ import UpdateCart from '../Helper/UpdateCart';
import SingleProductActionHandler from '../ActionHandler/SingleProductActionHandler';
import { hide, show } from '../Helper/Hiding';
import BootstrapHelper from '../Helper/BootstrapHelper';
import { loadPaypalJsScript } from '../Helper/ScriptLoading';
import { loadAndRenderPayPalScript } from '../Helper/PayPalScriptLoading';
import { getPlanIdFromVariation } from '../Helper/Subscriptions';
import SimulateCart from '../Helper/SimulateCart';
import { strRemoveWord, strAddWord, throttle } from '../Helper/Utils';
@ -38,6 +38,7 @@ class SingleProductBootstap {
);
this.subscriptionButtonsLoaded = false;
this.namespace = 'ppcpPaypalSingleProduct';
}
form() {
@ -254,7 +255,8 @@ class SingleProductBootstap {
if ( this.subscriptionButtonsLoaded ) {
return;
}
loadPaypalJsScript(
loadAndRenderPayPalScript(
this.namespace,
{
clientId: PayPalCommerceGateway.client_id,
currency: PayPalCommerceGateway.currency,

34
modules/ppcp-button/resources/js/modules/Helper/ConfigProcessor.js Normal file
View file

@ -0,0 +1,34 @@
import merge from 'deepmerge';
import { v4 as uuidv4 } from 'uuid';
import { keysToCamelCase } from './Utils';
const processAxoConfig = ( config ) => {
const scriptOptions = {};
const sdkClientToken = config?.axo?.sdk_client_token;
const uuid = uuidv4().replace( /-/g, '' );
if ( sdkClientToken ) {
scriptOptions[ 'data-sdk-client-token' ] = sdkClientToken;
scriptOptions[ 'data-client-metadata-id' ] = uuid;
}
return scriptOptions;
};
const processUserIdToken = ( config, sdkClientToken ) => {
const userIdToken = config?.save_payment_methods?.id_token;
return userIdToken && ! sdkClientToken
? { 'data-user-id-token': userIdToken }
: {};
};
export const processConfig = ( config ) => {
let scriptOptions = keysToCamelCase( config.url_params );
if ( config.script_attributes ) {
scriptOptions = merge( scriptOptions, config.script_attributes );
}
const axoOptions = processAxoConfig( config );
const userIdTokenOptions = processUserIdToken(
config,
axoOptions[ 'data-sdk-client-token' ]
);
return merge.all( [ scriptOptions, axoOptions, userIdTokenOptions ] );
};

101
modules/ppcp-button/resources/js/modules/Helper/PayPalScriptLoading.js Normal file
View file

@ -0,0 +1,101 @@
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 !== '1'
) {
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' );
}
if ( loadedScripts.has( namespace ) ) {
console.log( `Script already loaded for namespace: ${ namespace }` );
return loadedScripts.get( namespace );
}
if ( scriptPromises.has( namespace ) ) {
console.log(
`Script loading in progress for namespace: ${ namespace }`
);
return scriptPromises.get( namespace );
}
const scriptOptions = {
...processConfig( config ),
'data-namespace': namespace,
};
const dataClientIdResult = await handleDataClientIdAttribute(
scriptOptions,
config
);
if ( dataClientIdResult ) {
return dataClientIdResult;
}
const scriptPromise = new Promise( ( resolve, reject ) => {
loadScript( scriptOptions )
.then( ( script ) => {
widgetBuilder.setPaypal( script );
loadedScripts.set( namespace, script );
console.log( `Script loaded for namespace: ${ namespace }` );
resolve( script );
} )
.catch( ( error ) => {
console.error(
`Failed to load script for namespace: ${ namespace }`,
error
);
reject( error );
} )
.finally( () => {
scriptPromises.delete( namespace );
} );
} );
scriptPromises.set( namespace, scriptPromise );
return scriptPromise;
};
export const loadAndRenderPayPalScript = async (
namespace,
options,
renderFunction,
renderTarget
) => {
if ( ! namespace ) {
throw new Error( 'Namespace is required' );
}
const scriptOptions = {
...options,
'data-namespace': namespace,
};
const script = await loadScript( scriptOptions );
widgetBuilder.setPaypal( script );
await renderFunction( script, renderTarget );
};

75
modules/ppcp-button/resources/js/modules/Helper/UnifiedScriptLoader.js
View file

@ -1,75 +0,0 @@
import { loadScript } from '@paypal/paypal-js';
class UnifiedScriptLoader {
constructor() {
this.loadedScripts = new Map();
this.scriptPromises = new Map();
}
async loadPayPalScript( namespace, config ) {
if ( ! namespace ) {
throw new Error( 'Namespace is required' );
}
if ( this.loadedScripts.has( namespace ) ) {
console.log(
`PayPal script already loaded for namespace: ${ namespace }`
);
return this.loadedScripts.get( namespace );
}
if ( this.scriptPromises.has( namespace ) ) {
console.log(
`PayPal script loading in progress for namespace: ${ namespace }`
);
return this.scriptPromises.get( namespace );
}
const scriptPromise = new Promise( ( resolve, reject ) => {
const scriptOptions = {
...config.url_params,
...config.script_attributes,
'data-namespace': namespace,
};
if ( config.axo?.sdk_client_token ) {
scriptOptions[ 'data-sdk-client-token' ] =
config.axo.sdk_client_token;
scriptOptions[ 'data-client-metadata-id' ] =
config.axo.client_metadata_id;
}
if (
config.save_payment_methods?.id_token &&
! config.axo?.sdk_client_token
) {
scriptOptions[ 'data-user-id-token' ] =
config.save_payment_methods.id_token;
}
loadScript( scriptOptions )
.then( ( paypal ) => {
this.loadedScripts.set( namespace, paypal );
console.log(
`PayPal script loaded for namespace: ${ namespace }`
);
resolve( paypal );
} )
.catch( ( error ) => {
console.error(
`Failed to load PayPal script for namespace: ${ namespace }`,
error
);
reject( error );
} )
.finally( () => {
this.scriptPromises.delete( namespace );
} );
} );
this.scriptPromises.set( namespace, scriptPromise );
return scriptPromise;
}
}
export default new UnifiedScriptLoader();

4
modules/ppcp-googlepay/resources/js/boot-block.js
View file

@ -4,7 +4,7 @@ import {
registerPaymentMethod,
} from '@woocommerce/blocks-registry';
import { __ } from '@wordpress/i18n';
import UnifiedScriptLoader from '../../../ppcp-button/resources/js/modules/Helper/UnifiedScriptLoader';
import { loadPayPalScript } from '../../../ppcp-button/resources/js/modules/Helper/PayPalScriptLoading';
import GooglepayManager from './GooglepayManager';
import { loadCustomScript } from '@paypal/paypal-js';
import GooglepayManagerBlockEditor from './GooglepayManagerBlockEditor';
@ -35,7 +35,7 @@ const GooglePayComponent = ( props ) => {
ppcpConfig.url_params.components += ',googlepay';
// Load PayPal
UnifiedScriptLoader.loadPayPalScript( namespace, ppcpConfig )
loadPayPalScript( namespace, ppcpConfig )
.then( () => {
setPaypalLoaded( true );
} )

4
modules/ppcp-googlepay/resources/js/boot.js
View file

@ -8,7 +8,7 @@
*/
import { loadCustomScript } from '@paypal/paypal-js';
import UnifiedScriptLoader from '../../../ppcp-button/resources/js/modules/Helper/UnifiedScriptLoader';
import { loadPayPalScript } from '../../../ppcp-button/resources/js/modules/Helper/PayPalScriptLoading';
import GooglepayManager from './GooglepayManager';
import { setupButtonEvents } from '../../../ppcp-button/resources/js/modules/Helper/ButtonRefreshHelper';
import { CheckoutBootstrap } from './ContextBootstrap/CheckoutBootstrap';
@ -86,7 +86,7 @@ import moduleStorage from './Helper/GooglePayStorage';
} );
// Load PayPal
UnifiedScriptLoader.loadPayPalScript( namespace, ppcpConfig )
loadPayPalScript( namespace, ppcpConfig )
.then( () => {
paypalLoaded = true;
tryToBoot();