mirror of
https://github.com/woocommerce/woocommerce-paypal-payments.git
synced 2025-09-03 08:37:53 +08:00
Register/render each express button separately
This commit is contained in:
Alex P
parent
064b6db726
commit
b014403031
3 changed files with 86 additions and 49 deletions
|
|
@ -1,13 +1,20 @@
|
|||
import {useEffect, useState} from '@wordpress/element';
|
||||
import {registerExpressPaymentMethod, registerPaymentMethod} from '@woocommerce/blocks-registry';
|
||||
import {mergeWcAddress, paypalAddressToWc, paypalOrderToWcAddresses} from "./Helper/Address";
|
||||
import {loadPaypalScript} from '../../../ppcp-button/resources/js/modules/Helper/ScriptLoading'
|
||||
import {
|
||||
loadPaypalScriptPromise
|
||||
} from '../../../ppcp-button/resources/js/modules/Helper/ScriptLoading'
|
||||
import {
|
||||
normalizeStyleForFundingSource
|
||||
} from '../../../ppcp-button/resources/js/modules/Helper/Style'
|
||||
import buttonModuleWatcher from "../../../ppcp-button/resources/js/modules/ButtonModuleWatcher";
|
||||
|
||||
const config = wc.wcSettings.getSetting('ppcp-gateway_data');
|
||||
|
||||
window.ppcpFundingSource = config.fundingSource;
|
||||
|
||||
let registeredContext = false;
|
||||
|
||||
const PayPalComponent = ({
|
||||
onClick,
|
||||
onClose,
|
||||
|
|
@ -18,6 +25,7 @@ const PayPalComponent = ({
|
|||
activePaymentMethod,
|
||||
shippingData,
|
||||
isEditing,
|
||||
fundingSource,
|
||||
}) => {
|
||||
const {onPaymentSetup, onCheckoutFail, onCheckoutValidation} = eventRegistration;
|
||||
const {responseTypes} = emitResponse;
|
||||
|
|
@ -40,24 +48,6 @@ const PayPalComponent = ({
|
|||
window.ppcpContinuationFilled = true;
|
||||
}, [])
|
||||
|
||||
const [loaded, setLoaded] = useState(false);
|
||||
useEffect(() => {
|
||||
if (!loaded && !config.scriptData.continuation) {
|
||||
loadPaypalScript(config.scriptData, () => {
|
||||
setLoaded(true);
|
||||
|
||||
buttonModuleWatcher.registerContextBootstrap(config.scriptData.context, {
|
||||
createOrder: () => {
|
||||
return createOrder();
|
||||
},
|
||||
onApprove: (data, actions) => {
|
||||
return handleApprove(data, actions);
|
||||
},
|
||||
});
|
||||
});
|
||||
}
|
||||
}, [loaded]);
|
||||
|
||||
const createOrder = async () => {
|
||||
try {
|
||||
const res = await fetch(config.scriptData.ajax.create_order.endpoint, {
|
||||
|
|
@ -296,15 +286,26 @@ const PayPalComponent = ({
|
|||
)
|
||||
}
|
||||
|
||||
if (!loaded) {
|
||||
return null;
|
||||
if (!registeredContext) {
|
||||
buttonModuleWatcher.registerContextBootstrap(config.scriptData.context, {
|
||||
createOrder: () => {
|
||||
return createOrder();
|
||||
},
|
||||
onApprove: (data, actions) => {
|
||||
return handleApprove(data, actions);
|
||||
},
|
||||
});
|
||||
registeredContext = true;
|
||||
}
|
||||
|
||||
const style = normalizeStyleForFundingSource(config.scriptData.button.style, fundingSource);
|
||||
|
||||
const PayPalButton = window.paypal.Buttons.driver("react", { React, ReactDOM });
|
||||
|
||||
return (
|
||||
<PayPalButton
|
||||
style={config.scriptData.button.style}
|
||||
fundingSource={fundingSource}
|
||||
style={style}
|
||||
onClick={handleClick}
|
||||
onCancel={onClose}
|
||||
onError={onClose}
|
||||
|
|
@ -331,21 +332,37 @@ if (config.usePlaceOrder && !config.scriptData.continuation) {
|
|||
},
|
||||
});
|
||||
} else {
|
||||
let registerMethod = registerExpressPaymentMethod;
|
||||
if (config.scriptData.continuation) {
|
||||
features.push('ppcp_continuation');
|
||||
registerMethod = registerPaymentMethod;
|
||||
}
|
||||
registerPaymentMethod({
|
||||
name: config.id,
|
||||
label: <div dangerouslySetInnerHTML={{__html: config.title}}/>,
|
||||
content: <PayPalComponent isEditing={false}/>,
|
||||
edit: <PayPalComponent isEditing={true}/>,
|
||||
ariaLabel: config.title,
|
||||
canMakePayment: () => true,
|
||||
supports: {
|
||||
features: [...features, 'ppcp_continuation'],
|
||||
},
|
||||
});
|
||||
} else {
|
||||
const paypalScriptPromise = loadPaypalScriptPromise(config.scriptData);
|
||||
|
||||
registerMethod({
|
||||
name: config.id,
|
||||
label: <div dangerouslySetInnerHTML={{__html: config.title}}/>,
|
||||
content: <PayPalComponent isEditing={false}/>,
|
||||
edit: <PayPalComponent isEditing={true}/>,
|
||||
ariaLabel: config.title,
|
||||
canMakePayment: () => config.enabled,
|
||||
supports: {
|
||||
features: features,
|
||||
},
|
||||
});
|
||||
for (const fundingSource of ['paypal', ...config.enabledFundingSources]) {
|
||||
registerExpressPaymentMethod({
|
||||
name: fundingSource === 'paypal' ? config.id : `${config.id}-${fundingSource}`,
|
||||
label: <div dangerouslySetInnerHTML={{__html: config.title}}/>,
|
||||
content: <PayPalComponent isEditing={false} fundingSource={fundingSource}/>,
|
||||
edit: <PayPalComponent isEditing={true}/>,
|
||||
ariaLabel: config.title,
|
||||
canMakePayment: async () => {
|
||||
await paypalScriptPromise;
|
||||
|
||||
return paypal.Buttons({fundingSource}).isEligible();
|
||||
},
|
||||
supports: {
|
||||
features: features,
|
||||
},
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -36,7 +36,8 @@ return array(
|
|||
$container->get( 'session.cancellation.view' ),
|
||||
$container->get( 'session.handler' ),
|
||||
$container->get( 'wcgateway.use-place-order-button' ),
|
||||
$container->get( 'wcgateway.place-order-button-text' )
|
||||
$container->get( 'wcgateway.place-order-button-text' ),
|
||||
$container->get( 'wcgateway.all-funding-sources' )
|
||||
);
|
||||
},
|
||||
'blocks.settings.final_review_enabled' => static function ( ContainerInterface $container ): bool {
|
||||
|
|
|
|||
|
|
@ -101,6 +101,13 @@ class PayPalPaymentMethod extends AbstractPaymentMethodType {
|
|||
*/
|
||||
protected $place_order_button_text;
|
||||
|
||||
/**
|
||||
* All existing funding sources for PayPal buttons.
|
||||
*
|
||||
* @var array
|
||||
*/
|
||||
private $all_funding_sources;
|
||||
|
||||
/**
|
||||
* Assets constructor.
|
||||
*
|
||||
|
|
@ -115,6 +122,7 @@ class PayPalPaymentMethod extends AbstractPaymentMethodType {
|
|||
* @param SessionHandler $session_handler The Session handler.
|
||||
* @param bool $use_place_order Whether to use the standard "Place order" button.
|
||||
* @param string $place_order_button_text The text for the standard "Place order" button.
|
||||
* @param array $all_funding_sources All existing funding sources for PayPal buttons.
|
||||
*/
|
||||
public function __construct(
|
||||
string $module_url,
|
||||
|
|
@ -127,7 +135,8 @@ class PayPalPaymentMethod extends AbstractPaymentMethodType {
|
|||
CancelView $cancellation_view,
|
||||
SessionHandler $session_handler,
|
||||
bool $use_place_order,
|
||||
string $place_order_button_text
|
||||
string $place_order_button_text,
|
||||
array $all_funding_sources
|
||||
) {
|
||||
$this->name = PayPalGateway::ID;
|
||||
$this->module_url = $module_url;
|
||||
|
|
@ -141,6 +150,7 @@ class PayPalPaymentMethod extends AbstractPaymentMethodType {
|
|||
$this->session_handler = $session_handler;
|
||||
$this->use_place_order = $use_place_order;
|
||||
$this->place_order_button_text = $place_order_button_text;
|
||||
$this->all_funding_sources = $all_funding_sources;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -194,22 +204,31 @@ class PayPalPaymentMethod extends AbstractPaymentMethodType {
|
|||
}
|
||||
}
|
||||
|
||||
$disabled_funding_sources = explode( ',', $script_data['url_params']['disable-funding'] ) ?: array();
|
||||
$funding_sources = array_values(
|
||||
array_diff(
|
||||
array_keys( $this->all_funding_sources ),
|
||||
$disabled_funding_sources
|
||||
)
|
||||
);
|
||||
|
||||
return array(
|
||||
'id' => $this->gateway->id,
|
||||
'title' => $this->gateway->title,
|
||||
'description' => $this->gateway->description,
|
||||
'enabled' => $this->settings_status->is_smart_button_enabled_for_location( $script_data['context'] ),
|
||||
'fundingSource' => $this->session_handler->funding_source(),
|
||||
'finalReviewEnabled' => $this->final_review_enabled,
|
||||
'usePlaceOrder' => $this->use_place_order,
|
||||
'placeOrderButtonText' => $this->place_order_button_text,
|
||||
'ajax' => array(
|
||||
'id' => $this->gateway->id,
|
||||
'title' => $this->gateway->title,
|
||||
'description' => $this->gateway->description,
|
||||
'enabled' => $this->settings_status->is_smart_button_enabled_for_location( $script_data['context'] ),
|
||||
'fundingSource' => $this->session_handler->funding_source(),
|
||||
'finalReviewEnabled' => $this->final_review_enabled,
|
||||
'usePlaceOrder' => $this->use_place_order,
|
||||
'placeOrderButtonText' => $this->place_order_button_text,
|
||||
'enabledFundingSources' => $funding_sources,
|
||||
'ajax' => array(
|
||||
'update_shipping' => array(
|
||||
'endpoint' => WC_AJAX::get_endpoint( UpdateShippingEndpoint::ENDPOINT ),
|
||||
'nonce' => wp_create_nonce( UpdateShippingEndpoint::nonce() ),
|
||||
),
|
||||
),
|
||||
'scriptData' => $script_data,
|
||||
'scriptData' => $script_data,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue
