isaacclad/ladill-link
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Simplify pay wait copy and scale Paystack to fill the loading area.
Deploy Ladill Link / deploy (push) Successful in 1m22s
Details

Browse Source 
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:
isaacclad
2026-07-23 22:58:29 +00:00
parent 0a63f3a073
commit ff2297034e
1 changed files with 19 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/partials/paystack-sheet.blade.php
+19 -13
View File
@@ -402,7 +402,10 @@
s.setProperty('background-color', 'transparent', 'important');
s.setProperty('pointer-events', 'auto', '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);
} catch (e) {}
}
@@ -441,7 +444,8 @@
s.setProperty('background-color', 'transparent', 'important');
s.setProperty('pointer-events', 'auto', '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);
} catch (e) {}
}
@@ -1030,7 +1034,10 @@
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^="embed-checkout"],
html.ladill-pay-inline-active [data-ladill-pay-mount] iframe[data-ladill-pay-contained],
@@ -1058,13 +1065,10 @@
background-color: transparent !important;
color-scheme: light !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^="embed-checkout"],
html.ladill-pay-inline-active iframe[data-ladill-pay-mode="pin"] {
@@ -1091,7 +1095,8 @@
background-color: transparent !important;
color-scheme: light !important;
pointer-events: auto !important;
transform: none !important;
transform: scale(1.32) !important;
transform-origin: center center !important;
}
</style>
@endonce
@@ -1157,10 +1162,10 @@
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'"
: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'"
: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);'"
@click.stop>
@@ -1267,11 +1272,12 @@
data-ladill-pay-status-title
x-text="$store.ladillPayCheckout && $store.ladillPayCheckout.error
? 'Checkout unavailable'
: 'Starting secure checkout…'"></p>
: 'Please wait…'"></p>
<p class="text-xs leading-snug text-slate-500"
x-show="$store.ladillPayCheckout && $store.ladillPayCheckout.error"
x-text="$store.ladillPayCheckout && $store.ladillPayCheckout.error
? $store.ladillPayCheckout.error
: 'Secure card and mobile money checkout opens on this page — not in a separate browser.'"></p>
: ''"></p>
</div>
<button type="button"
data-ladill-pay-retry