PR changes

commercetools · Feb 8, 2024 · b164684 · b164684
1 parent cffb948
commit b164684
Show file tree

Hide file tree

Showing 13 changed files with 199 additions and 150 deletions.
diff --git a/enabler/.env.template b/enabler/.env.template
@@ -3,4 +3,4 @@ VITE_ADMIN_CLIENT_ID=[client-id]
 VITE_ADMIN_CLIENT_SECRET=[client-secret]
 VITE_ADMIN_SCOPE=manage_project:commercetools-checkout
 VITE_REGION=europe-west1.gcp
-VITE_CART_ID=[cart-id]
+VITE_PROCESSOR_URL=http://localhost:8080
diff --git a/enabler/public/session.js → enabler/dev-utils/session.js b/enabler/public/session.js → enabler/dev-utils/session.js
@@ -34,15 +34,15 @@ const fetchAdminToken = async () => {
   return token.access_token;
 }
 
-const getSessionId = async() => {
+const getSessionId = async(cartId) => {
   const accessToken = await fetchAdminToken();
 
   const sessionMetadata = {
-    cartId: '',
-    allowedPaymentMethods: ['card', 'ideal', 'googlepay'],
+    cartId: cartId,
+    allowedPaymentMethods: ['card'], // add here your allowed methods for development purposes
   };
 
-  const res = await fetch(`http://localhost:3004/api/${projectKey}/sessions`, {
+  const res = await fetch(`https://session.${__VITE_REGION__}.commercetools.com/${projectKey}/sessions`, {
     method: 'POST',
     headers: {
       'Content-Type': 'application/json',

diff --git a/enabler/index.html b/enabler/index.html
@@ -5,41 +5,81 @@
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Vite + TS</title>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
+    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
     <script>
       var __VITE_ADMIN_CLIENT_ID__ = !'%VITE_ADMIN_CLIENT_ID%'.startsWith('%') && '%VITE_ADMIN_CLIENT_ID%';
       var __VITE_ADMIN_CLIENT_SECRET__ = !'%VITE_ADMIN_CLIENT_SECRET%'.startsWith('%') && '%VITE_ADMIN_CLIENT_SECRET%';
       var __VITE_ADMIN_SCOPE__ = !'%VITE_ADMIN_SCOPE%'.startsWith('%') && '%VITE_ADMIN_SCOPE%';
       var __VITE_REGION__ = !'%VITE_REGION%'.startsWith('%') && '%VITE_REGION%';
-      var __VITE_CART_ID__ = !'%VITE_CART_ID%'.startsWith('%') && '%VITE_CART_ID%';
+      var __VITE_PROCESSOR_URL__ = !'%VITE_PROCESSOR_URL%'.startsWith('%') && '%VITE_PROCESSOR_URL%';
     </script>
-    <script src="./session.js"></script>
+    <script src="../dev-utils/session.js"></script>
   </head>
   <body>
-    <div id="app"></div>
-    <script type="module">
-      import { Connector } from '/src/main.ts';
-
-      const sessionId = await getSessionId();
-      const connectorUrl = "https://service-ce9d8088-b10c-42df-8eb1-63f1fde80093.europe-west1.gcp.preview.commercetools.app";
-
-      const connector = new Connector({
-          connectorUrl: connectorUrl,
-          sessionId: sessionId,
-          config: {
-
-          },
-          onComplete: ({ isSuccess, paymentReference }) => {
-            console.log('onComplete', { isSuccess, paymentReference });
-          },
-      });
-
-      connector.createComponent('card', {
-        config: {},
-      })
-      .then(e => e.mount('#card-component'));
 
-    </script>
 
-    <div id="card-component"></div>
+    <main role="main">
+
+      <section class="jumbotron text-center">
+        <div class="container">
+          <form action="/action_page.php">
+            <div class="text-center mb-4">
+              <h1 class="h3 mb-3 font-weight-normal">Dev Site</h1>
+              <p>Use this site for development purposes</p>
+            </div>
+            <div class="form-group">
+              <label for="cartId">Cart ID:</label>
+              <input type="text" class="form-control" id="cartId">
+            </div>
+            <button id="createCheckout" class="btn btn-lg btn-primary btn-block" type="submit">Create checkout</button>
+          </form>
+        </div>
+      </section>
+
+      <div class="album py-5 bg-light">
+        <div class="container">
+
+          <script type="module">
+            import { Enabler } from '/src/main.ts';
+
+            document.getElementById('createCheckout').addEventListener('click', async (event) => {
+              event.preventDefault();
+              const cartId = document.getElementById('cartId').value;
+              const sessionId = await getSessionId(cartId);
+              const processorUrl = "https://service-ce9d8088-b10c-42df-8eb1-63f1fde80093.europe-west1.gcp.preview.commercetools.app";
+
+              const enabler = new Enabler({
+                processorUrl: __VITE_PROCESSOR_URL__,
+                sessionId: sessionId,
+                config: {
+
+                },
+                onComplete: ({ isSuccess, paymentReference }) => {
+                  console.log('onComplete', { isSuccess, paymentReference });
+                },
+              });
+
+              enabler.createComponent('card', {
+                config: {},
+              })
+              .then(e => e.mount('#card-component'));
+            });
+
+          </script>
+
+          <div id="card-component"></div>
+        </div>
+      </div>
+
+    </main>
+
+
+
+
+
+
   </body>
 </html>
diff --git a/enabler/package.json b/enabler/package.json
@@ -11,7 +11,6 @@
     "serve": "npm run build && npx http-server dist --port=3000  --cors"
   },
   "dependencies": {
-    "@adyen/adyen-web": "5.51.0",
     "http-server": "^14.1.1"
   },
   "devDependencies": {

diff --git a/enabler/public/README.txt b/enabler/public/README.txt
@@ -0,0 +1 @@
+Use this folder to include static assets
diff --git a/enabler/public/vite.svg b/enabler/public/vite.svg
diff --git a/enabler/src/components/base.ts b/enabler/src/components/base.ts
@@ -1,37 +1,39 @@
 import { FakeSdk } from '../FakeSdk';
-import { ComponentOptions, PaymentMethod, PaymentResult } from '../payment-connector/paymentConnector';
-
+import { ComponentOptions, PaymentComponent, PaymentMethod, PaymentResult } from '../payment-enabler/paymentEnabler';
 
 export type ElementOptions = {
   paymentMethod: PaymentMethod;
-  isOffsite?: boolean;
 };
 
 export type BaseOptions = {
   sdk: FakeSdk;
-  connectorUrl: string;
+  processorUrl: string;
   sessionId: string;
   environment: string;
-  config: any;
+  config: {
+    showPayButton?: boolean;
+  };
   onComplete: (result: PaymentResult) => void;
   onError: (error?: any) => void;
 }
 
 /**
  * Base Web Component
  */
-export abstract class BaseComponent {
+export abstract class BaseComponent implements PaymentComponent {
   protected paymentMethod: ElementOptions['paymentMethod'];
   protected sdk: FakeSdk;
-  protected connectorUrl: BaseOptions['connectorUrl'];
+  protected processorUrl: BaseOptions['processorUrl'];
   protected sessionId: BaseOptions['sessionId'];
   protected environment: BaseOptions['environment'];
   protected config: BaseOptions['config'];
   protected showPayButton: boolean;
+  protected onComplete: (result: PaymentResult) => void;
+  protected onError: (error?: any) => void;
 
   constructor(baseOptions: BaseOptions, componentOptions: ComponentOptions) {
     this.sdk = baseOptions.sdk;
-    this.connectorUrl = baseOptions.connectorUrl;
+    this.processorUrl = baseOptions.processorUrl;
     this.sessionId = baseOptions.sessionId;
     this.environment = baseOptions.environment;
     this.config = baseOptions.config;
@@ -43,12 +45,17 @@ export abstract class BaseComponent {
           true;
   }
 
-  async updated() {}
-
   abstract submit(): void;
 
   abstract mount(selector: string): void ;
 
-  onComplete: (result: PaymentResult) => void;
-  onError: (error?: any) => void;
+  showValidation?(): void;
+  isValid?(): boolean;
+  getState?(): {
+    card?: {
+      endDigits?: string;
+      brand?: string;
+      expiryDate? : string;
+    }
+  };
 }
diff --git a/enabler/src/components/payment-methods/card/card.ts b/enabler/src/components/payment-methods/card/card.ts
@@ -1,5 +1,5 @@
 import { BaseComponent, BaseOptions } from '../../base';
-import { ComponentOptions } from '../../../payment-connector/paymentConnector';
+import { ComponentOptions } from '../../../payment-enabler/paymentEnabler';
 import styles from '../../../style/style.module.scss';
 import inputFieldStyles from '../../../style/inputField.module.scss';
 import buttonStyles from '../../../style/button.module.scss';
@@ -39,10 +39,9 @@ export class Card extends BaseComponent {
             expiryYear: getInput(fieldIds.expiryDate).value.split('/')[1],
             cvc: getInput(fieldIds.cvv).value,
             holderName: getInput(fieldIds.holderName).value,
-        },
-        "paymentReference": "1234",
+        }
       };
-      const response = await fetch(this.connectorUrl + '/payments', {
+      const response = await fetch(this.processorUrl + '/payments', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json', 'X-Session-Id': this.sessionId },
         body: JSON.stringify(requestData),
@@ -117,9 +116,11 @@ export class Card extends BaseComponent {
 
   getState() {
     return {
-      endDigits: getInput(fieldIds.cardNumber).value.slice(-4),
-      brand: getCardBrand(getInput(fieldIds.cardNumber).value),
-      expiryDate: getInput(fieldIds.expiryDate).value,
+      card: {
+        endDigits: getInput(fieldIds.cardNumber).value.slice(-4),
+        brand: getCardBrand(getInput(fieldIds.cardNumber).value),
+        expiryDate: getInput(fieldIds.expiryDate).value,
+      },
     };
   }
 }
diff --git a/enabler/src/main.ts b/enabler/src/main.ts
@@ -1,3 +1,3 @@
-import { MockPaymentConnector } from './payment-connector/mockPaymentConnector';
+import { MockPaymentEnabler } from './payment-enabler/mockPaymentEnabler';
 
-export { MockPaymentConnector as Connector };
+export { MockPaymentEnabler as Enabler };
diff --git a/enabler/src/payment-connector/mockPaymentConnector.ts b/enabler/src/payment-connector/mockPaymentConnector.ts
diff --git a/enabler/src/payment-connector/paymentConnector.ts b/enabler/src/payment-connector/paymentConnector.ts