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

Add paypal widget builder

Browse source
This commit is contained in:
Pedro Silva 2023-07-20 14:19:18 +01:00
parent 4e50d1d6ba
commit a0480e35bb
No known key found for this signature in database
GPG key ID: E2EE20C0669D24B3
5 changed files with 100 additions and 30 deletions
Download patch file Download diff file Expand all files Collapse all files

3
modules/ppcp-button/resources/js/button.js
View file

@ -19,6 +19,7 @@ import FreeTrialHandler from "./modules/ActionHandler/FreeTrialHandler";
import FormSaver from './modules/Helper/FormSaver';
import FormValidator from "./modules/Helper/FormValidator";
import {loadPaypalScript} from "./modules/Helper/ScriptLoading";
import widgetBuilder from "./modules/Renderer/WidgetBuilder";
// TODO: could be a good idea to have a separate spinner for each gateway,
// but I think we care mainly about the script loading, so one spinner should be enough.
@ -267,6 +268,8 @@ document.addEventListener(
});
loadPaypalScript(PayPalCommerceGateway, () => {
widgetBuilder.setPaypal(paypal);
bootstrapped = true;
bootstrap();

3
modules/ppcp-button/resources/js/modules/ContextBootstrap/CartBootstap.js
View file

@ -1,6 +1,5 @@
import CartActionHandler from '../ActionHandler/CartActionHandler';
import BootstrapHelper from "../Helper/BootstrapHelper";
import {setVisible} from "../Helper/Hiding";
class CartBootstrap {
constructor(gateway, renderer, messages, errorHandler) {
@ -46,7 +45,7 @@ class CartBootstrap {
if (reloadRequired) {
this.gateway.url_params = newParams;
jQuery(this.gateway.button.wrapper).trigger('ppcp-reload-buttons', this.gateway);
jQuery(this.gateway.button.wrapper).trigger('ppcp-reload-buttons');
}
// handle button status

7
modules/ppcp-button/resources/js/modules/Renderer/MessageRenderer.js
View file

@ -1,3 +1,5 @@
import widgetBuilder from "./WidgetBuilder";
class MessageRenderer {
constructor(config) {
@ -28,7 +30,10 @@ class MessageRenderer {
oldWrapper.parentElement.removeChild(oldWrapper);
sibling.parentElement.insertBefore(newWrapper, sibling);
paypal.Messages(options).render(this.config.wrapper);
widgetBuilder.registerMessages(this.config.wrapper, options);
widgetBuilder.renderMessages(this.config.wrapper);
// paypal.Messages(options).render(this.config.wrapper);
}
optionsEqual(options) {

42
modules/ppcp-button/resources/js/modules/Renderer/Renderer.js
View file

@ -1,6 +1,7 @@
import merge from "deepmerge";
import {loadScript} from "@paypal/paypal-js";
import {keysToCamelCase} from "../Helper/Utils";
import widgetBuilder from "./WidgetBuilder";
class Renderer {
constructor(creditCardRenderer, defaultSettings, onSmartButtonClick, onSmartButtonsInit) {
@ -12,9 +13,9 @@ class Renderer {
this.buttonsOptions = {};
this.onButtonsInitListeners = {};
this.activeButtons = {};
this.renderedSources = new Set();
this.reloadEventName = 'ppcp-reload-buttons';
}
render(contextConfig, settingsOverride = {}, contextConfigOverride = () => {}) {
@ -76,8 +77,6 @@ class Renderer {
return;
}
console.log('rendering', wrapper);
if (fundingSource) {
contextConfig.fundingSource = fundingSource;
}
@ -96,36 +95,25 @@ class Renderer {
}
}
const buildButtons = (paypal) => {
const btn = paypal.Buttons(buttonsOptions());
this.activeButtons[wrapper] = btn;
if (!btn.isEligible()) {
return;
}
btn.render(wrapper);
}
jQuery(wrapper).off('ppcp-reload-buttons');
jQuery(wrapper).on('ppcp-reload-buttons', (event, settingsOverride = {}) => {
//jQuery(document).off('ppcp-reload-buttons');
jQuery(document).on('ppcp-reload-buttons', wrapper, (event, settingsOverride = {}) => {
const settings = merge(this.defaultSettings, settingsOverride);
const scriptOptions = keysToCamelCase(settings.url_params);
// if (this.activeButtons[wrapper]) {
// this.activeButtons[wrapper].close();
// }
let scriptOptions = keysToCamelCase(settings.url_params);
scriptOptions = merge(scriptOptions, settings.script_attributes);
loadScript(scriptOptions).then((paypal) => {
buildButtons(paypal);
widgetBuilder.setPaypal(paypal);
widgetBuilder.registerButtons(wrapper, buttonsOptions());
widgetBuilder.renderAllButtons();
widgetBuilder.renderAllMessages();
});
});
this.renderedSources.add(wrapper + fundingSource ?? '');
this.renderedSources.add(wrapper + (fundingSource ?? ''));
if (typeof paypal !== 'undefined' && typeof paypal.Buttons !== 'undefined') {
buildButtons(paypal);
widgetBuilder.registerButtons(wrapper, buttonsOptions());
widgetBuilder.renderButtons(wrapper);
}
}
@ -138,7 +126,7 @@ class Renderer {
// if (!hasEnabledSeparateGateways) {
// return document.querySelector(wrapper).hasChildNodes();
// }
return this.renderedSources.has(wrapper + fundingSource ?? '');
return this.renderedSources.has(wrapper + (fundingSource ?? ''));
}
disableCreditCardFields() {

75
modules/ppcp-button/resources/js/modules/Renderer/WidgetBuilder.js Normal file
View file

@ -0,0 +1,75 @@
class WidgetBuilder {
constructor() {
this.paypal = null;
this.buttons = new Map();
this.messages = new Map();
document.ppcpWidgetBuilderStatus = () => {
console.log({
buttons: this.buttons,
messages: this.messages,
});
}
}
setPaypal(paypal) {
this.paypal = paypal;
}
registerButtons(wrapper, options) {
this.buttons.set(wrapper, {
wrapper: wrapper,
options: options
});
}
renderButtons(wrapper) {
if (!this.buttons.has(wrapper)) {
return;
}
const entry = this.buttons.get(wrapper);
const btn = this.paypal.Buttons(entry.options);
if (!btn.isEligible()) {
return;
}
btn.render(entry.wrapper);
}
renderAllButtons() {
for (const [wrapper, entry] of this.buttons) {
this.renderButtons(wrapper);
}
}
registerMessages(wrapper, options) {
this.messages.set(wrapper, {
wrapper: wrapper,
options: options
});
}
renderMessages(wrapper) {
if (!this.messages.has(wrapper)) {
return;
}
const entry = this.messages.get(wrapper);
const btn = this.paypal.Messages(entry.options);
btn.render(entry.wrapper);
}
renderAllMessages() {
for (const [wrapper, entry] of this.messages) {
this.renderMessages(wrapper);
}
}
}
export default new WidgetBuilder();