Merge pull request #1 from oscamsmile/main

Update Logo and README file

Author: RodolpheGarin

README.md

@@ -1,9 +1,10 @@
-# connect-payment-integration-monext
+# [![Monext Logo](doc/logo-monext.svg)](https://www.monext.fr/)
+
+# Monext Commercetools Connector
 
 ---
 
 ## Table of Content
-----
 
 - [Overview](#overview)
 - [Template Features](#template-features)
@@ -44,7 +45,7 @@ Their values are taken as input as environment variables/configuration for conne
 
 An API key provided by Monext is necessary to be configured so that the requests from the connect application can be authenticated by Monext platform within the integration. It's value is taken as input as environment variables/configuration for connect with variable name `MONEXT_API_KEY`.
 
-Additionally, some other configuration options provided by Monext and defined by the marchant are required. Their values are taken as input as environment variables/configuration for connect with variable names `MONEXT_ENVIRONMENT`, `MONEXT_POINT_OF_SALE_REF`, `MONEXT_CAPTURE_TYPE`.
+Additionally, some other configuration options provided by Monext and defined by the merchant are required. Their values are taken as input as environment variables/configuration for connect with variable names `MONEXT_ENVIRONMENT`, `MONEXT_POINT_OF_SALE_REF`, `MONEXT_CAPTURE_TYPE`.
 
 ## Getting started
 
@@ -148,6 +149,7 @@ Here you can see the details about the variables in configuration:
 ```
 // string - single REF for all stores or for all commercetools project.
 MONEXT_POINT_OF_SALE_REF: ref1;
+
 // string JSON valid - if multiple refs for multiple stores
 #MONEXT_POINT_OF_SALE_REF: {
    "storeKey1": "ref1",
@@ -160,6 +162,7 @@ MONEXT_POINT_OF_SALE_REF: ref1;
 ```
 // string - single capture type for all stores or for all commercetools project
 MONEXT_CAPTURE_TYPE: "AUTOMATIC";
+
 // string JSON valid - if multiple Capture types for multiple stores
 #MONEXT_CAPTURE_TYPE: {
    "storeKey1": "AUTOMATIC",
@@ -172,6 +175,7 @@ MONEXT_CAPTURE_TYPE: "AUTOMATIC";
 ```
 // string - single environment for all stores or for all commercetools project
 MONEXT_ENVIRONMENT: "HOMOLOGATION";
+
 // string JSON valid - if multiple environments for multiple stores
 #MONEXT_ENVIRONMENT: {
    "storeKey1": "HOMOLOGATION",

processor/logo-monext.svg doc/logo-monext.svgprocessor/logo-monext.svg renamed to doc/logo-monext.svg

@@ -43,7 +43,7 @@ const getSessionId = async (cartId) => {
 
   const sessionMetadata = {
     processorUrl: __VITE_PROCESSOR_URL__,
-    allowedPaymentMethods: ["monext"], // add here your allowed methods for development purposes
+    merchantReturnUrl: __VITE_RETURN_URL__,
   };
 
   const url = `${__VITE_CTP_SESSION_URL__}/${projectKey}/sessions`;

enabler/dev-utils/session.js

@@ -61,13 +61,25 @@
               <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 class="row">
+              <div class="form-group col-md-6">
+                <div>
+                  <label for="cartId">Cart ID:</label>
+                  <input
+                    type="text"
+                    class="form-control"
+                    id="cartId"
+                  />
+                </div>
+              </div>
+              <div class="form-group col-md-6">
+                <label for="paymentMethod">Payment Method:</label>
+                <select
+                  class="form-control"
+                  id="paymentMethod"
+                  required
+                ></select>
+              </div>
             </div>
             <button
               id="createCheckout"
@@ -85,12 +97,61 @@ <h1 class="h3 mb-3 font-weight-normal">Dev Site</h1>
           <script type="module">
             import { Enabler } from "/src/main.ts";
 
+            document.addEventListener("DOMContentLoaded", async () => {
+              const paymentMethodSelect =
+                document.getElementById("paymentMethod");
+              const response = await fetch("http://localhost:9000/jwt/token", {
+                method: "POST",
+                headers: {
+                  "Content-Type": "application/json",
+                },
+                body: JSON.stringify({
+                  iss: "https://mc-api.europe-west1.gcp.commercetools.com",
+                  sub: "subject",
+                  "https://mc-api.europe-west1.gcp.commercetools.com/claims/project_key": `${__VITE_CTP_PROJECT_KEY__}`,
+                }),
+              });
+
+              const accessToken = await response.json();
+
+              const res = await fetch(
+                `${__VITE_PROCESSOR_URL__}/operations/payment-components`,
+                {
+                  method: "GET",
+                  headers: {
+                    Authorization: `Bearer ${accessToken.token}`,
+                  },
+                }
+              );
+              const paymentMethods = await res.json();
+              paymentMethods.components.forEach((method) => {
+                const option = document.createElement("option");
+                option.value = method.type;
+                option.textContent = method.type;
+                paymentMethodSelect.appendChild(option);
+              });
+              paymentMethods.dropins.forEach((method) => {
+                const option = document.createElement("option");
+                option.value = `${method.type}`;
+                option.textContent = `dropin-${method.type}`;
+                paymentMethodSelect.appendChild(option);
+              });
+            });
+
             document
               .getElementById("createCheckout")
               .addEventListener("click", async (event) => {
                 event.preventDefault();
                 const cartId = document.getElementById("cartId").value;
-                const sessionId = await getSessionId(cartId);
+
+                const paymentMethodSelect =
+                  document.getElementById("paymentMethod");
+                const selectedValue = paymentMethodSelect.value;
+                const selectedText =
+                  paymentMethodSelect.options[paymentMethodSelect.selectedIndex]
+                    .text;
+                const isDropin = selectedText.startsWith("dropin");
+                const sessionId = await getSessionId(cartId, isDropin);
 
                 const enabler = new Enabler({
                   processorUrl: __VITE_PROCESSOR_URL__,
@@ -106,14 +167,44 @@ <h1 class="h3 mb-3 font-weight-normal">Dev Site</h1>
                   },
                 });
 
-                enabler.createComponentBuilder("monext").then((builder) => {
-                  const paymentElement = builder.build({
-                    showPayButton: true,
+                let builder;
+
+                if (isDropin) {
+                  builder = await enabler.createDropinBuilder(selectedValue);
+                  const component = await builder.build({
+                    showPayButton: !builder.dropinHasSubmit,
+                    onDropinReady: async () => {
+                      console.log("Dropin Ready");
+                    },
+                    onPayButtonClick: async () => {
+                      // to be used for validation
+                      const termsChecked =
+                        document.getElementById("termsCheckbox").checked;
+                      if (!termsChecked) {
+                        event.preventDefault();
+                        alert("You must agree to the terms and conditions.");
+                        return Promise.reject("error-occurred");
+                      }
+                      return Promise.resolve(); // change to true, to test payment flow
+                    },
                   });
-                  paymentElement.mount("#monext-component");
-                });
+                  component.mount("#monext-component");
+                }
               });
           </script>
+          <div class="form-group form-check">
+            <input
+              type="checkbox"
+              class="form-check-input"
+              id="termsCheckbox"
+              required
+            />
+            <label
+              class="form-check-label"
+              for="termsCheckbox"
+              >I agree to the terms and conditions</label
+            >
+          </div>
           <div id="monext-component"></div>
         </div>
       </div>