I am trying to figure out how to extend the js class of the native module payment_paypal, so that the PayLater option, that i have activated in PayPal get activated.
In the native js code in /addons/payment_paypal/.../payment_form.js:
import paymentForm from '@payment/js/payment_form';paymentForm.include({//...//... async _prepareInlineForm(providerId, providerCode, paymentOptionId, paymentMethodCode, flow) { if (providerCode !== 'paypal') { this._super(...arguments); return; } this._hideInputs(); this._setPaymentFlow('direct'); document.getElementById('o_paypal_button').classList.remove('d-none'); document.getElementById('o_paypal_loading').classList.remove('d-none'); // Check if instantiation of the component is needed. this.paypalData ??= {}; // Store the component of each instantiated payment method. const currentPayPalData = this.paypalData[paymentOptionId] if (this.selectedOptionId && this.selectedOptionId !== paymentOptionId) { this.paypalData[this.selectedOptionId]['paypalButton'].hide() } if (currentPayPalData && this.selectedOptionId !== paymentOptionId) { const paypalSDKURL = this.paypalData[paymentOptionId]['sdkURL'] const paypalButton = this.paypalData[paymentOptionId]['paypalButton'] await loadJS(paypalSDKURL); paypalButton.show(); } else if (!currentPayPalData) { this.paypalData[paymentOptionId] = {} const radio = document.querySelector('input[name="o_payment_radio"]:checked'); if (radio) { this.inlineFormValues = JSON.parse(radio.dataset['paypalInlineFormValues']); this.paypalColor = radio.dataset['paypalColor'] } // https://developer.paypal.com/sdk/js/configuration/#link-queryparameters const { client_id, currency_code } = this.inlineFormValues const paypalSDKURL = `https://www.paypal.com/sdk/js?client-id=${ client_id}&components=buttons¤cy=${currency_code}&intent=capture` await loadJS(paypalSDKURL); const paypalButton = paypal.Buttons({ // https://developer.paypal.com/sdk/js/reference fundingSource: paypal.FUNDING.PAYPAL, style: { // https://developer.paypal.com/sdk/js/reference/#link-style color: this.paypalColor, label: 'paypal', disableMaxWidth: true, borderRadius: 6, }, createOrder: this._paypalOnClick.bind(this), onApprove: this._paypalOnApprove.bind(this), onCancel: this._paypalOnCancel.bind(this), onError: this._paypalOnError.bind(this), }); this.paypalData[paymentOptionId]['sdkURL'] = paypalSDKURL; this.paypalData[paymentOptionId]['paypalButton'] = paypalButton; paypalButton.render('#o_paypal_button'); } document.getElementById('o_paypal_loading').classList.add('d-none'); this.selectedOptionId = paymentOptionId; },
In my custom module payment_paypal_custom, if i try to extend this js class using paymentForm.include
to override the function _prepareInlineForm
in order to add parameters in the sdkURL, the native function of the payment_paypal
module will be loaded anyway, so that paypal sdk will be loaded twice. And i can not override complettely this function without calling _super()
, because _super()
enables the loading of the other payment methods too (Stripe...)!
Any idea how to extend it the right way ?