Simplify pay wait copy and scale Paystack to fill the loading area.
Deploy Ladill POS / deploy (push) Successful in 1m57s
Deploy Ladill POS / deploy (push) Successful in 1m57s
Use “Please wait…” while loading, and scale the contained Paystack iframe so checkout fills the sheet body without a floating second card.
This commit is contained in:
@@ -402,7 +402,10 @@
|
|||||||
s.setProperty('background-color', 'transparent', 'important');
|
s.setProperty('background-color', 'transparent', 'important');
|
||||||
s.setProperty('pointer-events', 'auto', 'important');
|
s.setProperty('pointer-events', 'auto', 'important');
|
||||||
s.setProperty('color-scheme', 'light', 'important');
|
s.setProperty('color-scheme', 'light', 'important');
|
||||||
s.setProperty('transform', 'none', 'important');
|
// Scale up so Paystack's centered card fills the loading area; mount clips
|
||||||
|
// letterbox margins and the card's drop-shadow (cross-origin, can't restyle).
|
||||||
|
s.setProperty('transform', 'scale(1.32)', 'important');
|
||||||
|
s.setProperty('transform-origin', 'center center', 'important');
|
||||||
applyIframePermissions(iframe);
|
applyIframePermissions(iframe);
|
||||||
} catch (e) {}
|
} catch (e) {}
|
||||||
}
|
}
|
||||||
@@ -441,7 +444,8 @@
|
|||||||
s.setProperty('background-color', 'transparent', 'important');
|
s.setProperty('background-color', 'transparent', 'important');
|
||||||
s.setProperty('pointer-events', 'auto', 'important');
|
s.setProperty('pointer-events', 'auto', 'important');
|
||||||
s.setProperty('color-scheme', 'light', 'important');
|
s.setProperty('color-scheme', 'light', 'important');
|
||||||
s.setProperty('transform', 'none', 'important');
|
s.setProperty('transform', 'scale(1.32)', 'important');
|
||||||
|
s.setProperty('transform-origin', 'center center', 'important');
|
||||||
applyIframePermissions(iframe);
|
applyIframePermissions(iframe);
|
||||||
} catch (e) {}
|
} catch (e) {}
|
||||||
}
|
}
|
||||||
@@ -1030,7 +1034,10 @@
|
|||||||
background: #fff !important;
|
background: #fff !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Preferred: iframe fills the loading area edge-to-edge, no host shadow. */
|
/*
|
||||||
|
Scale Paystack's centered card so it fills the loading area.
|
||||||
|
Mount overflow:hidden clips the letterbox margins + Paystack's own card shadow.
|
||||||
|
*/
|
||||||
html.ladill-pay-inline-active [data-ladill-pay-mount] iframe[id^="inline-checkout"],
|
html.ladill-pay-inline-active [data-ladill-pay-mount] iframe[id^="inline-checkout"],
|
||||||
html.ladill-pay-inline-active [data-ladill-pay-mount] iframe[id^="embed-checkout"],
|
html.ladill-pay-inline-active [data-ladill-pay-mount] iframe[id^="embed-checkout"],
|
||||||
html.ladill-pay-inline-active [data-ladill-pay-mount] iframe[data-ladill-pay-contained],
|
html.ladill-pay-inline-active [data-ladill-pay-mount] iframe[data-ladill-pay-contained],
|
||||||
@@ -1058,13 +1065,10 @@
|
|||||||
background-color: transparent !important;
|
background-color: transparent !important;
|
||||||
color-scheme: light !important;
|
color-scheme: light !important;
|
||||||
pointer-events: auto !important;
|
pointer-events: auto !important;
|
||||||
transform: none !important;
|
transform: scale(1.32) !important;
|
||||||
|
transform-origin: center center !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
|
||||||
Fallback when the frame stays on body: pin with measured pixels.
|
|
||||||
Transparent + no shadow so it reads as the sheet body, not a second modal.
|
|
||||||
*/
|
|
||||||
html.ladill-pay-inline-active body > iframe[id^="inline-checkout"],
|
html.ladill-pay-inline-active body > iframe[id^="inline-checkout"],
|
||||||
html.ladill-pay-inline-active body > iframe[id^="embed-checkout"],
|
html.ladill-pay-inline-active body > iframe[id^="embed-checkout"],
|
||||||
html.ladill-pay-inline-active iframe[data-ladill-pay-mode="pin"] {
|
html.ladill-pay-inline-active iframe[data-ladill-pay-mode="pin"] {
|
||||||
@@ -1091,7 +1095,8 @@
|
|||||||
background-color: transparent !important;
|
background-color: transparent !important;
|
||||||
color-scheme: light !important;
|
color-scheme: light !important;
|
||||||
pointer-events: auto !important;
|
pointer-events: auto !important;
|
||||||
transform: none !important;
|
transform: scale(1.32) !important;
|
||||||
|
transform-origin: center center !important;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
@endonce
|
@endonce
|
||||||
@@ -1157,10 +1162,10 @@
|
|||||||
class="relative flex w-full flex-col overflow-hidden rounded-t-2xl bg-white md:rounded-2xl"
|
class="relative flex w-full flex-col overflow-hidden rounded-t-2xl bg-white md:rounded-2xl"
|
||||||
:data-paystack-live="($store.ladillPayCheckout && $store.ladillPayCheckout.inline && !$store.ladillPayCheckout.launching && !$store.ladillPayCheckout.error && !$store.ladillPayCheckout.frameable) ? '1' : '0'"
|
:data-paystack-live="($store.ladillPayCheckout && $store.ladillPayCheckout.inline && !$store.ladillPayCheckout.launching && !$store.ladillPayCheckout.error && !$store.ladillPayCheckout.frameable) ? '1' : '0'"
|
||||||
:class="($store.ladillPayCheckout && $store.ladillPayCheckout.inline && !$store.ladillPayCheckout.launching && !$store.ladillPayCheckout.error && !$store.ladillPayCheckout.frameable)
|
:class="($store.ladillPayCheckout && $store.ladillPayCheckout.inline && !$store.ladillPayCheckout.launching && !$store.ladillPayCheckout.error && !$store.ladillPayCheckout.frameable)
|
||||||
? 'shadow-none ring-1 ring-black/10 md:max-w-[min(100vw-2rem,720px)]'
|
? 'shadow-none ring-1 ring-black/10 md:max-w-[min(100vw-1.5rem,760px)]'
|
||||||
: 'shadow-2xl md:max-w-lg'"
|
: 'shadow-2xl md:max-w-lg'"
|
||||||
:style="($store.ladillPayCheckout && $store.ladillPayCheckout.inline && !$store.ladillPayCheckout.launching && !$store.ladillPayCheckout.error && !$store.ladillPayCheckout.frameable)
|
:style="($store.ladillPayCheckout && $store.ladillPayCheckout.inline && !$store.ladillPayCheckout.launching && !$store.ladillPayCheckout.error && !$store.ladillPayCheckout.frameable)
|
||||||
? 'height: min(88dvh, 640px); max-height: 88dvh; padding-bottom: 0;'
|
? 'height: min(90dvh, 700px); max-height: 90dvh; padding-bottom: 0;'
|
||||||
: 'height: min(90dvh, 720px); max-height: 90dvh; padding-bottom: env(safe-area-inset-bottom, 0px);'"
|
: 'height: min(90dvh, 720px); max-height: 90dvh; padding-bottom: env(safe-area-inset-bottom, 0px);'"
|
||||||
@click.stop>
|
@click.stop>
|
||||||
|
|
||||||
@@ -1267,11 +1272,12 @@
|
|||||||
data-ladill-pay-status-title
|
data-ladill-pay-status-title
|
||||||
x-text="$store.ladillPayCheckout && $store.ladillPayCheckout.error
|
x-text="$store.ladillPayCheckout && $store.ladillPayCheckout.error
|
||||||
? 'Checkout unavailable'
|
? 'Checkout unavailable'
|
||||||
: 'Starting secure checkout…'"></p>
|
: 'Please wait…'"></p>
|
||||||
<p class="text-xs leading-snug text-slate-500"
|
<p class="text-xs leading-snug text-slate-500"
|
||||||
|
x-show="$store.ladillPayCheckout && $store.ladillPayCheckout.error"
|
||||||
x-text="$store.ladillPayCheckout && $store.ladillPayCheckout.error
|
x-text="$store.ladillPayCheckout && $store.ladillPayCheckout.error
|
||||||
? $store.ladillPayCheckout.error
|
? $store.ladillPayCheckout.error
|
||||||
: 'Secure card and mobile money checkout opens on this page — not in a separate browser.'"></p>
|
: ''"></p>
|
||||||
</div>
|
</div>
|
||||||
<button type="button"
|
<button type="button"
|
||||||
data-ladill-pay-retry
|
data-ladill-pay-retry
|
||||||
|
|||||||
Reference in New Issue
Block a user