woocommerce/woocommerce-paypal-payments
2
0
Fork 0
mirror of https://github.com/woocommerce/woocommerce-paypal-payments.git synced 2025-08-31 06:52:50 +08:00
Code Issues Projects Packages Wiki Activity Actions

Migrate the PayPal buttons inside of the Express Checkout in the editor to @paypal/react-paypal-js with a unique namespace to avoid conflicts with the Pay Later messaging block

Browse source
This commit is contained in:
Daniel Dudzic 2024-03-29 13:59:35 +01:00
parent 8b4594ad92
commit 40e8aa2874
No known key found for this signature in database
GPG key ID: 31B40D33E3465483
4 changed files with 62 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -16,6 +16,7 @@ import {
import {
loadPaypalScriptPromise
} from '../../../ppcp-button/resources/js/modules/Helper/ScriptLoading'
import { PayPalScriptProvider, PayPalButtons } from "@paypal/react-paypal-js";
import {
normalizeStyleForFundingSource
} from '../../../ppcp-button/resources/js/modules/Helper/Style'
@ -500,6 +501,30 @@ const PayPalComponent = ({
);
}
const BlockEditorPayPalComponent = ({
fundingSource,
}) => {
const urlParams = {
clientId: 'test',
...config.scriptData.url_params,
dataNamespace: 'ppcp-blocks-editor-paypal-buttons',
components: 'buttons',
}
return (
<PayPalScriptProvider
options={urlParams}
>
<PayPalButtons
fundingSource={fundingSource}
onClick={(data, actions) => {
return false;
}}
/>
</PayPalScriptProvider>
)
}
const features = ['products'];
let block_enabled = true;
@ -564,7 +589,7 @@ if (block_enabled) {
name: config.id,
label: <div dangerouslySetInnerHTML={{__html: config.title}}/>,
content: <PayPalComponent isEditing={false}/>,
edit: <PayPalComponent isEditing={true}/>,
edit: <BlockEditorPayPalComponent fundingSource={fundingSource} />,
ariaLabel: config.title,
canMakePayment: () => {
return true;
@ -580,7 +605,7 @@ if (block_enabled) {
paymentMethodId: config.id,
label: <div dangerouslySetInnerHTML={{__html: config.title}}/>,
content: <PayPalComponent isEditing={false} fundingSource={fundingSource}/>,
edit: <PayPalComponent isEditing={true} fundingSource={fundingSource}/>,
edit: <BlockEditorPayPalComponent fundingSource={fundingSource} />,
ariaLabel: config.title,
canMakePayment: async () => {
if (!paypalScriptPromise) {