Introduce paypal-js loading wrapper to be able to reload script

This commit is contained in:
Emili Castells Guasch 2023-07-13 16:22:57 +02:00
parent 96e434d4b0
commit 59afa81160
10 changed files with 65 additions and 62 deletions

View file

@ -11,9 +11,10 @@
"Edge >= 14"
],
"dependencies": {
"@paypal/paypal-js": "^6.0.0",
"core-js": "^3.25.0",
"formdata-polyfill": "^4.0.10",
"deepmerge": "^4.2.2"
"deepmerge": "^4.2.2",
"formdata-polyfill": "^4.0.10"
},
"devDependencies": {
"@babel/core": "^7.19",

View file

@ -35,7 +35,6 @@ class SingleProductActionHandler {
subscriptionsConfiguration(selected_variation = null) {
const subscription_plan = selected_variation !== null ? this.getPlanIdFromVariation(selected_variation) : this.config.subscription_plan_id
console.log(subscription_plan)
return {
createSubscription: (data, actions) => {
@ -56,7 +55,7 @@ class SingleProductActionHandler {
return res.json();
}).then(() => {
const id = document.querySelector('[name="add-to-cart"]').value;
const products = [new Product(id, 1, null)];
const products = [new Product(id, 1, [])];
fetch(this.config.ajax.change_cart.endpoint, {
method: 'POST',

View file

@ -1,7 +1,6 @@
import CartActionHandler from '../ActionHandler/CartActionHandler';
import BootstrapHelper from "../Helper/BootstrapHelper";
import {setVisible} from "../Helper/Hiding";
import {subscriptionHasPlan} from "../Helper/Subscriptions";
class CartBootstrap {
constructor(gateway, renderer, errorHandler) {
@ -53,7 +52,7 @@ class CartBootstrap {
}
shouldRender() {
return document.querySelector(this.gateway.button.wrapper) !== null && subscriptionHasPlan();
return document.querySelector(this.gateway.button.wrapper) !== null;
}
shouldEnable() {

View file

@ -2,7 +2,7 @@ import UpdateCart from "../Helper/UpdateCart";
import SingleProductActionHandler from "../ActionHandler/SingleProductActionHandler";
import {hide, show} from "../Helper/Hiding";
import BootstrapHelper from "../Helper/BootstrapHelper";
import {subscriptionHasPlan} from "../Helper/Subscriptions";
import {loadPaypalJsScript} from "../Helper/ScriptLoading";
class SingleProductBootstap {
constructor(gateway, renderer, messages, errorHandler) {
@ -80,8 +80,7 @@ class SingleProductBootstap {
shouldRender() {
return this.form() !== null
&& !this.isWcsattSubscriptionMode()
&& subscriptionHasPlan();
&& !this.isWcsattSubscriptionMode();
}
shouldEnable() {
@ -120,10 +119,6 @@ class SingleProductBootstap {
}
priceAmountIsZero() {
if(subscriptionHasPlan()) {
return false;
}
const price = this.priceAmount();
return !price || price === 0;
}
@ -168,7 +163,18 @@ class SingleProductBootstap {
PayPalCommerceGateway.data_client_id.has_subscriptions
&& PayPalCommerceGateway.data_client_id.paypal_subscriptions_enabled
) {
this.renderer.render(actionHandler.subscriptionsConfiguration(this.variations()));
const buttonWrapper = document.getElementById('ppc-button-ppcp-gateway');
buttonWrapper.innerHTML = '';
loadPaypalJsScript(
{
clientId: PayPalCommerceGateway.client_id,
currency: PayPalCommerceGateway.currency,
intent: 'subscription',
vault: true
},
actionHandler.subscriptionsConfiguration(this.variations()),
this.gateway.button.wrapper
);
return;
}

View file

@ -1,4 +1,5 @@
import dataClientIdAttributeHandler from "../DataClientIdAttributeHandler";
import {loadScript} from "@paypal/paypal-js";
export const loadPaypalScript = (config, onLoaded) => {
if (typeof paypal !== 'undefined') {
@ -22,3 +23,9 @@ export const loadPaypalScript = (config, onLoaded) => {
document.body.appendChild(script);
}
export const loadPaypalJsScript = (options, buttons, container) => {
loadScript(options).then((paypal) => {
paypal.Buttons(buttons).render(container);
});
}

View file

@ -2,15 +2,3 @@ export const isChangePaymentPage = () => {
const urlParams = new URLSearchParams(window.location.search)
return urlParams.has('change_payment_method');
}
export const subscriptionHasPlan = () => {
if (PayPalCommerceGateway.data_client_id.paypal_subscriptions_enabled && PayPalCommerceGateway.data_client_id.has_subscriptions) {
if (PayPalCommerceGateway.subscription_plan_id !== '') {
return true;
}
return false;
}
return true;
}

View file

@ -816,6 +816,8 @@ class SmartButton implements SmartButtonInterface {
'url' => add_query_arg( $url_params, 'https://www.paypal.com/sdk/js' ),
'url_params' => $url_params,
'script_attributes' => $this->attributes(),
'client_id' => $this->client_id,
'currency' => $this->currency,
'data_client_id' => array(
'set_attribute' => ( is_checkout() && $this->dcc_is_enabled() ) || $this->can_save_vault_token(),
'endpoint' => \WC_AJAX::get_endpoint( DataClientIdEndpoint::ENDPOINT ),

View file

@ -956,6 +956,13 @@
"@jridgewell/resolve-uri" "^3.0.3"
"@jridgewell/sourcemap-codec" "^1.4.10"
"@paypal/paypal-js@^6.0.0":
version "6.0.0"
resolved "https://registry.yarnpkg.com/@paypal/paypal-js/-/paypal-js-6.0.0.tgz#a5a9556af29e4a0124049bf9a093606f52b8a951"
integrity sha512-FYzjYby9F7tgg4tUxYNseZ6vkeDJcdcjoULsyNhfrWZZjicDpdj5932fZlyUlQXDSR9KlhjXH6H4nPIJ0Lq0Kw==
dependencies:
promise-polyfill "^8.3.0"
"@types/eslint-scope@^3.7.3":
version "3.7.4"
resolved "https://registry.yarnpkg.com/@types/eslint-scope/-/eslint-scope-3.7.4.tgz#37fc1223f0786c39627068a12e94d6e6fc61de16"
@ -1858,6 +1865,11 @@ pkg-dir@^4.1.0, pkg-dir@^4.2.0:
dependencies:
find-up "^4.0.0"
promise-polyfill@^8.3.0:
version "8.3.0"
resolved "https://registry.yarnpkg.com/promise-polyfill/-/promise-polyfill-8.3.0.tgz#9284810268138d103807b11f4e23d5e945a4db63"
integrity sha512-H5oELycFml5yto/atYqmjyigJoAo3+OXwolYiH7OfQuYlAqhxNvTfiNMbV9hsC6Yp83yE5r2KTVmtrG6R9i6Pg==
punycode@^2.1.0:
version "2.1.1"
resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.1.1.tgz#b58b010ac40c22c5657616c8d2c2c02c7bf479ec"

View file

@ -15,8 +15,6 @@ document.addEventListener(
subscriptionTrial.style.display = 'none';
}
console.log('testing')
const unlinkBtn = document.getElementById('ppcp_unlink_sub_plan');
unlinkBtn?.addEventListener('click', (event)=>{
event.preventDefault();

View file

@ -129,15 +129,6 @@ class DisableGateways {
return true;
}
$subscription_mode = $this->settings->has( 'subscriptions_mode' ) ? $this->settings->get( 'subscriptions_mode' ) : '';
if (
(is_checkout() && $subscription_mode === 'subscriptions_api')
&& $this->subscription_helper->cart_contains_subscription()
&& ! $this->subscription_helper->checkout_subscription_product_allowed()
) {
return true;
}
return false;
}