Merge branch 'trunk' of github.com:woocommerce/woocommerce-paypal-payments into PCP-3827-implement-block-button-styles-for-google-pay-button
|
@ -1,5 +1,28 @@
|
|||
*** Changelog ***
|
||||
|
||||
= 2.9.4 - xxxx-xx-xx =
|
||||
* Fix - Apple Pay button preview missing in Standard payment and Advanced Processing tabs #2755
|
||||
* Fix - Set "Sold individually" only for subscription connected to PayPal #2710
|
||||
* Fix - Ensure Google Pay button does not appear for subscriptions #2718
|
||||
* Fix - PayPal Subscriptions API renewal order not created in WooCommerce #2612
|
||||
* Fix - Apple Pay button disappears on Classic Checkout #2722
|
||||
* Fix - Google Pay and Apple Pay as separate gateways does not show button when checkout remove from button locations #2756
|
||||
* Fix - Add GW refund support for Apple Pay #2746
|
||||
* Fix - PayPal Subscriptions cancel and suspend from Subscriptions list page does not work #2632
|
||||
* Fix - Displaying of HTML tags in product title on choosing a product for tracking (2801) #2701
|
||||
* Fix - Payment with OXXO cause continuation state for next payment #2702
|
||||
* Fix - Fix problems with autoptimize plugin #2705
|
||||
* Fix - Missing custom field PayPal Transaction Fee for OXXO #2700
|
||||
* Enhancement - Extend Advanced Card Processing country/currency feature availability #2754
|
||||
* Enhancement - Add void button #2678
|
||||
* Enhancement - Use basic redirect gateway when checkout smart buttons disabled #2714
|
||||
* Enhancement - Receive button properties from the Checkout Block #2448
|
||||
* Enhancement - Run PPEC\DeactivateNote query only in backend #2719
|
||||
* Enhancement - Prevent plugin use for "Send only" countries #2721
|
||||
* Enhancement - Do not add pay later button in editor #2570
|
||||
* Enhancement - Axo: Remove the submit button when Fastlane is disabled #2720
|
||||
* Enhancement - Sync the PayPal product page button state to Apple/Google Pay buttons, show alerts #2742
|
||||
|
||||
= 2.9.3 - 2024-10-15 =
|
||||
* Fix - Multi-currency support #2667
|
||||
* Fix - "0.00" amount in Google Pay for virtual products #2636
|
||||
|
|
|
@ -10,18 +10,18 @@
|
|||
"Edge >= 14"
|
||||
],
|
||||
"dependencies": {
|
||||
"core-js": "^3.25.0"
|
||||
"core-js": "^3.39"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.19",
|
||||
"@babel/preset-env": "^7.19",
|
||||
"babel-loader": "^8.2",
|
||||
"@babel/core": "^7.26",
|
||||
"@babel/preset-env": "^7.26",
|
||||
"babel-loader": "^9.2",
|
||||
"cross-env": "^7.0.3",
|
||||
"file-loader": "^6.2.0",
|
||||
"sass": "^1.42.1",
|
||||
"sass-loader": "^12.1.0",
|
||||
"webpack": "^5.76",
|
||||
"webpack-cli": "^4.10"
|
||||
"sass": "^1.80",
|
||||
"sass-loader": "^16",
|
||||
"webpack": "^5.96",
|
||||
"webpack-cli": "^5"
|
||||
},
|
||||
"scripts": {
|
||||
"build": "cross-env BABEL_ENV=default NODE_ENV=production webpack",
|
||||
|
|
|
@ -716,6 +716,7 @@ return array(
|
|||
'FR' => $mastercard_visa_amex,
|
||||
'GB' => $mastercard_visa_amex,
|
||||
'GR' => $mastercard_visa_amex,
|
||||
'HK' => $mastercard_visa_amex,
|
||||
'HU' => $mastercard_visa_amex,
|
||||
'IE' => $mastercard_visa_amex,
|
||||
'IT' => $mastercard_visa_amex,
|
||||
|
@ -745,6 +746,7 @@ return array(
|
|||
'SE' => $mastercard_visa_amex,
|
||||
'SI' => $mastercard_visa_amex,
|
||||
'SK' => $mastercard_visa_amex,
|
||||
'SG' => $mastercard_visa_amex,
|
||||
'JP' => array(
|
||||
'mastercard' => array(),
|
||||
'visa' => array(),
|
||||
|
|
|
@ -14,7 +14,7 @@ use WooCommerce\PayPalCommerce\ApiClient\Entity\Token;
|
|||
use WooCommerce\PayPalCommerce\ApiClient\Exception\RuntimeException;
|
||||
use WooCommerce\PayPalCommerce\ApiClient\Helper\Cache;
|
||||
use Psr\Log\LoggerInterface;
|
||||
use WooCommerce\PayPalCommerce\WcGateway\Settings\Settings;
|
||||
use WooCommerce\PayPalCommerce\Vendor\Psr\Container\ContainerInterface;
|
||||
|
||||
/**
|
||||
* Class PayPalBearer
|
||||
|
@ -28,7 +28,7 @@ class PayPalBearer implements Bearer {
|
|||
/**
|
||||
* The settings.
|
||||
*
|
||||
* @var Settings
|
||||
* @var ContainerInterface
|
||||
*/
|
||||
protected $settings;
|
||||
|
||||
|
@ -70,12 +70,12 @@ class PayPalBearer implements Bearer {
|
|||
/**
|
||||
* PayPalBearer constructor.
|
||||
*
|
||||
* @param Cache $cache The cache.
|
||||
* @param string $host The host.
|
||||
* @param string $key The key.
|
||||
* @param string $secret The secret.
|
||||
* @param LoggerInterface $logger The logger.
|
||||
* @param Settings $settings The settings.
|
||||
* @param Cache $cache The cache.
|
||||
* @param string $host The host.
|
||||
* @param string $key The key.
|
||||
* @param string $secret The secret.
|
||||
* @param LoggerInterface $logger The logger.
|
||||
* @param ContainerInterface $settings The settings.
|
||||
*/
|
||||
public function __construct(
|
||||
Cache $cache,
|
||||
|
@ -83,7 +83,7 @@ class PayPalBearer implements Bearer {
|
|||
string $key,
|
||||
string $secret,
|
||||
LoggerInterface $logger,
|
||||
Settings $settings
|
||||
ContainerInterface $settings
|
||||
) {
|
||||
|
||||
$this->cache = $cache;
|
||||
|
@ -136,8 +136,7 @@ class PayPalBearer implements Bearer {
|
|||
$error = new RuntimeException(
|
||||
__( 'Could not create token.', 'woocommerce-paypal-payments' )
|
||||
);
|
||||
$this->logger->log(
|
||||
'warning',
|
||||
$this->logger->warning(
|
||||
$error->getMessage(),
|
||||
array(
|
||||
'args' => $args,
|
||||
|
|
|
@ -58,7 +58,7 @@ class Cache {
|
|||
*
|
||||
* @param string $key The key.
|
||||
*/
|
||||
public function delete( string $key ) {
|
||||
public function delete( string $key ): void {
|
||||
delete_transient( $this->prefix . $key );
|
||||
}
|
||||
|
||||
|
|
66
modules/ppcp-api-client/src/Helper/InMemoryCache.php
Normal file
|
@ -0,0 +1,66 @@
|
|||
<?php
|
||||
/**
|
||||
* An in-memory version of Cache.
|
||||
*
|
||||
* @package WooCommerce\PayPalCommerce\ApiClient\Helper
|
||||
*/
|
||||
|
||||
declare( strict_types=1 );
|
||||
|
||||
namespace WooCommerce\PayPalCommerce\ApiClient\Helper;
|
||||
|
||||
/**
|
||||
* An in-memory version of Cache. The data is kept only within the class instance.
|
||||
*/
|
||||
class InMemoryCache extends Cache {
|
||||
/**
|
||||
* The in-memory storage.
|
||||
*
|
||||
* @var array<string, mixed>
|
||||
*/
|
||||
private array $data = array();
|
||||
|
||||
/**
|
||||
* InMemoryCache constructor
|
||||
*/
|
||||
public function __construct() {
|
||||
parent::__construct( '' );
|
||||
}
|
||||
|
||||
/**
|
||||
* Gets a value.
|
||||
*
|
||||
* @param string $key The key under which the value is stored.
|
||||
*
|
||||
* @return mixed
|
||||
*/
|
||||
public function get( string $key ) {
|
||||
if ( ! array_key_exists( $key, $this->data ) ) {
|
||||
return false;
|
||||
}
|
||||
return $this->data[ $key ];
|
||||
}
|
||||
|
||||
/**
|
||||
* Deletes a cache.
|
||||
*
|
||||
* @param string $key The key.
|
||||
*/
|
||||
public function delete( string $key ): void {
|
||||
unset( $this->data[ $key ] );
|
||||
}
|
||||
|
||||
/**
|
||||
* Caches a value.
|
||||
*
|
||||
* @param string $key The key under which the value should be cached.
|
||||
* @param mixed $value The value to cache.
|
||||
* @param int $expiration Unused.
|
||||
*
|
||||
* @return bool
|
||||
*/
|
||||
public function set( string $key, $value, int $expiration = 0 ): bool {
|
||||
$this->data[ $key ] = $value;
|
||||
return true;
|
||||
}
|
||||
}
|
|
@ -11,20 +11,20 @@
|
|||
],
|
||||
"dependencies": {
|
||||
"@paypal/paypal-js": "^6.0.0",
|
||||
"core-js": "^3.25.0"
|
||||
"core-js": "^3.39"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.19",
|
||||
"@babel/preset-env": "^7.19",
|
||||
"@babel/preset-react": "^7.18.6",
|
||||
"@woocommerce/dependency-extraction-webpack-plugin": "^2.2.0",
|
||||
"babel-loader": "^8.2",
|
||||
"@babel/core": "^7.26",
|
||||
"@babel/preset-env": "^7.26",
|
||||
"@babel/preset-react": "^7.25",
|
||||
"@woocommerce/dependency-extraction-webpack-plugin": "2.2.0",
|
||||
"babel-loader": "^9.2",
|
||||
"cross-env": "^7.0.3",
|
||||
"file-loader": "^6.2.0",
|
||||
"sass": "^1.42.1",
|
||||
"sass-loader": "^12.1.0",
|
||||
"webpack": "^5.76",
|
||||
"webpack-cli": "^4.10"
|
||||
"sass": "^1.80",
|
||||
"sass-loader": "^16",
|
||||
"webpack": "^5.96",
|
||||
"webpack-cli": "^5"
|
||||
},
|
||||
"scripts": {
|
||||
"build": "cross-env BABEL_ENV=default NODE_ENV=production webpack",
|
||||
|
|
|
@ -57,7 +57,3 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
#ppc-button-ppcp-applepay {
|
||||
display: none;
|
||||
}
|
||||
|
|
|
@ -1,54 +1,90 @@
|
|||
import buttonModuleWatcher from '../../../ppcp-button/resources/js/modules/ButtonModuleWatcher';
|
||||
import ApplePayButton from './ApplepayButton';
|
||||
import ContextHandlerFactory from './Context/ContextHandlerFactory';
|
||||
|
||||
class ApplePayManager {
|
||||
#namespace = '';
|
||||
#buttonConfig = null;
|
||||
#ppcpConfig = null;
|
||||
#applePayConfig = null;
|
||||
#contextHandler = null;
|
||||
#transactionInfo = null;
|
||||
#buttons = [];
|
||||
|
||||
constructor( namespace, buttonConfig, ppcpConfig ) {
|
||||
this.namespace = namespace;
|
||||
this.buttonConfig = buttonConfig;
|
||||
this.ppcpConfig = ppcpConfig;
|
||||
this.ApplePayConfig = null;
|
||||
this.buttons = [];
|
||||
this.#namespace = namespace;
|
||||
this.#buttonConfig = buttonConfig;
|
||||
this.#ppcpConfig = ppcpConfig;
|
||||
|
||||
buttonModuleWatcher.watchContextBootstrap( ( bootstrap ) => {
|
||||
const button = new ApplePayButton(
|
||||
bootstrap.context,
|
||||
bootstrap.handler,
|
||||
buttonConfig,
|
||||
ppcpConfig
|
||||
);
|
||||
|
||||
this.buttons.push( button );
|
||||
|
||||
if ( this.ApplePayConfig ) {
|
||||
button.init( this.ApplePayConfig );
|
||||
}
|
||||
} );
|
||||
this.onContextBootstrap = this.onContextBootstrap.bind( this );
|
||||
buttonModuleWatcher.watchContextBootstrap( this.onContextBootstrap );
|
||||
}
|
||||
|
||||
init() {
|
||||
( async () => {
|
||||
await this.config();
|
||||
for ( const button of this.buttons ) {
|
||||
button.init( this.ApplePayConfig );
|
||||
}
|
||||
} )();
|
||||
async onContextBootstrap( bootstrap ) {
|
||||
this.#contextHandler = ContextHandlerFactory.create(
|
||||
bootstrap.context,
|
||||
this.#buttonConfig,
|
||||
this.#ppcpConfig,
|
||||
bootstrap.handler
|
||||
);
|
||||
|
||||
const button = ApplePayButton.createButton(
|
||||
bootstrap.context,
|
||||
bootstrap.handler,
|
||||
this.#buttonConfig,
|
||||
this.#ppcpConfig,
|
||||
this.#contextHandler
|
||||
);
|
||||
|
||||
this.#buttons.push( button );
|
||||
|
||||
// Ensure ApplePayConfig is loaded before proceeding.
|
||||
await this.init();
|
||||
|
||||
button.configure( this.#applePayConfig, this.#transactionInfo );
|
||||
button.init();
|
||||
}
|
||||
|
||||
reinit() {
|
||||
for ( const button of this.buttons ) {
|
||||
button.reinit();
|
||||
async init() {
|
||||
try {
|
||||
if ( ! this.#applePayConfig ) {
|
||||
this.#applePayConfig = await window[ this.#namespace ]
|
||||
.Applepay()
|
||||
.config();
|
||||
|
||||
if ( ! this.#applePayConfig ) {
|
||||
console.error( 'No ApplePayConfig received during init' );
|
||||
}
|
||||
}
|
||||
|
||||
if ( ! this.#transactionInfo ) {
|
||||
this.#transactionInfo = await this.fetchTransactionInfo();
|
||||
|
||||
if ( ! this.#applePayConfig ) {
|
||||
console.error( 'No transactionInfo found during init' );
|
||||
}
|
||||
}
|
||||
} catch ( error ) {
|
||||
console.error( 'Error during initialization:', error );
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Gets Apple Pay configuration of the PayPal merchant.
|
||||
*/
|
||||
async config() {
|
||||
this.ApplePayConfig = await window[ this.namespace ]
|
||||
.Applepay()
|
||||
.config();
|
||||
async fetchTransactionInfo() {
|
||||
try {
|
||||
if ( ! this.#contextHandler ) {
|
||||
throw new Error( 'ContextHandler is not initialized' );
|
||||
}
|
||||
return await this.#contextHandler.transactionInfo();
|
||||
} catch ( error ) {
|
||||
console.error( 'Error fetching transaction info:', error );
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
return this.ApplePayConfig;
|
||||
reinit() {
|
||||
for ( const button of this.#buttons ) {
|
||||
button.reinit();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -1,37 +1,15 @@
|
|||
import ApplePayButton from './ApplepayButton';
|
||||
import ApplepayButton from './Block/components/ApplePayButton';
|
||||
|
||||
class ApplePayManagerBlockEditor {
|
||||
constructor( namespace, buttonConfig, ppcpConfig ) {
|
||||
this.namespace = namespace;
|
||||
this.buttonConfig = buttonConfig;
|
||||
this.ppcpConfig = ppcpConfig;
|
||||
|
||||
/*
|
||||
* On the front-end, the init method is called when a new button context was detected
|
||||
* via `buttonModuleWatcher`. In the block editor, we do not need to wait for the
|
||||
* context, but can initialize the button in the next event loop.
|
||||
*/
|
||||
setTimeout( () => this.init() );
|
||||
}
|
||||
|
||||
async init() {
|
||||
try {
|
||||
this.applePayConfig = await window[ this.namespace ]
|
||||
.Applepay()
|
||||
.config();
|
||||
|
||||
const button = new ApplePayButton(
|
||||
this.ppcpConfig.context,
|
||||
null,
|
||||
this.buttonConfig,
|
||||
this.ppcpConfig
|
||||
);
|
||||
|
||||
button.init( this.applePayConfig );
|
||||
} catch ( error ) {
|
||||
console.error( 'Failed to initialize Apple Pay:', error );
|
||||
}
|
||||
}
|
||||
}
|
||||
const ApplePayManagerBlockEditor = ( {
|
||||
namespace,
|
||||
buttonConfig,
|
||||
ppcpConfig,
|
||||
} ) => (
|
||||
<ApplepayButton
|
||||
namespace={ namespace }
|
||||
buttonConfig={ buttonConfig }
|
||||
ppcpConfig={ ppcpConfig }
|
||||
/>
|
||||
);
|
||||
|
||||
export default ApplePayManagerBlockEditor;
|
||||
|
|
|
@ -0,0 +1,51 @@
|
|||
import { useState, useEffect } from '@wordpress/element';
|
||||
import useApiToGenerateButton from '../hooks/useApiToGenerateButton';
|
||||
import usePayPalScript from '../hooks/usePayPalScript';
|
||||
import useApplepayScript from '../hooks/useApplepayScript';
|
||||
import useApplepayConfig from '../hooks/useApplepayConfig';
|
||||
|
||||
const ApplepayButton = ( { namespace, buttonConfig, ppcpConfig } ) => {
|
||||
const [ buttonHtml, setButtonHtml ] = useState( '' );
|
||||
const [ buttonElement, setButtonElement ] = useState( null );
|
||||
const [ componentFrame, setComponentFrame ] = useState( null );
|
||||
const isPayPalLoaded = usePayPalScript( namespace, ppcpConfig );
|
||||
|
||||
const isApplepayLoaded = useApplepayScript(
|
||||
componentFrame,
|
||||
buttonConfig,
|
||||
isPayPalLoaded
|
||||
);
|
||||
|
||||
const applepayConfig = useApplepayConfig( namespace, isApplepayLoaded );
|
||||
|
||||
useEffect( () => {
|
||||
if ( ! buttonElement ) {
|
||||
return;
|
||||
}
|
||||
|
||||
setComponentFrame( buttonElement.ownerDocument );
|
||||
}, [ buttonElement ] );
|
||||
|
||||
const applepayButton = useApiToGenerateButton(
|
||||
componentFrame,
|
||||
namespace,
|
||||
buttonConfig,
|
||||
ppcpConfig,
|
||||
applepayConfig
|
||||
);
|
||||
|
||||
useEffect( () => {
|
||||
if ( applepayButton ) {
|
||||
setButtonHtml( applepayButton.outerHTML );
|
||||
}
|
||||
}, [ applepayButton ] );
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={ setButtonElement }
|
||||
dangerouslySetInnerHTML={ { __html: buttonHtml } }
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default ApplepayButton;
|
|
@ -0,0 +1,37 @@
|
|||
import { useEffect, useState } from '@wordpress/element';
|
||||
import useButtonStyles from './useButtonStyles';
|
||||
|
||||
const useApiToGenerateButton = (
|
||||
componentDocument,
|
||||
namespace,
|
||||
buttonConfig,
|
||||
ppcpConfig,
|
||||
applepayConfig
|
||||
) => {
|
||||
const [ applepayButton, setApplepayButton ] = useState( null );
|
||||
const buttonStyles = useButtonStyles( buttonConfig, ppcpConfig );
|
||||
|
||||
useEffect( () => {
|
||||
if ( ! buttonConfig || ! applepayConfig ) {
|
||||
return;
|
||||
}
|
||||
|
||||
const button = document.createElement( 'apple-pay-button' );
|
||||
button.setAttribute(
|
||||
'buttonstyle',
|
||||
buttonConfig.buttonColor || 'black'
|
||||
);
|
||||
button.setAttribute( 'type', buttonConfig.buttonType || 'pay' );
|
||||
button.setAttribute( 'locale', buttonConfig.buttonLocale || 'en' );
|
||||
|
||||
setApplepayButton( button );
|
||||
|
||||
return () => {
|
||||
setApplepayButton( null );
|
||||
};
|
||||
}, [ namespace, buttonConfig, ppcpConfig, applepayConfig, buttonStyles ] );
|
||||
|
||||
return applepayButton;
|
||||
};
|
||||
|
||||
export default useApiToGenerateButton;
|
|
@ -0,0 +1,26 @@
|
|||
import { useState, useEffect } from '@wordpress/element';
|
||||
|
||||
const useApplepayConfig = ( namespace, isApplepayLoaded ) => {
|
||||
const [ applePayConfig, setApplePayConfig ] = useState( null );
|
||||
|
||||
useEffect( () => {
|
||||
const fetchConfig = async () => {
|
||||
if ( ! isApplepayLoaded ) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const config = await window[ namespace ].Applepay().config();
|
||||
setApplePayConfig( config );
|
||||
} catch ( error ) {
|
||||
console.error( 'Failed to fetch Apple Pay config:', error );
|
||||
}
|
||||
};
|
||||
|
||||
fetchConfig();
|
||||
}, [ namespace, isApplepayLoaded ] );
|
||||
|
||||
return applePayConfig;
|
||||
};
|
||||
|
||||
export default useApplepayConfig;
|
|
@ -0,0 +1,65 @@
|
|||
import { useState, useEffect } from '@wordpress/element';
|
||||
import { loadCustomScript } from '@paypal/paypal-js';
|
||||
|
||||
const useApplepayScript = (
|
||||
componentDocument,
|
||||
buttonConfig,
|
||||
isPayPalLoaded
|
||||
) => {
|
||||
const [ isApplepayLoaded, setIsApplepayLoaded ] = useState( false );
|
||||
|
||||
useEffect( () => {
|
||||
if ( ! componentDocument ) {
|
||||
return;
|
||||
}
|
||||
|
||||
const injectScriptToFrame = ( scriptSrc ) => {
|
||||
if ( document === componentDocument ) {
|
||||
return;
|
||||
}
|
||||
|
||||
const script = document.querySelector(
|
||||
`script[src^="${ scriptSrc }"]`
|
||||
);
|
||||
|
||||
if ( script ) {
|
||||
const newScript = componentDocument.createElement( 'script' );
|
||||
newScript.src = script.src;
|
||||
newScript.async = script.async;
|
||||
newScript.type = script.type;
|
||||
|
||||
componentDocument.head.appendChild( newScript );
|
||||
} else {
|
||||
console.error( 'Script not found in the document:', scriptSrc );
|
||||
}
|
||||
};
|
||||
|
||||
const loadApplepayScript = async () => {
|
||||
if ( ! isPayPalLoaded ) {
|
||||
return;
|
||||
}
|
||||
|
||||
if ( ! buttonConfig || ! buttonConfig.sdk_url ) {
|
||||
console.error( 'Invalid buttonConfig or missing sdk_url' );
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
await loadCustomScript( { url: buttonConfig.sdk_url } ).then(
|
||||
() => {
|
||||
injectScriptToFrame( buttonConfig.sdk_url );
|
||||
}
|
||||
);
|
||||
setIsApplepayLoaded( true );
|
||||
} catch ( error ) {
|
||||
console.error( 'Failed to load Applepay script:', error );
|
||||
}
|
||||
};
|
||||
|
||||
loadApplepayScript();
|
||||
}, [ componentDocument, buttonConfig, isPayPalLoaded ] );
|
||||
|
||||
return isApplepayLoaded;
|
||||
};
|
||||
|
||||
export default useApplepayScript;
|
|
@ -0,0 +1,19 @@
|
|||
import { useMemo } from '@wordpress/element';
|
||||
import { combineStyles } from '../../../../../ppcp-button/resources/js/modules/Helper/PaymentButtonHelpers';
|
||||
|
||||
const useButtonStyles = ( buttonConfig, ppcpConfig ) => {
|
||||
return useMemo( () => {
|
||||
const styles = combineStyles(
|
||||
ppcpConfig?.button || {},
|
||||
buttonConfig?.button || {}
|
||||
);
|
||||
|
||||
if ( styles.MiniCart && styles.MiniCart.type === 'buy' ) {
|
||||
styles.MiniCart.type = 'pay';
|
||||
}
|
||||
|
||||
return styles;
|
||||
}, [ buttonConfig, ppcpConfig ] );
|
||||
};
|
||||
|
||||
export default useButtonStyles;
|
|
@ -0,0 +1,25 @@
|
|||
import { useState, useEffect } from '@wordpress/element';
|
||||
import { loadPayPalScript } from '../../../../../ppcp-button/resources/js/modules/Helper/PayPalScriptLoading';
|
||||
|
||||
const usePayPalScript = ( namespace, ppcpConfig ) => {
|
||||
const [ isPayPalLoaded, setIsPayPalLoaded ] = useState( false );
|
||||
|
||||
ppcpConfig.url_params.components += ',applepay';
|
||||
|
||||
useEffect( () => {
|
||||
const loadScript = async () => {
|
||||
try {
|
||||
await loadPayPalScript( namespace, ppcpConfig );
|
||||
setIsPayPalLoaded( true );
|
||||
} catch ( error ) {
|
||||
console.error( `Error loading PayPal script: ${ error }` );
|
||||
}
|
||||
};
|
||||
|
||||
loadScript();
|
||||
}, [ namespace, ppcpConfig ] );
|
||||
|
||||
return isPayPalLoaded;
|
||||
};
|
||||
|
||||
export default usePayPalScript;
|
|
@ -5,6 +5,11 @@ import PreviewButton from '../../../../ppcp-button/resources/js/modules/Preview/
|
|||
* A single Apple Pay preview button instance.
|
||||
*/
|
||||
export default class ApplePayPreviewButton extends PreviewButton {
|
||||
/**
|
||||
* @type {?PaymentButton}
|
||||
*/
|
||||
#button = null;
|
||||
|
||||
constructor( args ) {
|
||||
super( args );
|
||||
|
||||
|
@ -19,14 +24,18 @@ export default class ApplePayPreviewButton extends PreviewButton {
|
|||
}
|
||||
|
||||
createButton( buttonConfig ) {
|
||||
const button = new ApplepayButton(
|
||||
'preview',
|
||||
null,
|
||||
buttonConfig,
|
||||
this.ppcpConfig
|
||||
);
|
||||
if ( ! this.#button ) {
|
||||
this.#button = new ApplepayButton(
|
||||
'preview',
|
||||
null,
|
||||
buttonConfig,
|
||||
this.ppcpConfig
|
||||
);
|
||||
}
|
||||
|
||||
button.init( this.apiConfig );
|
||||
this.#button.configure( this.apiConfig, null );
|
||||
this.#button.applyButtonStyles( buttonConfig, this.ppcpConfig );
|
||||
this.#button.reinit();
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
@ -1,5 +1,6 @@
|
|||
import { useEffect, useState } from '@wordpress/element';
|
||||
import { useEffect, useRef, useState } from '@wordpress/element';
|
||||
import { registerExpressPaymentMethod } from '@woocommerce/blocks-registry';
|
||||
import { __ } from '@wordpress/i18n';
|
||||
import { loadPayPalScript } from '../../../ppcp-button/resources/js/modules/Helper/PayPalScriptLoading';
|
||||
import { cartHasSubscriptionProducts } from '../../../ppcp-blocks/resources/js/Helper/Subscription';
|
||||
import { loadCustomScript } from '@paypal/paypal-js';
|
||||
|
@ -18,20 +19,16 @@ if ( typeof window.PayPalCommerceGateway === 'undefined' ) {
|
|||
window.PayPalCommerceGateway = ppcpConfig;
|
||||
}
|
||||
|
||||
const ApplePayComponent = ( props ) => {
|
||||
const [ bootstrapped, setBootstrapped ] = useState( false );
|
||||
const ApplePayComponent = ( { isEditing } ) => {
|
||||
const [ paypalLoaded, setPaypalLoaded ] = useState( false );
|
||||
const [ applePayLoaded, setApplePayLoaded ] = useState( false );
|
||||
|
||||
const bootstrap = function () {
|
||||
const ManagerClass = props.isEditing
|
||||
? ApplePayManagerBlockEditor
|
||||
: ApplePayManager;
|
||||
const manager = new ManagerClass( namespace, buttonConfig, ppcpConfig );
|
||||
manager.init();
|
||||
};
|
||||
const wrapperRef = useRef( null );
|
||||
|
||||
useEffect( () => {
|
||||
if ( isEditing ) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Load ApplePay SDK
|
||||
loadCustomScript( { url: buttonConfig.sdk_url } ).then( () => {
|
||||
setApplePayLoaded( true );
|
||||
|
@ -47,17 +44,35 @@ const ApplePayComponent = ( props ) => {
|
|||
.catch( ( error ) => {
|
||||
console.error( 'Failed to load PayPal script: ', error );
|
||||
} );
|
||||
}, [] );
|
||||
}, [ isEditing ] );
|
||||
|
||||
useEffect( () => {
|
||||
if ( ! bootstrapped && paypalLoaded && applePayLoaded ) {
|
||||
setBootstrapped( true );
|
||||
bootstrap();
|
||||
if ( isEditing || ! paypalLoaded || ! applePayLoaded ) {
|
||||
return;
|
||||
}
|
||||
}, [ paypalLoaded, applePayLoaded ] );
|
||||
|
||||
const ManagerClass = isEditing
|
||||
? ApplePayManagerBlockEditor
|
||||
: ApplePayManager;
|
||||
|
||||
buttonConfig.reactWrapper = wrapperRef.current;
|
||||
|
||||
new ManagerClass( namespace, buttonConfig, ppcpConfig );
|
||||
}, [ paypalLoaded, applePayLoaded, isEditing ] );
|
||||
|
||||
if ( isEditing ) {
|
||||
return (
|
||||
<ApplePayManagerBlockEditor
|
||||
namespace={ namespace }
|
||||
buttonConfig={ buttonConfig }
|
||||
ppcpConfig={ ppcpConfig }
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={ wrapperRef }
|
||||
id={ buttonConfig.button.wrapper.replace( '#', '' ) }
|
||||
className="ppcp-button-apm ppcp-button-applepay"
|
||||
></div>
|
||||
|
@ -75,6 +90,11 @@ if (
|
|||
|
||||
registerExpressPaymentMethod( {
|
||||
name: buttonData.id,
|
||||
title: `PayPal - ${ buttonData.title }`,
|
||||
description: __(
|
||||
'Eligible users will see the PayPal button.',
|
||||
'woocommerce-paypal-payments'
|
||||
),
|
||||
label: <div dangerouslySetInnerHTML={ { __html: buttonData.title } } />,
|
||||
content: <ApplePayComponent isEditing={ false } />,
|
||||
edit: <ApplePayComponent isEditing={ true } />,
|
||||
|
|
|
@ -3,33 +3,49 @@ import { loadPayPalScript } from '../../../ppcp-button/resources/js/modules/Help
|
|||
import ApplePayManager from './ApplepayManager';
|
||||
import { setupButtonEvents } from '../../../ppcp-button/resources/js/modules/Helper/ButtonRefreshHelper';
|
||||
|
||||
( function ( { buttonConfig, ppcpConfig, jQuery } ) {
|
||||
( function ( { buttonConfig, ppcpConfig } ) {
|
||||
const namespace = 'ppcpPaypalApplepay';
|
||||
let manager;
|
||||
|
||||
const bootstrap = function () {
|
||||
manager = new ApplePayManager( namespace, buttonConfig, ppcpConfig );
|
||||
manager.init();
|
||||
};
|
||||
|
||||
setupButtonEvents( function () {
|
||||
if ( manager ) {
|
||||
manager.reinit();
|
||||
}
|
||||
} );
|
||||
|
||||
document.addEventListener( 'DOMContentLoaded', () => {
|
||||
if (
|
||||
typeof buttonConfig === 'undefined' ||
|
||||
typeof ppcpConfig === 'undefined'
|
||||
) {
|
||||
function bootstrapPayButton() {
|
||||
if ( ! buttonConfig || ! ppcpConfig ) {
|
||||
return;
|
||||
}
|
||||
const isMiniCart = ppcpConfig.mini_cart_buttons_enabled;
|
||||
const isButton = jQuery( '#' + buttonConfig.button.wrapper ).length > 0;
|
||||
|
||||
const manager = new ApplePayManager(
|
||||
namespace,
|
||||
buttonConfig,
|
||||
ppcpConfig
|
||||
);
|
||||
|
||||
setupButtonEvents( function () {
|
||||
manager.reinit();
|
||||
} );
|
||||
}
|
||||
|
||||
function bootstrap() {
|
||||
bootstrapPayButton();
|
||||
// Other Apple Pay bootstrapping could happen here.
|
||||
}
|
||||
|
||||
document.addEventListener( 'DOMContentLoaded', () => {
|
||||
if ( ! buttonConfig || ! ppcpConfig ) {
|
||||
/*
|
||||
* No PayPal buttons present on this page, but maybe a bootstrap module needs to be
|
||||
* initialized. Skip loading the SDK or gateway configuration, and directly initialize
|
||||
* the module.
|
||||
*/
|
||||
bootstrap();
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
const usedInMiniCart = ppcpConfig.mini_cart_buttons_enabled;
|
||||
const pageHasButton =
|
||||
null !== document.getElementById( buttonConfig.button.wrapper );
|
||||
|
||||
// If button wrapper is not present then there is no need to load the scripts.
|
||||
// minicart loads later?
|
||||
if ( ! isMiniCart && ! isButton ) {
|
||||
if ( ! usedInMiniCart && ! pageHasButton ) {
|
||||
return;
|
||||
}
|
||||
|
||||
|
@ -63,5 +79,4 @@ import { setupButtonEvents } from '../../../ppcp-button/resources/js/modules/Hel
|
|||
} )( {
|
||||
buttonConfig: window.wc_ppcp_applepay,
|
||||
ppcpConfig: window.PayPalCommerceGateway,
|
||||
jQuery: window.jQuery,
|
||||
} );
|
||||
|
|
|
@ -191,6 +191,7 @@ return array(
|
|||
'FR', // France
|
||||
'DE', // Germany
|
||||
'GR', // Greece
|
||||
'HK', // Hong Kong
|
||||
'HU', // Hungary
|
||||
'IE', // Ireland
|
||||
'IT', // Italy
|
||||
|
@ -204,6 +205,7 @@ return array(
|
|||
'PL', // Poland
|
||||
'PT', // Portugal
|
||||
'RO', // Romania
|
||||
'SG', // Singapore
|
||||
'SK', // Slovakia
|
||||
'SI', // Slovenia
|
||||
'ES', // Spain
|
||||
|
|
|
@ -105,6 +105,11 @@ class ApplePayGateway extends WC_Payment_Gateway {
|
|||
) {
|
||||
$this->id = self::ID;
|
||||
|
||||
$this->supports = array(
|
||||
'refunds',
|
||||
'products',
|
||||
);
|
||||
|
||||
$this->method_title = __( 'Apple Pay (via PayPal) ', 'woocommerce-paypal-payments' );
|
||||
$this->method_description = __( 'Display Apple Pay as a standalone payment option instead of bundling it with PayPal.', 'woocommerce-paypal-payments' );
|
||||
|
||||
|
|
|
@ -168,6 +168,20 @@ class ApplepayModule implements ServiceModule, ExtendingModule, ExecutableModule
|
|||
}
|
||||
);
|
||||
|
||||
add_filter(
|
||||
'woocommerce_paypal_payments_selected_button_locations',
|
||||
function( array $locations, string $setting_name ): array {
|
||||
$gateway = WC()->payment_gateways()->payment_gateways()[ ApplePayGateway::ID ] ?? '';
|
||||
if ( $gateway && $gateway->enabled === 'yes' && $setting_name === 'smart_button_locations' ) {
|
||||
$locations[] = 'checkout';
|
||||
}
|
||||
|
||||
return $locations;
|
||||
},
|
||||
10,
|
||||
2
|
||||
);
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
|
|
|
@ -1008,7 +1008,7 @@ class ApplePayButton implements ButtonInterface {
|
|||
*/
|
||||
protected function hide_gateway_until_eligible(): void {
|
||||
?>
|
||||
<style id="ppcp-hide-apple-pay">.wc_payment_method.payment_method_ppcp-applepay{display:none}</style>
|
||||
<style data-hide-gateway="ppcp-applepay">.wc_payment_method.payment_method_ppcp-applepay{display:none}</style>
|
||||
<?php
|
||||
}
|
||||
|
||||
|
|
|
@ -12,22 +12,22 @@
|
|||
"dependencies": {
|
||||
"@paypal/paypal-js": "^8.1.1",
|
||||
"@paypal/react-paypal-js": "^8.5.0",
|
||||
"core-js": "^3.25.0",
|
||||
"react": "^17.0.0",
|
||||
"react-dom": "^17.0.0"
|
||||
"core-js": "^3.39",
|
||||
"react": "^18",
|
||||
"react-dom": "^18"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.19",
|
||||
"@babel/preset-env": "^7.19",
|
||||
"@babel/preset-react": "^7.18.6",
|
||||
"@babel/core": "^7.26",
|
||||
"@babel/preset-env": "^7.26",
|
||||
"@babel/preset-react": "^7.25",
|
||||
"@woocommerce/dependency-extraction-webpack-plugin": "2.2.0",
|
||||
"babel-loader": "^8.2",
|
||||
"babel-loader": "^9.2",
|
||||
"cross-env": "^7.0.3",
|
||||
"file-loader": "^6.2.0",
|
||||
"sass": "^1.42.1",
|
||||
"sass-loader": "^12.1.0",
|
||||
"webpack": "^5.76",
|
||||
"webpack-cli": "^4.10"
|
||||
"sass": "^1.80",
|
||||
"sass-loader": "^16",
|
||||
"webpack": "^5.96",
|
||||
"webpack-cli": "^5"
|
||||
},
|
||||
"scripts": {
|
||||
"build": "cross-env BABEL_ENV=default NODE_ENV=production webpack",
|
||||
|
|
|
@ -11,20 +11,20 @@
|
|||
],
|
||||
"dependencies": {
|
||||
"@paypal/paypal-js": "^6.0.0",
|
||||
"core-js": "^3.25.0"
|
||||
"core-js": "^3.39"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.19",
|
||||
"@babel/preset-env": "^7.19",
|
||||
"@babel/preset-react": "^7.18.6",
|
||||
"@woocommerce/dependency-extraction-webpack-plugin": "^2.2.0",
|
||||
"babel-loader": "^8.2",
|
||||
"@babel/core": "^7.26",
|
||||
"@babel/preset-env": "^7.26",
|
||||
"@babel/preset-react": "^7.25",
|
||||
"@woocommerce/dependency-extraction-webpack-plugin": "2.2.0",
|
||||
"babel-loader": "^9.2",
|
||||
"cross-env": "^7.0.3",
|
||||
"file-loader": "^6.2.0",
|
||||
"sass": "^1.42.1",
|
||||
"sass-loader": "^12.1.0",
|
||||
"webpack": "^5.76",
|
||||
"webpack-cli": "^4.10"
|
||||
"sass": "^1.80",
|
||||
"sass-loader": "^16",
|
||||
"webpack": "^5.96",
|
||||
"webpack-cli": "^5"
|
||||
},
|
||||
"scripts": {
|
||||
"build": "cross-env BABEL_ENV=default NODE_ENV=production webpack",
|
||||
|
|
|
@ -11,23 +11,23 @@
|
|||
],
|
||||
"dependencies": {
|
||||
"@paypal/react-paypal-js": "^8.5.0",
|
||||
"core-js": "^3.25.0",
|
||||
"react": "^17.0.0",
|
||||
"react-dom": "^17.0.0"
|
||||
"core-js": "^3.39",
|
||||
"react": "^18",
|
||||
"react-dom": "^18"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.19",
|
||||
"@babel/preset-env": "^7.19",
|
||||
"@babel/preset-react": "^7.18.6",
|
||||
"@wordpress/i18n": "^5.6.0",
|
||||
"@babel/core": "^7.26",
|
||||
"@babel/preset-env": "^7.26",
|
||||
"@babel/preset-react": "^7.25",
|
||||
"@wordpress/i18n": "^5.11",
|
||||
"@woocommerce/dependency-extraction-webpack-plugin": "2.2.0",
|
||||
"babel-loader": "^8.2",
|
||||
"babel-loader": "^9.2",
|
||||
"cross-env": "^7.0.3",
|
||||
"file-loader": "^6.2.0",
|
||||
"sass": "^1.42.1",
|
||||
"sass-loader": "^12.1.0",
|
||||
"webpack": "^5.76",
|
||||
"webpack-cli": "^4.10"
|
||||
"sass": "^1.80",
|
||||
"sass-loader": "^16",
|
||||
"webpack": "^5.96",
|
||||
"webpack-cli": "^5"
|
||||
},
|
||||
"scripts": {
|
||||
"build": "cross-env BABEL_ENV=default NODE_ENV=production webpack",
|
||||
|
|
|
@ -12,20 +12,20 @@
|
|||
],
|
||||
"dependencies": {
|
||||
"@paypal/paypal-js": "^6.0.0",
|
||||
"core-js": "^3.25.0",
|
||||
"deepmerge": "^4.2.2",
|
||||
"core-js": "^3.39",
|
||||
"deepmerge": "^4.3",
|
||||
"formdata-polyfill": "^4.0.10"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.19",
|
||||
"@babel/preset-env": "^7.19",
|
||||
"babel-loader": "^8.2",
|
||||
"@babel/core": "^7.26",
|
||||
"@babel/preset-env": "^7.26",
|
||||
"babel-loader": "^9.2",
|
||||
"cross-env": "^7.0.3",
|
||||
"file-loader": "^6.2.0",
|
||||
"sass": "^1.42.1",
|
||||
"sass-loader": "^12.1.0",
|
||||
"webpack": "^5.76",
|
||||
"webpack-cli": "^4.10"
|
||||
"sass": "^1.80",
|
||||
"sass-loader": "^16",
|
||||
"webpack": "^5.96",
|
||||
"webpack-cli": "^5"
|
||||
},
|
||||
"scripts": {
|
||||
"build": "cross-env BABEL_ENV=default NODE_ENV=production webpack",
|
||||
|
|
|
@ -10,6 +10,8 @@ import {
|
|||
dispatchButtonEvent,
|
||||
observeButtonEvent,
|
||||
} from '../Helper/PaymentButtonHelpers';
|
||||
import { isVisible } from '../Helper/Hiding';
|
||||
import { isDisabled, setEnabled } from '../Helper/ButtonDisabler';
|
||||
|
||||
/**
|
||||
* Collection of all available styling options for this button.
|
||||
|
@ -189,6 +191,13 @@ export default class PaymentButton {
|
|||
*/
|
||||
#isVisible = true;
|
||||
|
||||
/**
|
||||
* Whether this button is enabled (can be clicked).
|
||||
*
|
||||
* @type {boolean}
|
||||
*/
|
||||
#isEnabled = true;
|
||||
|
||||
/**
|
||||
* The currently visible payment button.
|
||||
*
|
||||
|
@ -197,6 +206,13 @@ export default class PaymentButton {
|
|||
*/
|
||||
#button = null;
|
||||
|
||||
/**
|
||||
* List of checks to perform to verify the PaymentButton has is configured correctly.
|
||||
*
|
||||
* @type {{check, errorMessage, shouldPass}[]}
|
||||
*/
|
||||
#validationChecks = [];
|
||||
|
||||
/**
|
||||
* Factory method to create a new PaymentButton while limiting a single instance per context.
|
||||
*
|
||||
|
@ -316,6 +332,11 @@ export default class PaymentButton {
|
|||
);
|
||||
this.applyButtonStyles( this.#buttonConfig );
|
||||
|
||||
this.registerValidationRules(
|
||||
this.#assertIsInvalid.bind( this ),
|
||||
this.#assertIsValid.bind( this )
|
||||
);
|
||||
|
||||
apmButtonsInit( this.#ppcpConfig );
|
||||
this.initEventListeners();
|
||||
}
|
||||
|
@ -570,6 +591,29 @@ export default class PaymentButton {
|
|||
this.triggerRedraw();
|
||||
}
|
||||
|
||||
/**
|
||||
* The enabled/disabled state of the button (whether it can be clicked).
|
||||
*
|
||||
* @return {boolean} True indicates, that the button is enabled.
|
||||
*/
|
||||
get isEnabled() {
|
||||
return this.#isEnabled;
|
||||
}
|
||||
|
||||
/**
|
||||
* Change the enabled/disabled state of the button.
|
||||
*
|
||||
* @param {boolean} newState Whether the button is enabled.
|
||||
*/
|
||||
set isEnabled( newState ) {
|
||||
if ( this.#isEnabled === newState ) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.#isEnabled = newState;
|
||||
this.triggerRedraw();
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns the HTML element that wraps the current button
|
||||
*
|
||||
|
@ -580,6 +624,23 @@ export default class PaymentButton {
|
|||
return document.getElementById( this.wrapperId );
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns the standard PayPal smart button selector for the current context.
|
||||
*
|
||||
* @return {string | null} The selector, or null if not available.
|
||||
*/
|
||||
get ppcpButtonWrapperSelector() {
|
||||
if ( PaymentContext.Blocks.includes( this.context ) ) {
|
||||
return null;
|
||||
}
|
||||
|
||||
if ( this.context === PaymentContext.MiniCart ) {
|
||||
return this.ppcpConfig?.button?.mini_cart_wrapper;
|
||||
}
|
||||
|
||||
return this.ppcpConfig?.button?.wrapper;
|
||||
}
|
||||
|
||||
/**
|
||||
* Checks whether the main button-wrapper is present in the current DOM.
|
||||
*
|
||||
|
@ -645,16 +706,75 @@ export default class PaymentButton {
|
|||
this.#logger.group( label );
|
||||
}
|
||||
|
||||
/**
|
||||
* Register a validation check that marks the configuration as invalid when passed.
|
||||
*
|
||||
* @param {Function} check - A function that returns a truthy value if the check passes.
|
||||
* @param {string} errorMessage - The error message to display if the check fails.
|
||||
*/
|
||||
#assertIsInvalid( check, errorMessage ) {
|
||||
this.#validationChecks.push( {
|
||||
check,
|
||||
errorMessage,
|
||||
shouldPass: false,
|
||||
} );
|
||||
}
|
||||
|
||||
/**
|
||||
* Register a validation check that instantly marks the configuration as valid when passed.
|
||||
*
|
||||
* @param {Function} check - A function that returns a truthy value if the check passes.
|
||||
*/
|
||||
#assertIsValid( check ) {
|
||||
this.#validationChecks.push( { check, shouldPass: true } );
|
||||
}
|
||||
|
||||
/**
|
||||
* Defines a series of validation steps to ensure the payment button is configured correctly.
|
||||
*
|
||||
* Each validation step is executed in the order they are defined within this method.
|
||||
*
|
||||
* If a validation step using `invalidIf` returns true, the configuration is immediately considered
|
||||
* invalid, and an error message is logged. Conversely, if a validation step using `validIf`
|
||||
* returns true, the configuration is immediately considered valid.
|
||||
*
|
||||
* If no validation step returns true, the configuration is assumed to be valid by default.
|
||||
*
|
||||
* @param {(condition: () => boolean, errorMessage: string) => void} invalidIf - Registers a validation step that fails if the condition returns true.
|
||||
* @param {(condition: () => boolean) => void} validIf - Registers a validation step that passes if the condition returns true.
|
||||
*/
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
registerValidationRules( invalidIf, validIf ) {}
|
||||
|
||||
/**
|
||||
* Determines if the current button instance has valid and complete configuration details.
|
||||
* Used during initialization to decide if the button can be initialized or should be skipped.
|
||||
*
|
||||
* Can be implemented by the derived class.
|
||||
* All required validation steps must be registered in the constructor of the derived class
|
||||
* using `this.addValidationFailure()` or `this.addValidationSuccess()`.
|
||||
*
|
||||
* @param {boolean} [silent=false] - Set to true to suppress console errors.
|
||||
* @return {boolean} True indicates the config is valid and initialization can continue.
|
||||
*/
|
||||
validateConfiguration( silent = false ) {
|
||||
for ( const step of this.#validationChecks ) {
|
||||
const result = step.check();
|
||||
|
||||
if ( step.shouldPass && result ) {
|
||||
// If a success check passes, mark as valid immediately.
|
||||
return true;
|
||||
}
|
||||
|
||||
if ( ! step.shouldPass && result ) {
|
||||
// If a failure check passes, mark as invalid.
|
||||
if ( ! silent && step.errorMessage ) {
|
||||
this.error( step.errorMessage );
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
|
@ -708,7 +828,23 @@ export default class PaymentButton {
|
|||
}
|
||||
|
||||
/**
|
||||
* Attaches event listeners to show or hide the payment button when needed.
|
||||
* Applies the visibility and enabled state from the PayPal button.
|
||||
* Intended for the product page, may not work correctly on the checkout page.
|
||||
*/
|
||||
syncProductButtonsState() {
|
||||
const ppcpButton = document.querySelector(
|
||||
this.ppcpButtonWrapperSelector
|
||||
);
|
||||
if ( ! ppcpButton ) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.isVisible = isVisible( ppcpButton );
|
||||
this.isEnabled = ! isDisabled( ppcpButton );
|
||||
}
|
||||
|
||||
/**
|
||||
* Attaches event listeners to show/hide or enable/disable the payment button when needed.
|
||||
*/
|
||||
initEventListeners() {
|
||||
// Refresh the button - this might show, hide or re-create the payment button.
|
||||
|
@ -737,6 +873,24 @@ export default class PaymentButton {
|
|||
callback: () => ( this.isVisible = true ),
|
||||
} );
|
||||
}
|
||||
|
||||
// On the product page, copy the visibility and enabled state from the PayPal button.
|
||||
if ( this.context === PaymentContext.Product ) {
|
||||
jQuery( document ).on(
|
||||
'ppcp-shown ppcp-hidden ppcp-enabled ppcp-disabled',
|
||||
( ev, data ) => {
|
||||
if (
|
||||
! jQuery( data.selector ).is(
|
||||
this.ppcpButtonWrapperSelector
|
||||
)
|
||||
) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.syncProductButtonsState();
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
|
@ -828,6 +982,12 @@ export default class PaymentButton {
|
|||
|
||||
// Apply the wrapper visibility.
|
||||
wrapper.style.display = this.isVisible ? 'block' : 'none';
|
||||
|
||||
// Apply the enabled/disabled state.
|
||||
// On the product page, use the form to display error messages if clicked while disabled.
|
||||
const form =
|
||||
this.context === PaymentContext.Product ? 'form.cart' : null;
|
||||
setEnabled( wrapper, this.isEnabled, form );
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
@ -10,18 +10,18 @@
|
|||
"Edge >= 14"
|
||||
],
|
||||
"dependencies": {
|
||||
"core-js": "^3.25.0"
|
||||
"core-js": "^3.39"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.19",
|
||||
"@babel/preset-env": "^7.19",
|
||||
"babel-loader": "^8.2",
|
||||
"@babel/core": "^7.26",
|
||||
"@babel/preset-env": "^7.26",
|
||||
"babel-loader": "^9.2",
|
||||
"cross-env": "^7.0.3",
|
||||
"file-loader": "^6.2.0",
|
||||
"sass": "^1.42.1",
|
||||
"sass-loader": "^12.1.0",
|
||||
"webpack": "^5.76",
|
||||
"webpack-cli": "^4.10"
|
||||
"sass": "^1.80",
|
||||
"sass-loader": "^16",
|
||||
"webpack": "^5.96",
|
||||
"webpack-cli": "^5"
|
||||
},
|
||||
"scripts": {
|
||||
"build": "cross-env BABEL_ENV=default NODE_ENV=production webpack",
|
||||
|
|
|
@ -43,6 +43,7 @@ return array(
|
|||
'FR',
|
||||
'DE',
|
||||
'GR',
|
||||
'HK',
|
||||
'HU',
|
||||
'IE',
|
||||
'IT',
|
||||
|
@ -55,6 +56,7 @@ return array(
|
|||
'PL',
|
||||
'PT',
|
||||
'RO',
|
||||
'SG',
|
||||
'SK',
|
||||
'SI',
|
||||
'ES',
|
||||
|
|
|
@ -11,18 +11,18 @@
|
|||
"Edge >= 14"
|
||||
],
|
||||
"dependencies": {
|
||||
"core-js": "^3.25.0"
|
||||
"core-js": "^3.39"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.19",
|
||||
"@babel/preset-env": "^7.19",
|
||||
"babel-loader": "^8.2",
|
||||
"@babel/core": "^7.26",
|
||||
"@babel/preset-env": "^7.26",
|
||||
"babel-loader": "^9.2",
|
||||
"cross-env": "^7.0.3",
|
||||
"file-loader": "^6.2.0",
|
||||
"sass": "^1.42.1",
|
||||
"sass-loader": "^12.1.0",
|
||||
"webpack": "^5.76",
|
||||
"webpack-cli": "^4.10"
|
||||
"sass": "^1.80",
|
||||
"sass-loader": "^16",
|
||||
"webpack": "^5.96",
|
||||
"webpack-cli": "^5"
|
||||
},
|
||||
"scripts": {
|
||||
"build": "cross-env BABEL_ENV=default NODE_ENV=production webpack",
|
||||
|
|
|
@ -11,21 +11,21 @@
|
|||
],
|
||||
"dependencies": {
|
||||
"@paypal/paypal-js": "^6.0.0",
|
||||
"core-js": "^3.25.0"
|
||||
"core-js": "^3.39"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.19",
|
||||
"@babel/preset-env": "^7.19",
|
||||
"@babel/preset-react": "^7.18.6",
|
||||
"@wordpress/i18n": "^5.6.0",
|
||||
"@woocommerce/dependency-extraction-webpack-plugin": "^2.2.0",
|
||||
"babel-loader": "^8.2",
|
||||
"@babel/core": "^7.26",
|
||||
"@babel/preset-env": "^7.26",
|
||||
"@babel/preset-react": "^7.25",
|
||||
"@wordpress/i18n": "^5.11",
|
||||
"@woocommerce/dependency-extraction-webpack-plugin": "2.2.0",
|
||||
"babel-loader": "^9.2",
|
||||
"cross-env": "^7.0.3",
|
||||
"file-loader": "^6.2.0",
|
||||
"sass": "^1.42.1",
|
||||
"sass-loader": "^12.1.0",
|
||||
"webpack": "^5.76",
|
||||
"webpack-cli": "^4.10"
|
||||
"sass": "^1.80",
|
||||
"sass-loader": "^16",
|
||||
"webpack": "^5.96",
|
||||
"webpack-cli": "^5"
|
||||
},
|
||||
"scripts": {
|
||||
"build": "cross-env BABEL_ENV=default NODE_ENV=production webpack",
|
||||
|
|
|
@ -249,59 +249,45 @@ class GooglepayButton extends PaymentButton {
|
|||
/**
|
||||
* @inheritDoc
|
||||
*/
|
||||
validateConfiguration( silent = false ) {
|
||||
const validEnvs = [ 'PRODUCTION', 'TEST' ];
|
||||
registerValidationRules( invalidIf, validIf ) {
|
||||
invalidIf(
|
||||
() =>
|
||||
! [ 'TEST', 'PRODUCTION' ].includes(
|
||||
this.buttonConfig.environment
|
||||
),
|
||||
`Invalid environment: ${ this.buttonConfig.environment }`
|
||||
);
|
||||
|
||||
const isInvalid = ( ...args ) => {
|
||||
if ( ! silent ) {
|
||||
this.error( ...args );
|
||||
}
|
||||
return false;
|
||||
};
|
||||
validIf( () => this.isPreview );
|
||||
|
||||
if ( ! validEnvs.includes( this.buttonConfig.environment ) ) {
|
||||
return isInvalid(
|
||||
'Invalid environment:',
|
||||
this.buttonConfig.environment
|
||||
);
|
||||
}
|
||||
invalidIf(
|
||||
() => ! this.googlePayConfig,
|
||||
'No API configuration - missing configure() call?'
|
||||
);
|
||||
|
||||
// Preview buttons only need a valid environment.
|
||||
if ( this.isPreview ) {
|
||||
return true;
|
||||
}
|
||||
invalidIf(
|
||||
() => ! this.transactionInfo,
|
||||
'No transactionInfo - missing configure() call?'
|
||||
);
|
||||
|
||||
if ( ! this.googlePayConfig ) {
|
||||
return isInvalid(
|
||||
'No API configuration - missing configure() call?'
|
||||
);
|
||||
}
|
||||
invalidIf(
|
||||
() => ! this.contextHandler?.validateContext(),
|
||||
`Invalid context handler.`
|
||||
);
|
||||
|
||||
if ( ! this.transactionInfo ) {
|
||||
return isInvalid(
|
||||
'No transactionInfo - missing configure() call?'
|
||||
);
|
||||
}
|
||||
invalidIf(
|
||||
() =>
|
||||
this.buttonAttributes?.height &&
|
||||
isNaN( parseInt( this.buttonAttributes.height ) ),
|
||||
'Invalid height in buttonAttributes'
|
||||
);
|
||||
|
||||
// Add buttonAttributes validation
|
||||
if ( this.buttonAttributes ) {
|
||||
if (
|
||||
this.buttonAttributes.height &&
|
||||
isNaN( parseInt( this.buttonAttributes.height ) )
|
||||
) {
|
||||
return isInvalid( 'Invalid height in buttonAttributes' );
|
||||
}
|
||||
if (
|
||||
this.buttonAttributes.borderRadius &&
|
||||
isNaN( parseInt( this.buttonAttributes.borderRadius ) )
|
||||
) {
|
||||
return isInvalid( 'Invalid borderRadius in buttonAttributes' );
|
||||
}
|
||||
}
|
||||
|
||||
if ( ! typeof this.contextHandler?.validateContext() ) {
|
||||
return isInvalid( 'Invalid context handler.', this.contextHandler );
|
||||
}
|
||||
invalidIf(
|
||||
() =>
|
||||
this.buttonAttributes?.borderRadius &&
|
||||
isNaN( parseInt( this.buttonAttributes.borderRadius ) ),
|
||||
'Invalid borderRadius in buttonAttributes'
|
||||
);
|
||||
|
||||
return true;
|
||||
}
|
||||
|
|
|
@ -106,6 +106,7 @@ return array(
|
|||
'FR', // France
|
||||
'DE', // Germany
|
||||
'GR', // Greece
|
||||
'HK', // Hong Kong
|
||||
'HU', // Hungary
|
||||
'IE', // Ireland
|
||||
'IT', // Italy
|
||||
|
@ -119,6 +120,7 @@ return array(
|
|||
'PL', // Poland
|
||||
'PT', // Portugal
|
||||
'RO', // Romania
|
||||
'SG', // Singapore
|
||||
'SK', // Slovakia
|
||||
'SI', // Slovenia
|
||||
'ES', // Spain
|
||||
|
|
|
@ -218,6 +218,20 @@ class GooglepayModule implements ServiceModule, ExtendingModule, ExecutableModul
|
|||
}
|
||||
);
|
||||
|
||||
add_filter(
|
||||
'woocommerce_paypal_payments_selected_button_locations',
|
||||
function( array $locations, string $setting_name ): array {
|
||||
$gateway = WC()->payment_gateways()->payment_gateways()[ GooglePayGateway::ID ] ?? '';
|
||||
if ( $gateway && $gateway->enabled === 'yes' && $setting_name === 'smart_button_locations' ) {
|
||||
$locations[] = 'checkout';
|
||||
}
|
||||
|
||||
return $locations;
|
||||
},
|
||||
10,
|
||||
2
|
||||
);
|
||||
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -10,20 +10,20 @@
|
|||
"Edge >= 14"
|
||||
],
|
||||
"dependencies": {
|
||||
"core-js": "^3.25.0"
|
||||
"core-js": "^3.39"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.19",
|
||||
"@babel/preset-env": "^7.19",
|
||||
"@babel/preset-react": "^7.18.6",
|
||||
"@babel/core": "^7.26",
|
||||
"@babel/preset-env": "^7.26",
|
||||
"@babel/preset-react": "^7.25",
|
||||
"@woocommerce/dependency-extraction-webpack-plugin": "2.2.0",
|
||||
"babel-loader": "^8.2",
|
||||
"babel-loader": "^9.2",
|
||||
"cross-env": "^7.0.3",
|
||||
"file-loader": "^6.2.0",
|
||||
"sass": "^1.42.1",
|
||||
"sass-loader": "^12.1.0",
|
||||
"webpack": "^5.76",
|
||||
"webpack-cli": "^4.10"
|
||||
"sass": "^1.80",
|
||||
"sass-loader": "^16",
|
||||
"webpack": "^5.96",
|
||||
"webpack-cli": "^5"
|
||||
},
|
||||
"scripts": {
|
||||
"build": "cross-env BABEL_ENV=default NODE_ENV=production webpack",
|
||||
|
|
|
@ -11,18 +11,18 @@
|
|||
"Edge >= 14"
|
||||
],
|
||||
"dependencies": {
|
||||
"core-js": "^3.25.0"
|
||||
"core-js": "^3.39"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.19",
|
||||
"@babel/preset-env": "^7.19",
|
||||
"babel-loader": "^8.2",
|
||||
"@babel/core": "^7.26",
|
||||
"@babel/preset-env": "^7.26",
|
||||
"babel-loader": "^9.2",
|
||||
"cross-env": "^7.0.3",
|
||||
"file-loader": "^6.2.0",
|
||||
"sass": "^1.42.1",
|
||||
"sass-loader": "^12.1.0",
|
||||
"webpack": "^5.76",
|
||||
"webpack-cli": "^4.10"
|
||||
"sass": "^1.80",
|
||||
"sass-loader": "^16",
|
||||
"webpack": "^5.96",
|
||||
"webpack-cli": "^5"
|
||||
},
|
||||
"scripts": {
|
||||
"build": "cross-env BABEL_ENV=default NODE_ENV=production webpack",
|
||||
|
|
|
@ -9,6 +9,7 @@ declare(strict_types=1);
|
|||
|
||||
namespace WooCommerce\PayPalCommerce\Onboarding;
|
||||
|
||||
use WooCommerce\PayPalCommerce\Onboarding\Render\OnboardingOptionsRenderer;
|
||||
use WooCommerce\PayPalCommerce\Vendor\Psr\Container\ContainerInterface;
|
||||
use WooCommerce\PayPalCommerce\ApiClient\Authentication\Bearer;
|
||||
use WooCommerce\PayPalCommerce\ApiClient\Authentication\ConnectBearer;
|
||||
|
@ -19,7 +20,7 @@ use WooCommerce\PayPalCommerce\ApiClient\Helper\Cache;
|
|||
use WooCommerce\PayPalCommerce\Onboarding\Assets\OnboardingAssets;
|
||||
use WooCommerce\PayPalCommerce\Onboarding\Endpoint\LoginSellerEndpoint;
|
||||
use WooCommerce\PayPalCommerce\Onboarding\Endpoint\UpdateSignupLinksEndpoint;
|
||||
use WooCommerce\PayPalCommerce\Onboarding\Render\OnboardingOptionsRenderer;
|
||||
use WooCommerce\PayPalCommerce\Onboarding\Render\OnboardingSendOnlyNoticeRenderer;
|
||||
use WooCommerce\PayPalCommerce\Onboarding\Render\OnboardingRenderer;
|
||||
use WooCommerce\PayPalCommerce\Onboarding\OnboardingRESTController;
|
||||
|
||||
|
@ -239,6 +240,11 @@ return array(
|
|||
'sandbox-express_checkout',
|
||||
);
|
||||
},
|
||||
'onboarding.render-send-only-notice' => static function( ContainerInterface $container ) {
|
||||
return new OnboardingSendOnlyNoticeRenderer(
|
||||
$container->get( 'wcgateway.send-only-message' )
|
||||
);
|
||||
},
|
||||
'onboarding.render' => static function ( ContainerInterface $container ) : OnboardingRenderer {
|
||||
$partner_referrals = $container->get( 'api.endpoint.partner-referrals-production' );
|
||||
$partner_referrals_sandbox = $container->get( 'api.endpoint.partner-referrals-sandbox' );
|
||||
|
|
|
@ -0,0 +1,41 @@
|
|||
<?php
|
||||
/**
|
||||
* Creates an admin message that notifies user about send only country while onboarding.
|
||||
*
|
||||
* @package WooCommerce\PayPalCommerce\Onboarding\Render
|
||||
*/
|
||||
|
||||
declare(strict_types=1);
|
||||
|
||||
namespace WooCommerce\PayPalCommerce\Onboarding\Render;
|
||||
|
||||
/**
|
||||
* Class OnboardingRenderer
|
||||
*/
|
||||
class OnboardingSendOnlyNoticeRenderer {
|
||||
|
||||
/**
|
||||
* The notice message.
|
||||
*
|
||||
* @var string
|
||||
*/
|
||||
protected string $message;
|
||||
|
||||
/**
|
||||
* AdminNotice constructor.
|
||||
*
|
||||
* @param string $message The notice message.
|
||||
*/
|
||||
public function __construct( string $message ) {
|
||||
$this->message = $message;
|
||||
}
|
||||
|
||||
/**
|
||||
* Renders the notice.
|
||||
*
|
||||
* @return string
|
||||
*/
|
||||
public function render(): string {
|
||||
return '<div class="notice notice-warning ppcp-notice-wrapper inline"><p>' . $this->message . '</p></div>';
|
||||
}
|
||||
}
|
|
@ -11,18 +11,18 @@
|
|||
"Edge >= 14"
|
||||
],
|
||||
"dependencies": {
|
||||
"core-js": "^3.25.0"
|
||||
"core-js": "^3.39"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.19",
|
||||
"@babel/preset-env": "^7.19",
|
||||
"babel-loader": "^8.2",
|
||||
"@babel/core": "^7.26",
|
||||
"@babel/preset-env": "^7.26",
|
||||
"babel-loader": "^9.2",
|
||||
"cross-env": "^7.0.3",
|
||||
"file-loader": "^6.2.0",
|
||||
"sass": "^1.42.1",
|
||||
"sass-loader": "^12.1.0",
|
||||
"webpack": "^5.76",
|
||||
"webpack-cli": "^4.10"
|
||||
"sass": "^1.80",
|
||||
"sass-loader": "^16",
|
||||
"webpack": "^5.96",
|
||||
"webpack-cli": "^5"
|
||||
},
|
||||
"scripts": {
|
||||
"build": "cross-env BABEL_ENV=default NODE_ENV=production webpack",
|
||||
|
|
|
@ -11,22 +11,22 @@
|
|||
],
|
||||
"dependencies": {
|
||||
"@paypal/react-paypal-js": "^8.2.0",
|
||||
"core-js": "^3.25.0",
|
||||
"react": "^17.0.0",
|
||||
"react-dom": "^17.0.0"
|
||||
"core-js": "^3.39",
|
||||
"react": "^18",
|
||||
"react-dom": "^18"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.19",
|
||||
"@babel/preset-env": "^7.19",
|
||||
"@babel/preset-react": "^7.18.6",
|
||||
"@babel/core": "^7.26",
|
||||
"@babel/preset-env": "^7.26",
|
||||
"@babel/preset-react": "^7.25",
|
||||
"@woocommerce/dependency-extraction-webpack-plugin": "2.2.0",
|
||||
"babel-loader": "^8.2",
|
||||
"babel-loader": "^9.2",
|
||||
"cross-env": "^7.0.3",
|
||||
"file-loader": "^6.2.0",
|
||||
"sass": "^1.42.1",
|
||||
"sass-loader": "^12.1.0",
|
||||
"webpack": "^5.76",
|
||||
"webpack-cli": "^4.10"
|
||||
"sass": "^1.80",
|
||||
"sass-loader": "^16",
|
||||
"webpack": "^5.96",
|
||||
"webpack-cli": "^5"
|
||||
},
|
||||
"scripts": {
|
||||
"build": "cross-env BABEL_ENV=default NODE_ENV=production webpack",
|
||||
|
|
|
@ -10,20 +10,20 @@
|
|||
"Edge >= 14"
|
||||
],
|
||||
"dependencies": {
|
||||
"core-js": "^3.25.0"
|
||||
"core-js": "^3.39"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.19",
|
||||
"@babel/preset-env": "^7.19",
|
||||
"@babel/preset-react": "^7.18.6",
|
||||
"@woocommerce/dependency-extraction-webpack-plugin": "^2.2.0",
|
||||
"babel-loader": "^8.2",
|
||||
"@babel/core": "^7.26",
|
||||
"@babel/preset-env": "^7.26",
|
||||
"@babel/preset-react": "^7.25",
|
||||
"@woocommerce/dependency-extraction-webpack-plugin": "2.2.0",
|
||||
"babel-loader": "^9.2",
|
||||
"cross-env": "^7.0.3",
|
||||
"file-loader": "^6.2.0",
|
||||
"sass": "^1.42.1",
|
||||
"sass-loader": "^12.1.0",
|
||||
"webpack": "^5.76",
|
||||
"webpack-cli": "^4.10"
|
||||
"sass": "^1.80",
|
||||
"sass-loader": "^16",
|
||||
"webpack": "^5.96",
|
||||
"webpack-cli": "^5"
|
||||
},
|
||||
"scripts": {
|
||||
"build": "cross-env BABEL_ENV=default NODE_ENV=production webpack",
|
||||
|
|
|
@ -11,22 +11,22 @@
|
|||
],
|
||||
"dependencies": {
|
||||
"@paypal/react-paypal-js": "^8.2.0",
|
||||
"core-js": "^3.25.0",
|
||||
"react": "^17.0.0",
|
||||
"react-dom": "^17.0.0"
|
||||
"core-js": "^3.39",
|
||||
"react": "^18",
|
||||
"react-dom": "^18"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.19",
|
||||
"@babel/preset-env": "^7.19",
|
||||
"@babel/preset-react": "^7.18.6",
|
||||
"@babel/core": "^7.26",
|
||||
"@babel/preset-env": "^7.26",
|
||||
"@babel/preset-react": "^7.25",
|
||||
"@woocommerce/dependency-extraction-webpack-plugin": "2.2.0",
|
||||
"babel-loader": "^8.2",
|
||||
"babel-loader": "^9.2",
|
||||
"cross-env": "^7.0.3",
|
||||
"file-loader": "^6.2.0",
|
||||
"sass": "^1.42.1",
|
||||
"sass-loader": "^12.1.0",
|
||||
"webpack": "^5.76",
|
||||
"webpack-cli": "^4.10"
|
||||
"sass": "^1.80",
|
||||
"sass-loader": "^16",
|
||||
"webpack": "^5.96",
|
||||
"webpack-cli": "^5"
|
||||
},
|
||||
"scripts": {
|
||||
"build": "cross-env BABEL_ENV=default NODE_ENV=production webpack",
|
||||
|
|
|
@ -10,18 +10,18 @@
|
|||
"Edge >= 14"
|
||||
],
|
||||
"dependencies": {
|
||||
"core-js": "^3.25.0"
|
||||
"core-js": "^3.39"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.19",
|
||||
"@babel/preset-env": "^7.19",
|
||||
"babel-loader": "^8.2",
|
||||
"@babel/core": "^7.26",
|
||||
"@babel/preset-env": "^7.26",
|
||||
"babel-loader": "^9.2",
|
||||
"cross-env": "^7.0.3",
|
||||
"file-loader": "^6.2.0",
|
||||
"sass": "^1.42.1",
|
||||
"sass-loader": "^12.1.0",
|
||||
"webpack": "^5.76",
|
||||
"webpack-cli": "^4.10"
|
||||
"sass": "^1.80",
|
||||
"sass-loader": "^16",
|
||||
"webpack": "^5.96",
|
||||
"webpack-cli": "^5"
|
||||
},
|
||||
"scripts": {
|
||||
"build": "cross-env BABEL_ENV=default NODE_ENV=production webpack",
|
||||
|
|
|
@ -10,21 +10,21 @@
|
|||
"Edge >= 14"
|
||||
],
|
||||
"dependencies": {
|
||||
"core-js": "^3.25.0",
|
||||
"core-js": "^3.39",
|
||||
"@paypal/paypal-js": "^6.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.19",
|
||||
"@babel/preset-env": "^7.19",
|
||||
"@babel/preset-react": "^7.18.6",
|
||||
"@woocommerce/dependency-extraction-webpack-plugin": "^2.2.0",
|
||||
"babel-loader": "^8.2",
|
||||
"@babel/core": "^7.26",
|
||||
"@babel/preset-env": "^7.26",
|
||||
"@babel/preset-react": "^7.25",
|
||||
"@woocommerce/dependency-extraction-webpack-plugin": "2.2.0",
|
||||
"babel-loader": "^9.2",
|
||||
"cross-env": "^7.0.3",
|
||||
"file-loader": "^6.2.0",
|
||||
"sass": "^1.42.1",
|
||||
"sass-loader": "^12.1.0",
|
||||
"webpack": "^5.76",
|
||||
"webpack-cli": "^4.10"
|
||||
"sass": "^1.80",
|
||||
"sass-loader": "^16",
|
||||
"webpack": "^5.96",
|
||||
"webpack-cli": "^5"
|
||||
},
|
||||
"scripts": {
|
||||
"build": "cross-env BABEL_ENV=default NODE_ENV=production webpack",
|
||||
|
|
|
@ -72,6 +72,7 @@ return array(
|
|||
'FR' => $default_currencies,
|
||||
'DE' => $default_currencies,
|
||||
'GR' => $default_currencies,
|
||||
'HK' => $default_currencies,
|
||||
'HU' => $default_currencies,
|
||||
'IE' => $default_currencies,
|
||||
'IT' => $default_currencies,
|
||||
|
@ -85,19 +86,13 @@ return array(
|
|||
'PL' => $default_currencies,
|
||||
'PT' => $default_currencies,
|
||||
'RO' => $default_currencies,
|
||||
'SG' => $default_currencies,
|
||||
'SK' => $default_currencies,
|
||||
'SI' => $default_currencies,
|
||||
'ES' => $default_currencies,
|
||||
'SE' => $default_currencies,
|
||||
'GB' => $default_currencies,
|
||||
'US' => array(
|
||||
'AUD',
|
||||
'CAD',
|
||||
'EUR',
|
||||
'GBP',
|
||||
'JPY',
|
||||
'USD',
|
||||
),
|
||||
'US' => $default_currencies,
|
||||
)
|
||||
);
|
||||
},
|
||||
|
|
BIN
modules/ppcp-settings/fonts/PayPalPro-Black.otf
Normal file
BIN
modules/ppcp-settings/fonts/PayPalPro-BlackItalic.otf
Normal file
BIN
modules/ppcp-settings/fonts/PayPalPro-Bold.otf
Normal file
BIN
modules/ppcp-settings/fonts/PayPalPro-BoldItalic.otf
Normal file
BIN
modules/ppcp-settings/fonts/PayPalPro-Book.otf
Normal file
BIN
modules/ppcp-settings/fonts/PayPalPro-BookItalic.otf
Normal file
Before Width: | Height: | Size: 2.6 KiB After Width: | Height: | Size: 2.6 KiB |
Before Width: | Height: | Size: 1 KiB After Width: | Height: | Size: 1 KiB |
Before Width: | Height: | Size: 54 KiB After Width: | Height: | Size: 54 KiB |
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 14 KiB |
Before Width: | Height: | Size: 2.4 KiB After Width: | Height: | Size: 2.4 KiB |
Before Width: | Height: | Size: 13 KiB After Width: | Height: | Size: 13 KiB |
Before Width: | Height: | Size: 3.1 KiB After Width: | Height: | Size: 3.1 KiB |
Before Width: | Height: | Size: 3.1 KiB After Width: | Height: | Size: 3.1 KiB |
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.3 KiB |
Before Width: | Height: | Size: 568 B After Width: | Height: | Size: 568 B |
9
modules/ppcp-settings/images/icon-checkout-advanced.svg
Normal file
|
@ -0,0 +1,9 @@
|
|||
<svg width="58" height="58" viewBox="0 0 58 58" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M55.5833 43.4999C55.5833 44.8346 54.5013 45.9166 53.1666 45.9166L19.3333 45.9166C17.9986 45.9166 16.9166 44.8346 16.9166 43.4999L16.9166 26.5833C16.9166 25.2486 17.9986 24.1666 19.3333 24.1666L53.1666 24.1666C54.5013 24.1666 55.5833 25.2486 55.5833 26.5833V43.4999Z" fill="#5BBBFC"/>
|
||||
<path d="M2.41663 14.4999C2.41663 13.1652 3.4986 12.0833 4.83329 12.0833H33.8333C35.168 12.0833 36.25 13.1652 36.25 14.4999V33.8333C36.25 35.1679 35.168 36.2499 33.8333 36.2499H4.83329C3.49861 36.2499 2.41663 35.1679 2.41663 33.8333V14.4999Z" fill="#DD7F57"/>
|
||||
<path d="M36.25 24.1666V33.8333C36.25 35.1679 35.168 36.2499 33.8333 36.2499H16.9166L16.9166 26.5833C16.9166 25.2486 17.9986 24.1666 19.3333 24.1666L36.25 24.1666Z" fill="#FAF8F5"/>
|
||||
<path d="M27.7916 35.0416C27.7916 30.3702 31.5785 26.5833 36.25 26.5833C40.9214 26.5833 44.7083 30.3702 44.7083 35.0416C44.7083 39.713 40.9214 43.4999 36.25 43.4999C31.5785 43.4999 27.7916 39.713 27.7916 35.0416Z" fill="#001C64"/>
|
||||
<path d="M2.41663 16.9166H36.25V21.7499H2.41663V16.9166Z" fill="#4F2825"/>
|
||||
<path d="M14.5 31.7187C14.5 32.0523 14.2295 32.3228 13.8958 32.3228H5.43746C5.10379 32.3228 4.83329 32.0523 4.83329 31.7187V30.8124C4.83329 30.4787 5.10379 30.2083 5.43746 30.2083H13.8958C14.2295 30.2083 14.5 30.4787 14.5 30.8124V31.7187Z" fill="#4F2825"/>
|
||||
<path d="M27.7916 35.0416C27.7916 30.3702 31.5785 26.5833 36.25 26.5833V33.8333C36.25 35.1679 35.168 36.2499 33.8333 36.2499H27.8773C27.8208 35.8553 27.7916 35.4518 27.7916 35.0416Z" fill="#4F2825"/>
|
||||
</svg>
|
After Width: | Height: | Size: 1.6 KiB |
|
@ -0,0 +1,9 @@
|
|||
<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M21.3334 27.0004C21.3334 25.5277 22.5273 24.3338 24.0001 24.3338H58.6667C60.1395 24.3338 61.3334 25.5277 61.3334 27.0004V48.3338C61.3334 49.8065 60.1395 51.0004 58.6667 51.0004H24.0001C22.5273 51.0004 21.3334 49.8065 21.3334 48.3338V27.0004Z" fill="#6FC400"/>
|
||||
<path d="M2.66675 16.3338C2.66675 14.861 3.86066 13.6671 5.33341 13.6671H40.0001C41.4728 13.6671 42.6667 14.861 42.6667 16.3338V37.6671C42.6667 39.1399 41.4728 40.3338 40.0001 40.3338H5.33341C3.86066 40.3338 2.66675 39.1399 2.66675 37.6671V16.3338Z" fill="#5BBBFC"/>
|
||||
<path d="M42.6667 24.3338V37.6671C42.6667 39.1399 41.4728 40.3338 40.0001 40.3338H21.3334V27.0004C21.3334 25.5277 22.5273 24.3338 24.0001 24.3338H42.6667Z" fill="#FAF8F5"/>
|
||||
<path d="M61.3334 29.6671H42.6667V35.0004H61.3334V29.6671Z" fill="#005400"/>
|
||||
<path d="M36.6667 46.6671C37.0349 46.6671 37.3334 46.3686 37.3334 46.0004V45.0004C37.3334 44.6323 37.0349 44.3338 36.6667 44.3338H24.6667C24.2986 44.3338 24.0001 44.6323 24.0001 45.0004V46.0004C24.0001 46.3686 24.2986 46.6671 24.6667 46.6671H36.6667Z" fill="#005400"/>
|
||||
<path d="M8.66675 19.0004C8.29856 19.0004 8.00008 19.2989 8.00008 19.6671V26.3338C8.00008 26.702 8.29856 27.0004 8.66675 27.0004H15.3334C15.7016 27.0004 16.0001 26.702 16.0001 26.3338V19.6671C16.0001 19.2989 15.7016 19.0004 15.3334 19.0004H8.66675Z" fill="#001C64"/>
|
||||
<path d="M36.9312 29.6514C37.1625 29.3649 37.1177 28.9451 36.8312 28.7139L36.053 28.0858C35.7665 27.8546 35.3468 27.8994 35.1155 28.1859L30.8233 33.5038C30.5842 33.8001 30.1459 33.8363 29.8614 33.5833L28.0489 31.9712C27.7738 31.7265 27.3524 31.7511 27.1077 32.0263L26.4431 32.7735C26.1984 33.0486 26.2231 33.47 26.4982 33.7147L30.1398 36.9535C30.4242 37.2066 30.8625 37.1704 31.1016 36.8741L36.9312 29.6514Z" fill="#001C64"/>
|
||||
</svg>
|
After Width: | Height: | Size: 1.8 KiB |
|
@ -0,0 +1,9 @@
|
|||
<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M61.3334 48.0003C61.3334 49.473 60.1395 50.667 58.6667 50.667L21.3334 50.6669C19.8607 50.6669 18.6667 49.473 18.6667 48.0003L18.6667 29.3336C18.6667 27.8609 19.8607 26.667 21.3334 26.667L58.6667 26.667C60.1395 26.667 61.3334 27.8609 61.3334 29.3336V48.0003Z" fill="#5BBBFC"/>
|
||||
<path d="M2.66675 16.0003C2.66675 14.5275 3.86066 13.3336 5.33341 13.3336H37.3334C38.8062 13.3336 40.0001 14.5275 40.0001 16.0003V37.3336C40.0001 38.8064 38.8062 40.0003 37.3334 40.0003H5.33342C3.86066 40.0003 2.66675 38.8064 2.66675 37.3336V16.0003Z" fill="#DD7F57"/>
|
||||
<path d="M40.0001 26.667V37.3336C40.0001 38.8064 38.8062 40.0003 37.3334 40.0003H18.6667L18.6667 29.3336C18.6667 27.8609 19.8607 26.667 21.3334 26.667L40.0001 26.667Z" fill="#FAF8F5"/>
|
||||
<path d="M30.6667 38.667C30.6667 33.5123 34.8454 29.3336 40.0001 29.3336C45.1547 29.3336 49.3334 33.5123 49.3334 38.667C49.3334 43.8216 45.1547 48.0003 40.0001 48.0003C34.8454 48.0003 30.6667 43.8216 30.6667 38.667Z" fill="#001C64"/>
|
||||
<path d="M2.66675 18.667H40.0001V24.0003H2.66675V18.667Z" fill="#4F2825"/>
|
||||
<path d="M16.0001 35.0003C16.0001 35.3685 15.7016 35.667 15.3334 35.667H6.00008C5.63189 35.667 5.33341 35.3685 5.33341 35.0003V34.0003C5.33341 33.6321 5.63189 33.3336 6.00008 33.3336H15.3334C15.7016 33.3336 16.0001 33.6321 16.0001 34.0003V35.0003Z" fill="#4F2825"/>
|
||||
<path d="M30.6667 38.667C30.6667 33.5123 34.8454 29.3336 40.0001 29.3336V37.3336C40.0001 38.8064 38.8062 40.0003 37.3334 40.0003H30.7613C30.699 39.5648 30.6667 39.1196 30.6667 38.667Z" fill="#4F2825"/>
|
||||
</svg>
|
After Width: | Height: | Size: 1.6 KiB |
8
modules/ppcp-settings/images/icon-checkout-standard.svg
Normal file
|
@ -0,0 +1,8 @@
|
|||
<svg width="58" height="58" viewBox="0 0 58 58" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M50.75 48.3333C50.75 49.668 49.668 50.75 48.3333 50.75L14.5 50.75C13.1653 50.75 12.0833 49.668 12.0833 48.3333L12.0833 14.5C12.0833 13.1653 13.1653 12.0833 14.5 12.0833L48.3333 12.0833C49.668 12.0833 50.75 13.1653 50.75 14.5L50.75 48.3333Z" fill="#5BBBFC"/>
|
||||
<path d="M45.9167 43.5C45.9167 44.8347 44.8347 45.9167 43.5 45.9167L9.66666 45.9167C8.33198 45.9167 7.25 44.8347 7.25 43.5L7.25 9.66667C7.25 8.33198 8.33198 7.25 9.66667 7.25L43.5 7.25C44.8347 7.25 45.9167 8.33198 45.9167 9.66667L45.9167 43.5Z" fill="#6FC400"/>
|
||||
<path d="M45.9167 12.0833V43.5C45.9167 44.8347 44.8347 45.9167 43.5 45.9167L12.0833 45.9167L12.0833 14.5C12.0833 13.1653 13.1653 12.0833 14.5 12.0833H45.9167Z" fill="#FAF8F5"/>
|
||||
<path d="M26.8638 21.6503C26.7443 21.7523 26.665 21.8937 26.6404 22.0491L24.3562 36.5038H20.3333C20.2478 36.504 20.1633 36.4852 20.086 36.4487C20.0087 36.4122 19.9405 36.3588 19.8864 36.2926C19.8322 36.2263 19.7935 36.1488 19.7731 36.0657C19.7526 35.9826 19.7509 35.896 19.7681 35.8122L22.6558 17.5222C22.6801 17.3594 22.76 17.2101 22.8819 17.0997C23.0039 16.9893 23.1603 16.9246 23.3245 16.9167H30.2633C33.2628 16.9015 35.8475 19.0533 35.8375 21.9633C35.0658 21.5647 34.0719 21.4928 33.0285 21.4928H27.2926C27.1355 21.4925 26.9834 21.5483 26.8638 21.6503Z" fill="#001C64"/>
|
||||
<path d="M26.8482 28.8223L27.7143 23.3339C27.7621 23.0432 27.9243 22.7524 28.3021 22.7524H33.1428C34.0632 22.7607 35.0331 22.8438 35.7514 23.2194C35.7473 23.4716 35.7288 23.7232 35.6962 23.9733C35.4865 25.3236 34.8016 26.5545 33.765 27.4437C32.7284 28.3329 31.4084 28.8218 30.0433 28.8223H26.8482Z" fill="#001C64"/>
|
||||
<path d="M36.9243 23.8817C36.9174 24.1202 36.8966 24.3581 36.8621 24.5942C36.3674 27.7527 33.6214 30.0834 30.4302 30.0834H27.2647C27.0937 30.0835 26.9284 30.1446 26.7984 30.2558C26.6684 30.3671 26.5823 30.521 26.5556 30.6901L25.0157 40.409C25.0026 40.4923 25.0077 40.5774 25.0307 40.6585C25.0536 40.7397 25.0938 40.8148 25.1486 40.8789C25.2033 40.943 25.2713 40.9944 25.3478 41.0297C25.4243 41.0649 25.5075 41.0832 25.5917 41.0832H28.9829C29.1516 41.0831 29.3148 41.0237 29.4441 40.9152C29.5733 40.8067 29.6603 40.6562 29.6898 40.49L30.5289 35.2197C30.5535 35.0642 30.6327 34.9227 30.7522 34.8206C30.8718 34.7184 31.0239 34.6624 31.1811 34.6625H33.1979C36.3891 34.6625 39.1351 32.3314 39.6299 29.1733C39.9803 26.9314 38.8529 24.8914 36.9243 23.8817Z" fill="#001C64"/>
|
||||
</svg>
|
After Width: | Height: | Size: 2.4 KiB |
12
modules/ppcp-settings/images/icon-payment-method-crypto.svg
Normal file
|
@ -0,0 +1,12 @@
|
|||
<svg width="39" height="24" viewBox="0 0 39 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_4102_14097)">
|
||||
<rect x="0.5" width="38" height="24" rx="2" fill="white"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M17.4228 2.39268C18.6949 2.3926 20.2344 2.39251 21.6789 2.39264C21.6956 2.39265 21.7124 2.39321 21.7291 2.39433C23.4788 2.51187 25.1397 2.99029 26.374 4.04356C27.6343 5.11897 28.3569 6.71401 28.3569 8.85365C28.3569 10.45 27.9486 11.733 27.2513 12.738C26.5571 13.7385 25.6094 14.4164 24.602 14.8616C22.9266 15.602 21.0269 15.727 19.6198 15.6045L18.6148 21.2254C18.5509 21.5831 18.2398 21.8434 17.8765 21.8434H12.5936C12.3743 21.8434 12.1659 21.7474 12.0234 21.5806C11.8809 21.4139 11.8186 21.1931 11.8528 20.9764L13.3435 11.5375H11.1792C10.765 11.5375 10.4292 11.2017 10.4292 10.7875C10.4292 10.3733 10.765 10.0375 11.1792 10.0375H13.5804L13.9545 7.66913H11.9009C11.4867 7.66913 11.1509 7.33334 11.1509 6.91913C11.1509 6.50491 11.4867 6.16913 11.9009 6.16913H14.1914L14.6878 3.02575C14.7454 2.66121 15.0596 2.39273 15.4287 2.39275C15.9272 2.39277 16.6221 2.39273 17.4228 2.39268ZM15.4731 7.66913L15.099 10.0375H21.5624C21.5704 10.0375 21.5785 10.0376 21.5866 10.0379C21.8308 10.0457 22.1873 9.98704 22.4568 9.81193C22.6792 9.66736 22.8973 9.41443 22.8973 8.85365C22.8973 8.23068 22.6723 8.01152 22.479 7.89535C22.221 7.74024 21.8757 7.69206 21.5376 7.66913H15.4731ZM14.8621 11.5375L13.4714 20.3434H17.2487L18.2685 14.6399C18.3409 14.2348 18.7263 13.9637 19.1321 14.0325C20.356 14.2399 22.348 14.2178 23.9956 13.4896C24.8075 13.1308 25.5139 12.6109 26.0189 11.883C26.5208 11.1595 26.8569 10.1836 26.8569 8.85365C26.8569 7.07955 26.2745 5.93053 25.4003 5.18461C24.5049 4.42056 23.2107 4.00074 21.6532 3.89264C20.216 3.89251 18.6878 3.89261 17.4235 3.89268C16.9236 3.89271 16.465 3.89274 16.0695 3.89275L15.71 6.16913H21.5624C21.5785 6.16913 21.5946 6.16965 21.6107 6.17068C21.9601 6.19324 22.6472 6.24622 23.2519 6.60979C23.9274 7.01589 24.3973 7.74157 24.3973 8.85365C24.3973 9.92436 23.9205 10.6496 23.2742 11.0696C22.6807 11.4554 22.0021 11.5498 21.5513 11.5375H14.8621Z" fill="#0070E0"/>
|
||||
</g>
|
||||
<rect x="1" y="0.5" width="37" height="23" rx="1.5" stroke="black" stroke-opacity="0.07"/>
|
||||
<defs>
|
||||
<clipPath id="clip0_4102_14097">
|
||||
<rect x="0.5" width="38" height="24" rx="2" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
After Width: | Height: | Size: 2.3 KiB |
After Width: | Height: | Size: 12 KiB |
|
@ -0,0 +1,15 @@
|
|||
<svg width="39" height="24" viewBox="0 0 39 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="0.5" width="38" height="24" rx="2" fill="white"/>
|
||||
<rect x="1" y="0.5" width="37" height="23" rx="1.5" stroke="black" stroke-opacity="0.07"/>
|
||||
<g clip-path="url(#clip0_4102_14076)">
|
||||
<path d="M24.0798 7.24011C24.0798 9.332 22.0955 11.8044 19.0971 11.8044H16.2091L16.0689 12.6757L15.3934 16.8757H11.7998L13.9604 3.35205H19.7809C21.7396 3.35205 23.2827 4.41716 23.8481 5.89735C24.0081 6.31647 24.0897 6.76894 24.0801 7.24011H24.0798Z" fill="#002991"/>
|
||||
<path d="M26.152 11.1273C25.7552 13.4729 23.6829 15.1843 21.2355 15.1843H19.2291L18.3913 20.2555H14.8198L15.3929 16.8748L16.0685 12.6748L16.2086 11.8035H19.0966C22.095 11.8035 24.0793 9.33115 24.0793 7.23926C24.08 7.23926 24.0806 7.23988 24.0813 7.24019C25.5571 7.98029 26.416 9.47979 26.1517 11.1273H26.152Z" fill="#60CDFF"/>
|
||||
<path d="M24.0796 7.24041C24.0796 7.24041 24.0809 7.24106 24.0816 7.24139C24.0809 7.20406 24.0806 7.20178 24.0796 7.24041Z" fill="black"/>
|
||||
<path d="M24.0797 7.23942C23.4624 6.92251 22.7127 6.73242 21.897 6.73242H17.0247L16.209 11.8037H19.097C22.0954 11.8037 24.0797 9.33132 24.0797 7.23942Z" fill="#008CFF"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_4102_14076">
|
||||
<rect width="14.4" height="16.9043" fill="white" transform="translate(11.7998 3.35205)"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
After Width: | Height: | Size: 1.3 KiB |
|
@ -1,13 +1,8 @@
|
|||
<svg width="56" height="67" viewBox="0 0 56 67" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_2758_23772)">
|
||||
<path d="M47.7556 15.4102C47.7556 23.7014 40.0388 33.5006 28.3783 33.5006H17.1472L16.6021 36.9539L13.9751 53.6005H0L8.40249 0H31.0377C38.6549 0 44.6556 4.22154 46.8546 10.0882C47.4768 11.7494 47.7941 13.5428 47.7568 15.4102H47.7556Z" fill="#002991"/>
|
||||
<path d="M55.8146 30.8205C54.2715 40.117 46.2125 46.9002 36.695 46.9002H28.8923L25.6344 67H11.7451L13.9739 53.6005L16.6009 36.954L17.146 33.5007H28.3771C40.0376 33.5007 47.7544 23.7014 47.7544 15.4103C47.7568 15.4103 47.7593 15.4127 47.7618 15.414C53.5012 18.3473 56.8413 24.2906 55.8134 30.8205H55.8146Z" fill="#60CDFF"/>
|
||||
<path d="M47.7556 15.4103C47.7556 15.4103 47.7606 15.4128 47.7631 15.414C47.7606 15.272 47.7593 15.2633 47.7556 15.4103Z" fill="black"/>
|
||||
<path d="M47.7556 15.4103C45.355 14.1542 42.4393 13.4008 39.2672 13.4008H20.3193L17.1472 33.5006H28.3783C40.0388 33.5006 47.7556 23.7014 47.7556 15.4103Z" fill="#008CFF"/>
|
||||
<svg width="110" height="38" viewBox="0 0 110 38" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<mask id="mask0_4177_18052" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="110" height="38">
|
||||
<path d="M0.416626 0.68335H109.583V37.3167H0.416626V0.68335Z" fill="white"/>
|
||||
</mask>
|
||||
<g mask="url(#mask0_4177_18052)">
|
||||
<path d="M109.583 0.68335V28.0417H103.358V0.68335H109.583ZM101.067 9.91668V28.0917H95.5333V26.525C94.8333 27.2083 94.0333 27.725 93.15 28.0917C92.2583 28.475 91.2916 28.675 90.2583 28.675C88.9583 28.675 87.75 28.4333 86.6416 27.95C85.5333 27.4417 84.5666 26.75 83.75 25.8833C82.925 25.0083 82.275 23.9917 81.7916 22.8333C81.3333 21.65 81.1083 20.375 81.1083 19.0167C81.1083 17.6583 81.3333 16.4 81.7916 15.2417C82.275 14.0583 82.925 13.025 83.75 12.15C84.5647 11.2817 85.5489 10.5896 86.6416 10.1167C87.75 9.60835 88.9583 9.35002 90.2583 9.35002C91.2916 9.35002 92.2583 9.54168 93.15 9.93335C94.0416 10.3 94.8416 10.8167 95.5333 11.5V9.93335H101.067V9.91668ZM91.2583 23.1417C92.3916 23.1417 93.3166 22.7583 94.0416 21.975C94.7916 21.2 95.1666 20.2083 95.1666 19C95.1666 17.7917 94.7916 16.7917 94.0416 16.025C93.3166 15.25 92.3833 14.8583 91.2583 14.8583C90.1333 14.8583 89.1833 15.2417 88.4333 16.025C87.7083 16.8 87.35 17.7917 87.35 19C87.35 20.2083 87.7166 21.2083 88.4333 21.975C89.1833 22.75 90.125 23.1417 91.2583 23.1417ZM72.225 0.68335C73.8666 0.68335 75.2666 0.916683 76.425 1.37502C77.5833 1.83335 78.5583 2.47502 79.3583 3.30002C80.175 4.15002 80.8166 5.11668 81.275 6.20835C81.7333 7.30002 81.9583 8.47502 81.9583 9.73335C81.9583 10.9917 81.7333 12.1667 81.275 13.2583C80.8251 14.3399 80.1748 15.3267 79.3583 16.1667C78.5666 16.9917 77.5833 17.6333 76.425 18.0917C75.2666 18.55 73.8666 18.7833 72.225 18.7833H69.225V28.0833H62.8916V0.68335H72.225ZM71.3166 13.15C72.1666 13.15 72.8083 13.0667 73.275 12.8917C73.7583 12.7 74.1583 12.45 74.4666 12.1667C75.1166 11.5583 75.4416 10.75 75.4416 9.73335C75.4416 8.71668 75.1166 7.90835 74.4666 7.30002C74.15 7.00835 73.7583 6.77502 73.275 6.60835C72.8166 6.41668 72.1666 6.31668 71.3166 6.31668H69.2166V13.15H71.3166ZM39.5583 9.91668H46.4333L51.1 18.6333H51.175L55.3333 9.91668H61.7L48.0583 37.3167H41.725L47.95 24.7833L39.5583 9.91668ZM38.3333 9.91668V28.0917H32.8V26.525C32.1 27.2083 31.3 27.725 30.4166 28.0917C29.525 28.475 28.5583 28.675 27.525 28.675C26.225 28.675 25.0166 28.4333 23.9083 27.95C22.8 27.4417 21.8333 26.75 21.0166 25.8833C20.2 25.0083 19.5416 23.9917 19.0583 22.8333C18.6 21.65 18.375 20.375 18.375 19.0167C18.375 17.6583 18.6 16.4 19.0583 15.2417C19.5416 14.0583 20.1916 13.025 21.0166 12.15C21.8298 11.2799 22.8144 10.5875 23.9083 10.1167C25.0166 9.60835 26.225 9.35002 27.525 9.35002C28.5583 9.35002 29.525 9.54168 30.4166 9.93335C31.3083 10.3 32.1083 10.8167 32.8 11.5V9.93335H38.3333V9.91668ZM28.525 23.1417C29.6583 23.1417 30.5833 22.7583 31.3166 21.975C32.0666 21.2 32.4416 20.2083 32.4416 19C32.4416 17.7917 32.0666 16.7917 31.3166 16.025C30.5916 15.25 29.6583 14.8583 28.525 14.8583C27.3916 14.8583 26.45 15.2417 25.7 16.025C24.975 16.8 24.6166 17.7917 24.6166 19C24.6166 20.2083 24.9833 21.2083 25.7 21.975C26.45 22.75 27.3916 23.1417 28.525 23.1417ZM9.74996 0.68335C11.3916 0.68335 12.7916 0.916683 13.95 1.37502C15.1083 1.83335 16.0833 2.47502 16.8833 3.30002C17.7 4.15002 18.3416 5.11668 18.8 6.20835C19.2583 7.30002 19.4833 8.47502 19.4833 9.73335C19.4833 10.9917 19.2583 12.1667 18.8 13.2583C18.3501 14.3399 17.6998 15.3267 16.8833 16.1667C16.0916 16.9917 15.1083 17.6333 13.95 18.0917C12.7916 18.55 11.3916 18.7833 9.74996 18.7833H6.74996V28.0833H0.416626V0.68335H9.74996ZM8.84996 13.15C9.69996 13.15 10.3416 13.0667 10.8083 12.8917C11.2916 12.7 11.6916 12.45 12 12.1667C12.65 11.5583 12.975 10.75 12.975 9.73335C12.975 8.71668 12.65 7.90835 12 7.30002C11.6833 7.00835 11.2916 6.77502 10.8083 6.60835C10.35 6.41668 9.69996 6.31668 8.84996 6.31668H6.74996V13.15H8.84996Z" fill="black"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_2758_23772">
|
||||
<rect width="56" height="67" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 3.8 KiB |
0
modules/ppcp-settings/node_modules/.gitkeep
generated
vendored
Normal file
|
@ -1,7 +1,55 @@
|
|||
@font-face {
|
||||
font-family: 'PayPalPro';
|
||||
src: url('../../fonts/PayPalPro-Black.otf') format('opentype');
|
||||
font-weight: 900;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'PayPalPro';
|
||||
src: url('../../fonts/PayPalPro-BlackItalic.otf') format('opentype');
|
||||
font-weight: 900;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'PayPalPro';
|
||||
src: url('../../fonts/PayPalPro-Bold.otf') format('opentype');
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'PayPalPro';
|
||||
src: url('../../fonts/PayPalPro-BoldItalic.otf') format('opentype');
|
||||
font-weight: bold;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'PayPalPro';
|
||||
src: url('../../fonts/PayPalPro-Book.otf') format('opentype');
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'PayPalPro';
|
||||
src: url('../../fonts/PayPalPro-BookItalic.otf') format('opentype');
|
||||
font-weight: 400;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
|
||||
* {
|
||||
font-family: "Inter", sans-serif;
|
||||
font-family: "PayPalPro", sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
box-sizing: border-box;
|
||||
color: $color-gray-700;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4 {
|
||||
color: $color-black;
|
||||
}
|
||||
|
||||
a:not(.button) {
|
||||
|
|
|
@ -6,8 +6,9 @@ $color-gray-900: #1E1E1E;
|
|||
$color-gray-800: #2F2F2F;
|
||||
$color-gray-700: #757575;
|
||||
$color-gray-600: #949494;
|
||||
$color-gray-500: #BBBBBB;
|
||||
$color-gray-500: #2c2c2c;
|
||||
$color-gray-400: #CCCCCC;
|
||||
$color-gray-300: #EBEBEB;
|
||||
$color-gray-200: #E0E0E0;
|
||||
$color-gray: #646970;
|
||||
|
||||
|
|
|
@ -0,0 +1,37 @@
|
|||
.ppcp-r-badge-box {
|
||||
margin: 0 0 8px 0;
|
||||
|
||||
&__title {
|
||||
@include font(14, 20, 700);
|
||||
display: block;
|
||||
margin: 0 0 8px 0;
|
||||
|
||||
.ppcp-r-badge-box__title-text {
|
||||
color: #000;
|
||||
|
||||
&--big {
|
||||
@include font(16, 28, 700);
|
||||
}
|
||||
|
||||
&--small {
|
||||
vertical-align: text-bottom;
|
||||
}
|
||||
}
|
||||
|
||||
&-image-badge {
|
||||
margin-left: 7px;
|
||||
|
||||
img {
|
||||
margin-left: 5px;
|
||||
vertical-align: bottom;
|
||||
height: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
&--has-image-badge .ppcp-r-title-badge--info {
|
||||
display: block;
|
||||
margin: 6px 0px 0px 0px;
|
||||
width: fit-content;
|
||||
}
|
||||
}
|
||||
}
|
|
@ -1,11 +1,7 @@
|
|||
button.components-button, a.components-button {
|
||||
&.is-primary, &.is-secondary {
|
||||
&:not(:disabled) {
|
||||
background-color: $color-blueberry;
|
||||
|
||||
&:hover {
|
||||
background: $gradient-header;
|
||||
}
|
||||
background-color: $color-black;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
|
|
|
@ -1,34 +1,19 @@
|
|||
.ppcp-r-onboarding-header{
|
||||
margin: 0 0 32px 0;
|
||||
|
||||
&__gradient {
|
||||
background: $gradient-header;
|
||||
width: 100%;
|
||||
height: 112px;
|
||||
position: relative;
|
||||
margin-bottom: 55px;
|
||||
&__logo {
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
&__logo-wrapper {
|
||||
width: 110px;
|
||||
height: 110px;
|
||||
background-color: $color-white;
|
||||
border-radius: 110px;
|
||||
position: absolute;
|
||||
left: calc(50% - 55px);
|
||||
bottom: -55px;
|
||||
|
||||
img {
|
||||
width: 56px;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 110px;
|
||||
height: 38px;
|
||||
}
|
||||
}
|
||||
|
||||
&__content {
|
||||
max-width: 458px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
@ -37,15 +22,13 @@
|
|||
}
|
||||
|
||||
&__title {
|
||||
@include font(20, 28, 700);
|
||||
color: $color-blue;
|
||||
@include font(24, 32, 400);
|
||||
margin: 0 0 4px 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&__description {
|
||||
color: $color-gray-800;
|
||||
@include font(14, 20, 400);
|
||||
@include font(14, 22, 400);
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
|
|
@ -0,0 +1,48 @@
|
|||
.ppcp-r-payment-method-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&:not(:last-child) {
|
||||
padding-bottom: 32px;
|
||||
}
|
||||
|
||||
&:not(:first-child) {
|
||||
border-top: 1px solid $color-gray-400;
|
||||
padding-top: 32px;
|
||||
}
|
||||
|
||||
&__checkbox-wrap {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.ppcp-r__checkbox {
|
||||
margin-right: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
&__icon-wrap {
|
||||
margin-right: 18px;
|
||||
}
|
||||
|
||||
&__content {
|
||||
padding-right: 24px;
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__title {
|
||||
@include font(16, 20, 600);
|
||||
color: $color-black;
|
||||
margin: 0 0 8px 0;
|
||||
display: block;
|
||||
}
|
||||
|
||||
button {
|
||||
margin-left: auto;
|
||||
@include font(13, 20, 400);
|
||||
padding: 6px 12px !important;
|
||||
}
|
||||
}
|
|
@ -0,0 +1,123 @@
|
|||
.ppcp-r-modal {
|
||||
@import "../../global";
|
||||
@import './button';
|
||||
@import './fields';
|
||||
|
||||
&__container {
|
||||
max-width: 100%;
|
||||
width: 400px;
|
||||
|
||||
&--small {
|
||||
padding: 0 50px;
|
||||
@media screen and (max-width: 480px){
|
||||
padding:0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.components-modal {
|
||||
&__header {
|
||||
height: 52px;
|
||||
padding: 20px 20px 0 20px;
|
||||
|
||||
button {
|
||||
padding: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
&__content {
|
||||
margin-top: 48px;
|
||||
padding: 0 50px 48px 50px;
|
||||
}
|
||||
}
|
||||
|
||||
&__header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
border-bottom: 1px solid $color-gray-500;
|
||||
padding-bottom: 12px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
&__title {
|
||||
@include font(16, 20, 600);
|
||||
color: $color-black;
|
||||
}
|
||||
|
||||
&__content {
|
||||
width: 400px;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
&__inverted-toggle-control {
|
||||
.components-form-toggle {
|
||||
order: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&__field-row {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
|
||||
&--save {
|
||||
margin-top: 24px;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
|
||||
input[type='text'] {
|
||||
padding: 7px 11px;
|
||||
@include font(14, 20, 400);
|
||||
margin: 0;
|
||||
border-color: $color-gray-700;
|
||||
}
|
||||
|
||||
label {
|
||||
@include font(14, 16, 400);
|
||||
color: $color-gray-900;
|
||||
}
|
||||
}
|
||||
|
||||
&__field-rows {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
|
||||
&--acdc {
|
||||
gap: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
.ppcp-r-modal__field-row--save button.is-primary {
|
||||
border-radius: 2px;
|
||||
padding: 6px 12px;
|
||||
@include font(13, 20, 400);
|
||||
}
|
||||
|
||||
&__content-title {
|
||||
@include font(14, 20, 600);
|
||||
color: $color-black;
|
||||
display: block;
|
||||
margin: 0 0 4px 0;
|
||||
}
|
||||
|
||||
&__description {
|
||||
@include font(14, 20, 400);
|
||||
margin: 0 0 24px 0;
|
||||
color: $color-black;
|
||||
}
|
||||
|
||||
&__field-rdb {
|
||||
display: flex;
|
||||
gap: 18px;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
label {
|
||||
@include font(14, 20, 400);
|
||||
color: $color-black;
|
||||
}
|
||||
}
|
||||
}
|
|
@ -8,7 +8,7 @@
|
|||
&-inner-container {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding: 0 16px 72px;
|
||||
padding: 0 16px 48px;
|
||||
box-sizing: border-box;
|
||||
|
||||
@media screen and (max-width: 480px) {
|
||||
|
@ -16,15 +16,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
&-container {
|
||||
box-shadow: $shadow-card;
|
||||
}
|
||||
|
||||
&-card {
|
||||
box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.15);
|
||||
background-color: $color-white;
|
||||
}
|
||||
|
||||
&-settings-card {
|
||||
background-color: $color-white;
|
||||
padding: 48px;
|
||||
|
|
|
@ -12,4 +12,8 @@
|
|||
color:#5c0000;
|
||||
background-color: #faeded;
|
||||
}
|
||||
&--info{
|
||||
color: #2F2F2F;
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -0,0 +1,5 @@
|
|||
.ppcp-r-payment-methods{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap:48px;
|
||||
}
|
|
@ -4,23 +4,27 @@
|
|||
}
|
||||
|
||||
.ppcp-r-payment-method-icons {
|
||||
margin: 0 0 12px 0;
|
||||
margin: 0 0 32px 0;
|
||||
}
|
||||
|
||||
.ppcp-r-button-activate-paypal {
|
||||
display: block;
|
||||
margin: 0 auto 32px auto;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.ppcp-r-button__description {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.ppcp-r-page-welcome-or-separator {
|
||||
margin: 0 0 32px 0;
|
||||
margin: 0 0 16px 0;
|
||||
}
|
||||
|
||||
.ppcp-r-page-welcome-mode-separator {
|
||||
margin: 32px 0;
|
||||
margin: 0 0 48px 0;
|
||||
|
||||
.ppcp-r-separator__line {
|
||||
background-color: $color-gray-500;
|
||||
background-color: $color-gray-300;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -46,14 +50,14 @@
|
|||
gap: 4px;
|
||||
|
||||
> span {
|
||||
@include font(11, 16, 600);
|
||||
@include font(12, 16, 500);
|
||||
text-transform: uppercase;
|
||||
color: $color-gray-800;
|
||||
}
|
||||
|
||||
> p {
|
||||
margin: 0;
|
||||
@include font(13, 16, 400);
|
||||
@include font(11, 16, 450);
|
||||
color: $color-gray-700;
|
||||
}
|
||||
|
||||
|
@ -81,3 +85,69 @@
|
|||
}
|
||||
}
|
||||
|
||||
.ppcp-r-welcome-docs {
|
||||
margin: 0 0 48px 0;
|
||||
|
||||
&__title {
|
||||
text-align: center;
|
||||
@include font(20, 28, 700);
|
||||
margin: 0 0 32px 0;
|
||||
}
|
||||
|
||||
&__description {
|
||||
text-align: center;
|
||||
@include font(14, 22, 400);
|
||||
font-style: italic;
|
||||
|
||||
a {
|
||||
color: $color-gray-700;
|
||||
}
|
||||
}
|
||||
|
||||
&__wrapper {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 8px;
|
||||
margin: 0 0 48px 0;
|
||||
}
|
||||
|
||||
&__col {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
flex: 1;
|
||||
|
||||
> p {
|
||||
margin: 0;
|
||||
@include font(13, 16, 400);
|
||||
color: $color-gray-700;
|
||||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
padding-right: 48px;
|
||||
border-right: 1px solid $color-gray-200;
|
||||
margin-right: 48px;
|
||||
}
|
||||
}
|
||||
|
||||
.ppcp-r-page-welcome-mode-separator {
|
||||
margin: 8px 0 16px 0;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 480px) {
|
||||
flex-wrap: wrap;
|
||||
row-gap: 8px;
|
||||
&__col {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
|
||||
&:not(:last-child) {
|
||||
border-bottom: 1px solid $color-gray-200;
|
||||
border-right: 0;
|
||||
padding-right: 0;
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|