@danielseres9/adobe-commerce-checkout 0.1.1 → 0.1.2

package/package.json

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

package/src/checkout.js

@@ -35,6 +35,15 @@ 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;
 }
@@ -85,6 +94,10 @@ function createWorldpayDirectForm(documentRef = getDefaultDocument()) {
   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>
@@ -105,14 +118,40 @@ function createWorldpayDirectForm(documentRef = getDefaultDocument()) {
   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: 16px;
+      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: 16px;
+      gap: 12px;
       grid-template-columns: 1fr;
     }
 
@@ -120,27 +159,44 @@ function createWorldpayDirectForm(documentRef = getDefaultDocument()) {
       display: block;
       font-size: 14px;
       font-weight: 600;
-      margin-bottom: 8px;
+      margin-bottom: 6px;
     }
 
     .worldpay-direct-field {
-      border: 1px solid #8f8f8f;
-      border-radius: 4px;
-      min-height: 44px;
-      padding: 10px 12px;
+      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 {
-      border-color: #1b5ac9;
-      box-shadow: 0 0 0 1px #1b5ac9;
+      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: #b00020;
+      border-color: #b42318;
+      box-shadow: 0 0 0 2px rgba(180, 35, 24, 0.12);
     }
 
     .worldpay-direct-error {
-      color: #b00020;
+      color: #b42318;
       font-size: 14px;
       margin: 0;
     }
@@ -175,11 +231,12 @@ function showWorldpayDirectError(errorElement, error) {
 function initializeWorldpayDirectCheckout({
   additionalData,
   formRef,
+  elements,
   documentRef = getDefaultDocument(),
   windowRef = getDefaultWindow(),
 }) {
   const { checkoutId, environment } = getWorldpayDirectConfig(additionalData);
-  const { form, selectors, error } = createWorldpayDirectForm(documentRef);
+  const { form, selectors, error } = elements ?? createWorldpayDirectForm(documentRef);
 
   if (!checkoutId) {
     showWorldpayDirectError(error, new Error('Worldpay checkout id is missing.'));
@@ -217,6 +274,25 @@ function initializeWorldpayDirectCheckout({
             },
           },
           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) {
@@ -329,12 +405,17 @@ export async function handleWorldpayPlaceOrder({
 }
 
 export function renderWorldpayDirectFields(ctx, { formRef } = {}) {
-  const { form } = initializeWorldpayDirectCheckout({
-    additionalData: ctx.additionalData,
-    formRef,
-  });
+  const elements = createWorldpayDirectForm();
 
-  ctx.replaceHTML(form);
+  ctx.replaceHTML(elements.form);
+
+  afterNextFrame(() => {
+    initializeWorldpayDirectCheckout({
+      additionalData: ctx.additionalData,
+      formRef,
+      elements,
+    });
+  });
 }
 
 export async function startWorldpayDirectPayment({