@danielseres9/adobe-commerce-checkout 0.1.0 → 0.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@danielseres9/adobe-commerce-checkout",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "Worldpay integration package for Adobe Commerce Checkout Drop-ins",
   "type": "module",
   "main": "./src/index.js",

package/src/app-builder-client.js

@@ -1,10 +1,37 @@
-import { WORLDPAY_PAYMENT_METHOD } from './constants.js';
+import {
+  WORLDPAY_DIRECT_PAYMENT_METHOD,
+  WORLDPAY_PAYMENT_METHOD,
+} from './constants.js';
 
 export function getWorldpayMethodConfig(method) {
   return method?.additionalData?.oope_payment_method_config
     ?? method?.oope_payment_method_config;
 }
 
+export function getWorldpayCustomConfig(methodOrAdditionalData) {
+  const config = methodOrAdditionalData?.additionalData?.oope_payment_method_config
+    ?? methodOrAdditionalData?.oope_payment_method_config
+    ?? methodOrAdditionalData;
+  const entries = config?.custom_config ?? [];
+
+  if (!Array.isArray(entries)) return {};
+
+  return Object.fromEntries(
+    entries
+      .filter(({ key, value }) => key && value != null)
+      .map(({ key, value }) => [key, value]),
+  );
+}
+
+export function getWorldpayDirectConfig(methodOrAdditionalData) {
+  const customConfig = getWorldpayCustomConfig(methodOrAdditionalData);
+
+  return {
+    checkoutId: customConfig.checkout_id ?? customConfig.checkoutId,
+    environment: customConfig.environment ?? 'try',
+  };
+}
+
 export function getWorldpayBackendUrl(cartData, paymentMethodCode) {
   const selectedMethod = cartData?.selectedPaymentMethod;
   const availableMethod = cartData?.availablePaymentMethods?.find(
@@ -67,6 +94,32 @@ export function buildWorldpayPaymentPayload({
   };
 }
 
+export function buildWorldpayDirectPaymentPayload({
+  orderData,
+  returnUrl,
+  appBuilderUrl,
+  merchantConfigId = getMerchantConfigId(appBuilderUrl),
+  paymentMethod = WORLDPAY_DIRECT_PAYMENT_METHOD,
+  sessionState,
+}) {
+  const payload = buildWorldpayPaymentPayload({
+    orderData,
+    returnUrl,
+    appBuilderUrl,
+    merchantConfigId,
+    paymentMethod,
+  });
+
+  if (!sessionState) {
+    throw new Error('Worldpay direct session state missing.');
+  }
+
+  return {
+    ...payload,
+    sessionState,
+  };
+}
+
 export async function createWorldpayPayment({
   appBuilderUrl,
   orderData,
@@ -113,3 +166,42 @@ export async function createWorldpayPayment({
     data,
   };
 }
+
+export async function createWorldpayDirectPayment({
+  appBuilderUrl,
+  orderData,
+  returnUrl,
+  merchantConfigId,
+  paymentMethod = WORLDPAY_DIRECT_PAYMENT_METHOD,
+  sessionState,
+  fetchImpl = getDefaultFetch(),
+}) {
+  if (!appBuilderUrl) {
+    throw new Error('Worldpay backend integration URL missing.');
+  }
+
+  if (typeof fetchImpl !== 'function') {
+    throw new Error('Worldpay fetch implementation missing.');
+  }
+
+  const response = await fetchImpl(appBuilderUrl, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify(buildWorldpayDirectPaymentPayload({
+      orderData,
+      returnUrl,
+      appBuilderUrl,
+      merchantConfigId,
+      paymentMethod,
+      sessionState,
+    })),
+  });
+
+  if (!response.ok) {
+    throw new Error('Worldpay direct payment creation failed.');
+  }
+
+  return response.json();
+}

package/src/checkout.js

@@ -1,10 +1,24 @@
-import { WORLDPAY_PAYMENT_METHOD, isWorldpayPaymentMethod } from './constants.js';
 import {
+  WORLDPAY_DIRECT_PAYMENT_METHOD,
+  WORLDPAY_PAYMENT_METHOD,
+  isWorldpayDirectPaymentMethod,
+  isWorldpayPaymentMethod,
+} from './constants.js';
+import {
+  createWorldpayDirectPayment,
   createWorldpayPayment,
   getAbsoluteUrl,
+  getWorldpayDirectConfig,
   getWorldpayBackendUrl,
 } from './app-builder-client.js';
 
+const WORLDPAY_CHECKOUT_SDK_URLS = {
+  try: 'https://try.access.worldpay.com/access-checkout/v2/checkout.js',
+  production: 'https://access.worldpay.com/access-checkout/v2/checkout.js',
+};
+
+let worldpayCheckoutSdkPromise;
+
 function getDefaultLocation() {
   return typeof window !== 'undefined' ? window.location : undefined;
 }
@@ -13,6 +27,317 @@ function getDefaultOrigin() {
   return typeof window !== 'undefined' ? window.location?.origin : undefined;
 }
 
+function getDefaultDocument() {
+  return typeof document !== 'undefined' ? document : undefined;
+}
+
+function getDefaultWindow() {
+  return typeof window !== 'undefined' ? window : undefined;
+}
+
+function afterNextFrame(callback, windowRef = getDefaultWindow()) {
+  if (windowRef?.requestAnimationFrame) {
+    windowRef.requestAnimationFrame(callback);
+    return;
+  }
+
+  setTimeout(callback, 0);
+}
+
+function getWorldpayCheckoutSdkUrl(environment = 'try') {
+  return WORLDPAY_CHECKOUT_SDK_URLS[environment] ?? WORLDPAY_CHECKOUT_SDK_URLS.try;
+}
+
+function loadWorldpayCheckoutSdk({
+  environment = 'try',
+  documentRef = getDefaultDocument(),
+  windowRef = getDefaultWindow(),
+} = {}) {
+  if (!documentRef || !windowRef) {
+    return Promise.reject(new Error('Worldpay Checkout SDK requires a browser document.'));
+  }
+
+  if (windowRef.Worldpay?.checkout?.init) {
+    return Promise.resolve(windowRef.Worldpay);
+  }
+
+  if (!worldpayCheckoutSdkPromise) {
+    worldpayCheckoutSdkPromise = new Promise((resolve, reject) => {
+      const script = documentRef.createElement('script');
+      script.src = getWorldpayCheckoutSdkUrl(environment);
+      script.async = true;
+      script.onload = () => {
+        if (windowRef.Worldpay?.checkout?.init) {
+          resolve(windowRef.Worldpay);
+        } else {
+          reject(new Error('Worldpay Checkout SDK loaded without checkout API.'));
+        }
+      };
+      script.onerror = () => reject(new Error('Worldpay Checkout SDK failed to load.'));
+      documentRef.head.appendChild(script);
+    });
+  }
+
+  return worldpayCheckoutSdkPromise;
+}
+
+function toIdSuffix() {
+  return Math.random().toString(36).slice(2, 10);
+}
+
+function createWorldpayDirectForm(documentRef = getDefaultDocument()) {
+  const suffix = toIdSuffix();
+  const form = documentRef.createElement('form');
+  form.className = 'worldpay-direct-form';
+  form.id = `worldpay-direct-form-${suffix}`;
+  form.noValidate = true;
+  form.addEventListener('submit', (event) => event.preventDefault());
+
+  form.innerHTML = `
+    <div class="worldpay-direct-header">
+      <span class="worldpay-direct-title">Card details</span>
+      <span class="worldpay-direct-secure">Secured by Worldpay</span>
+    </div>
+    <div class="worldpay-direct-field-group">
+      <label class="worldpay-direct-label" for="worldpay-direct-pan-${suffix}">Card number</label>
+      <section id="worldpay-direct-pan-${suffix}" class="worldpay-direct-field"></section>
+    </div>
+    <div class="worldpay-direct-row">
+      <div class="worldpay-direct-field-group">
+        <label class="worldpay-direct-label" for="worldpay-direct-expiry-${suffix}">Expiry date</label>
+        <section id="worldpay-direct-expiry-${suffix}" class="worldpay-direct-field"></section>
+      </div>
+      <div class="worldpay-direct-field-group">
+        <label class="worldpay-direct-label" for="worldpay-direct-cvv-${suffix}">Security code</label>
+        <section id="worldpay-direct-cvv-${suffix}" class="worldpay-direct-field"></section>
+      </div>
+    </div>
+    <p class="worldpay-direct-error" hidden></p>
+  `;
+
+  const style = documentRef.createElement('style');
+  style.textContent = `
+    .worldpay-direct-form {
+      background: #f7f9fb;
+      border: 1px solid #d8dee8;
+      border-radius: 8px;
+      box-sizing: border-box;
+      display: grid;
+      gap: 12px;
+      max-width: 520px;
+      padding: 16px;
+    }
+
+    .worldpay-direct-header {
+      align-items: baseline;
+      display: flex;
+      flex-wrap: wrap;
+      gap: 8px 12px;
+      justify-content: space-between;
+      margin-bottom: 2px;
+    }
+
+    .worldpay-direct-title {
+      color: #111827;
+      font-size: 16px;
+      font-weight: 700;
+    }
+
+    .worldpay-direct-secure {
+      color: #5f6f86;
+      font-size: 12px;
+      font-weight: 600;
+    }
+
+    .worldpay-direct-row {
+      display: grid;
+      gap: 12px;
+      grid-template-columns: 1fr;
+    }
+
+    .worldpay-direct-label {
+      display: block;
+      font-size: 14px;
+      font-weight: 600;
+      margin-bottom: 6px;
+    }
+
+    .worldpay-direct-field {
+      background: #fff;
+      border: 1px solid #aeb8c7;
+      border-radius: 6px;
+      box-sizing: border-box;
+      height: 46px;
+      overflow: hidden;
+      padding: 0 12px;
+      transition: border-color 120ms ease, box-shadow 120ms ease, background-color 120ms ease;
+    }
+
+    .worldpay-direct-field iframe {
+      border: 0;
+      display: block;
+      height: 100%;
+      width: 100%;
+    }
+
+    .worldpay-direct-field.is-onfocus {
+      background: #fff;
+      border-color: #0f62fe;
+      box-shadow: 0 0 0 2px rgba(15, 98, 254, 0.16);
+    }
+
+    .worldpay-direct-field.is-valid {
+      border-color: #198754;
+    }
+
+    .worldpay-direct-field.is-invalid {
+      border-color: #b42318;
+      box-shadow: 0 0 0 2px rgba(180, 35, 24, 0.12);
+    }
+
+    .worldpay-direct-error {
+      color: #b42318;
+      font-size: 14px;
+      margin: 0;
+    }
+
+    @media (min-width: 600px) {
+      .worldpay-direct-row {
+        grid-template-columns: 1fr 1fr;
+      }
+    }
+  `;
+  form.prepend(style);
+
+  return {
+    form,
+    selectors: {
+      form: `#${form.id}`,
+      pan: `#worldpay-direct-pan-${suffix}`,
+      expiry: `#worldpay-direct-expiry-${suffix}`,
+      cvv: `#worldpay-direct-cvv-${suffix}`,
+    },
+    error: form.querySelector('.worldpay-direct-error'),
+  };
+}
+
+function showWorldpayDirectError(errorElement, error) {
+  if (!errorElement) return;
+
+  errorElement.textContent = error?.message ?? 'Worldpay card fields are unavailable.';
+  errorElement.hidden = false;
+}
+
+function initializeWorldpayDirectCheckout({
+  additionalData,
+  formRef,
+  elements,
+  documentRef = getDefaultDocument(),
+  windowRef = getDefaultWindow(),
+}) {
+  const { checkoutId, environment } = getWorldpayDirectConfig(additionalData);
+  const { form, selectors, error } = elements ?? createWorldpayDirectForm(documentRef);
+
+  if (!checkoutId) {
+    showWorldpayDirectError(error, new Error('Worldpay checkout id is missing.'));
+    return { form };
+  }
+
+  const checkoutPromise = loadWorldpayCheckoutSdk({ environment, documentRef, windowRef })
+    .then((Worldpay) => new Promise((resolve, reject) => {
+      Worldpay.checkout.init(
+        {
+          id: checkoutId,
+          form: selectors.form,
+          fields: {
+            pan: {
+              selector: selectors.pan,
+              placeholder: '4444 3333 2222 1111',
+            },
+            expiry: {
+              selector: selectors.expiry,
+              placeholder: 'MM/YY',
+            },
+            cvv: {
+              selector: selectors.cvv,
+              placeholder: '123',
+            },
+          },
+          accessibility: {
+            ariaLabel: {
+              pan: 'Card number',
+              expiry: 'Expiry date',
+              cvv: 'Security code',
+            },
+            lang: {
+              locale: 'en-GB',
+            },
+          },
+          enablePanFormatting: true,
+          styles: {
+            input: {
+              color: '#111827',
+              'font-family': 'Arial, Helvetica, sans-serif',
+              'font-size': '16px',
+              'font-weight': '400',
+              'letter-spacing': '0',
+              'line-height': '20px',
+            },
+            'input#pan': {
+              'letter-spacing': '1px',
+            },
+            'input.is-onfocus': {
+              color: '#111827',
+            },
+            'input.is-invalid': {
+              color: '#b42318',
+            },
+          },
+        },
+        (initError, checkout) => {
+          if (initError) {
+            reject(initError);
+            return;
+          }
+          resolve(checkout);
+        },
+      );
+    }))
+    .catch((sdkError) => {
+      showWorldpayDirectError(error, sdkError);
+      throw sdkError;
+    });
+
+  if (formRef) {
+    formRef.current = {
+      clear: async () => {
+        const checkout = await checkoutPromise;
+        return new Promise((resolve) => {
+          checkout.clearForm(resolve);
+        });
+      },
+      generateSessionState: async () => {
+        const checkout = await checkoutPromise;
+        return new Promise((resolve, reject) => {
+          checkout.generateSessionState((sessionError, sessionState) => {
+            if (sessionError) {
+              reject(sessionError);
+              return;
+            }
+            resolve(sessionState);
+          });
+        });
+      },
+      remove: async () => {
+        const checkout = await checkoutPromise;
+        checkout.remove?.();
+      },
+    };
+  }
+
+  return { form };
+}
+
 export async function startWorldpayPayment({
   cartData,
   orderData,
@@ -78,3 +403,87 @@ export async function handleWorldpayPlaceOrder({
 
   return true;
 }
+
+export function renderWorldpayDirectFields(ctx, { formRef } = {}) {
+  const elements = createWorldpayDirectForm();
+
+  ctx.replaceHTML(elements.form);
+
+  afterNextFrame(() => {
+    initializeWorldpayDirectCheckout({
+      additionalData: ctx.additionalData,
+      formRef,
+      elements,
+    });
+  });
+}
+
+export async function startWorldpayDirectPayment({
+  cartData,
+  orderData,
+  returnUrl,
+  sessionState,
+  paymentMethodCode = WORLDPAY_DIRECT_PAYMENT_METHOD,
+  merchantConfigId,
+  fetchImpl,
+}) {
+  const appBuilderUrl = getWorldpayBackendUrl(cartData, paymentMethodCode);
+
+  return createWorldpayDirectPayment({
+    appBuilderUrl,
+    orderData,
+    returnUrl,
+    merchantConfigId,
+    paymentMethod: paymentMethodCode,
+    sessionState,
+    fetchImpl,
+  });
+}
+
+export async function handleWorldpayDirectPlaceOrder({
+  cartId,
+  code,
+  cartData,
+  buildOrderUrl,
+  placeOrder,
+  formRef,
+  merchantConfigId,
+  fetchImpl,
+  locationRef = getDefaultLocation(),
+  origin = getDefaultOrigin(),
+}) {
+  if (!isWorldpayDirectPaymentMethod(code)) return false;
+
+  if (typeof buildOrderUrl !== 'function') {
+    throw new Error('Worldpay order URL builder missing.');
+  }
+
+  if (typeof placeOrder !== 'function') {
+    throw new Error('Worldpay place order function missing.');
+  }
+
+  if (typeof formRef?.current?.generateSessionState !== 'function') {
+    throw new Error('Worldpay direct card fields are not ready.');
+  }
+
+  const sessionState = await formRef.current.generateSessionState();
+  const orderData = await placeOrder(cartId);
+  const returnUrl = getAbsoluteUrl(buildOrderUrl(orderData), origin);
+  const data = await startWorldpayDirectPayment({
+    cartData,
+    orderData,
+    returnUrl,
+    sessionState,
+    paymentMethodCode: code,
+    merchantConfigId,
+    fetchImpl,
+  });
+
+  const redirectUrl = data.redirectUrl ?? data.redirect_url ?? returnUrl;
+
+  if (locationRef && redirectUrl) {
+    locationRef.href = redirectUrl;
+  }
+
+  return true;
+}

package/src/constants.js

@@ -1,7 +1,14 @@
 export const WORLDPAY_PAYMENT_METHOD = 'Worldpay';
 export const WORLDPAY_LOCAL_PAYMENT_METHOD_PREFIX = 'WorldpayLocal';
+export const WORLDPAY_DIRECT_PAYMENT_METHOD = 'WorldpayDirect';
+export const WORLDPAY_DIRECT_LOCAL_PAYMENT_METHOD_PREFIX = 'WorldpayDirectLocal';
 
 export function isWorldpayPaymentMethod(code) {
   return code === WORLDPAY_PAYMENT_METHOD
     || String(code ?? '').startsWith(WORLDPAY_LOCAL_PAYMENT_METHOD_PREFIX);
 }
+
+export function isWorldpayDirectPaymentMethod(code) {
+  return code === WORLDPAY_DIRECT_PAYMENT_METHOD
+    || String(code ?? '').startsWith(WORLDPAY_DIRECT_LOCAL_PAYMENT_METHOD_PREFIX);
+}

package/src/index.js

@@ -1,6 +1,9 @@
 export {
+  WORLDPAY_DIRECT_LOCAL_PAYMENT_METHOD_PREFIX,
+  WORLDPAY_DIRECT_PAYMENT_METHOD,
   WORLDPAY_LOCAL_PAYMENT_METHOD_PREFIX,
   WORLDPAY_PAYMENT_METHOD,
+  isWorldpayDirectPaymentMethod,
   isWorldpayPaymentMethod,
 } from './constants.js';
 export { worldpayCheckoutGqlOperations } from './gql.js';
@@ -10,15 +13,22 @@ export {
   worldpayOrderDataModelTransformer,
 } from './transformers.js';
 export {
+  buildWorldpayDirectPaymentPayload,
   buildWorldpayPaymentPayload,
+  createWorldpayDirectPayment,
   createWorldpayPayment,
   getAbsoluteUrl,
   getMerchantConfigId,
   getOrderEntityId,
+  getWorldpayCustomConfig,
   getWorldpayBackendUrl,
+  getWorldpayDirectConfig,
   getWorldpayMethodConfig,
 } from './app-builder-client.js';
 export {
+  handleWorldpayDirectPlaceOrder,
   handleWorldpayPlaceOrder,
+  renderWorldpayDirectFields,
+  startWorldpayDirectPayment,
   startWorldpayPayment,
 } from './checkout.js';