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

@ -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;
}