draft for new paypal sdk

PrestaShopCorp · Dec 18, 2023 · 7675404 · 7675404
1 parent 0a792c9
commit 7675404
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 45 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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 = {};
+}