From 76754042d81b0f2ed3390abb2f201939b79f2eec Mon Sep 17 00:00:00 2001 From: Bastien Tafforeau Date: Mon, 18 Dec 2023 10:45:34 +0100 Subject: [PATCH] draft for new paypal sdk --- _dev/js/front/package.json | 1 + .../components/common/paypal-sdk.component.js | 51 ++++++------------- .../common/paypal-sdk.component.spec.js | 13 +++++ _dev/js/front/src/config/paypal-sdk.config.js | 20 ++++---- .../html-templates/prestashop-site-1_7.js | 6 +++ 5 files changed, 46 insertions(+), 45 deletions(-) diff --git a/_dev/js/front/package.json b/_dev/js/front/package.json index 2c0715c3c..859d3dc00 100644 --- a/_dev/js/front/package.json +++ b/_dev/js/front/package.json @@ -33,6 +33,7 @@ "webpack-merge": "^5.3.0" }, "dependencies": { + "@paypal/paypal-js": "^7.1.1", "@ungap/event-target": "^0.2.2", "classlist-polyfill": "^1.2.0", "promise-polyfill": "8.1.3", diff --git a/_dev/js/front/src/components/common/paypal-sdk.component.js b/_dev/js/front/src/components/common/paypal-sdk.component.js index 154a5d454..daaad7609 100644 --- a/_dev/js/front/src/components/common/paypal-sdk.component.js +++ b/_dev/js/front/src/components/common/paypal-sdk.component.js @@ -17,6 +17,7 @@ * @license https://opensource.org/licenses/AFL-3.0 Academic Free License 3.0 (AFL-3.0) */ import { BaseComponent } from '../../core/dependency-injection/base.component'; +import { loadScript } from '@paypal/paypal-js'; export class PayPalSdkComponent extends BaseComponent { static Inject = { @@ -29,44 +30,24 @@ export class PayPalSdkComponent extends BaseComponent { } render() { - const script = document.createElement('script'); - - script.setAttribute('async', ''); - script.setAttribute('id', this.config.id); - script.setAttribute('src', this.config.src); - script.setAttribute('data-namespace', this.config.namespace); - - if (this.config.card3dsEnabled) { - script.setAttribute('data-enable-3ds', ''); - } - - if (this.config.cspNonce) { - script.setAttribute('data-csp-nonce', this.config.cspNonce); - } - - if (this.config.orderId) { - script.setAttribute('data-order-id', this.config.orderId); - } - - if (this.config.partnerAttributionId) { - script.setAttribute('data-partner-attribution-id', this.config.partnerAttributionId); - } - - script.setAttribute('data-client-token', this.props.token); - - document.head.appendChild(script); - this.promise = new Promise((resolve, reject) => { - script.onload = () => { - this.sdk = window[this.config.namespace]; - resolve(this.sdk); - }; - - script.onerror = () => { - reject(); - }; + console.log('script loading'); + loadScript(this.config.sdkConfig) + .then((paypal) => { + console.log('paypal sdk loaded'); + this.sdk = paypal; + resolve(this.sdk); + }) + .catch((error) => { + console.error('paypal sdk loading failed', error); + reject(); + }); }); return this; } + + reload() { + this.render(); + } } diff --git a/_dev/js/front/src/components/common/paypal-sdk.component.spec.js b/_dev/js/front/src/components/common/paypal-sdk.component.spec.js index 942fdcbda..5455427d1 100644 --- a/_dev/js/front/src/components/common/paypal-sdk.component.spec.js +++ b/_dev/js/front/src/components/common/paypal-sdk.component.spec.js @@ -18,6 +18,7 @@ */ import { PayPalSdkConfig } from '../../config/paypal-sdk.config'; import { PayPalSdkComponent } from './paypal-sdk.component'; +import * as PrestashopSite1_7 from '../../../test/mocks/html-templates/prestashop-site-1_7'; function buildDIContainerMock() { return { @@ -129,4 +130,16 @@ describe('src/components/common/paypal-sdk.component.spec.js', () => { } }); }); + + test('::render() with new Sdk', () => { + PrestashopSite1_7.mockCheckoutVars(); + const diContainer = buildDIContainerMock(); + const payPalSdkComponent = new PayPalSdkComponent(diContainer); + + expect(payPalSdkComponent.render()).toBe(payPalSdkComponent); + + return payPalSdkComponent.promise.then(() => { + expect(payPalSdkComponent.sdk).toBeDefined(); + }); + }); }); diff --git a/_dev/js/front/src/config/paypal-sdk.config.js b/_dev/js/front/src/config/paypal-sdk.config.js index 1b5a07ab8..379332e75 100644 --- a/_dev/js/front/src/config/paypal-sdk.config.js +++ b/_dev/js/front/src/config/paypal-sdk.config.js @@ -17,21 +17,21 @@ * @license https://opensource.org/licenses/AFL-3.0 Academic Free License 3.0 (AFL-3.0) */ export const PayPalSdkConfig = { - id: 'ps_checkoutPayPalSdkScript', - namespace: 'ps_checkoutPayPalSdkInstance', - src: window.ps_checkoutPayPalSdkUrl, - card3dsEnabled: window.ps_checkout3dsEnabled, - cspNonce: window.ps_checkoutCspNonce, - orderId: window.ps_checkoutPayPalOrderId, - fundingSource: window.ps_checkoutFundingSource, - clientToken: window.ps_checkoutPayPalClientToken, + sdkConfig: { + dataNamespace: 'ps_checkoutPayPalSdkInstance', + orderId: window.ps_checkoutPayPalOrderId, + dataClientToken: window.ps_checkoutPayPalClientToken, + ...window.ps_checkoutPayPalSdkConfig + }, buttonCustomization: window.ps_checkoutPayPalButtonConfiguration, paymentFieldsCustomization: window.ps_checkout.paymentFieldsCustomization, expressCheckoutButtonCustomization: window.ps_checkoutExpressCheckoutButtonCustomization, hostedFieldsCustomization: window.ps_checkoutHostedFieldsCustomizationConfiguration, - payLaterOfferMessageCustomization: window.ps_checkoutPayLaterOfferMessageCustomization, - payLaterOfferBannerCustomization: window.ps_checkoutPayLaterOfferBannerCustomization, + payLaterOfferMessageCustomization: + window.ps_checkoutPayLaterOfferMessageCustomization, + payLaterOfferBannerCustomization: + window.ps_checkoutPayLaterOfferBannerCustomization, partnerAttributionId: window.ps_checkoutPartnerAttributionId }; diff --git a/_dev/js/front/test/mocks/html-templates/prestashop-site-1_7.js b/_dev/js/front/test/mocks/html-templates/prestashop-site-1_7.js index 16f2b5793..c58abbaa5 100644 --- a/_dev/js/front/test/mocks/html-templates/prestashop-site-1_7.js +++ b/_dev/js/front/test/mocks/html-templates/prestashop-site-1_7.js @@ -33,3 +33,9 @@ export function mockProductPage() { .getElementById('product-details') .setAttribute('data-product', JSON.stringify(PRODUCT_DATASET)); } + +export function mockCheckoutVars() { + window.ps_checkoutPayPalOrderId = ''; + window.ps_checkoutPayPalClientToken = ''; + window.ps_checkoutPayPalSdkConfig = {}; +}