{"id":4291,"date":"2026-05-28T14:38:38","date_gmt":"2026-05-28T14:38:38","guid":{"rendered":"https:\/\/glacademy.com.my\/?page_id=4291"},"modified":"2026-06-11T03:52:17","modified_gmt":"2026-06-11T03:52:17","slug":"payment","status":"publish","type":"page","link":"https:\/\/glacademy.edu.my\/ms\/payment\/","title":{"rendered":"Payment (Malay)"},"content":{"rendered":"<!--\nSEO: title and description come from the theme's seo-meta\/{lang}.json (path \/payment\/).\nSlug: payment   Page key: pay\n\n  Payment page v2. GENERATED by tools\/pay-page\/build.py from docs\/design\/payment-page (Claude Design\n  handoff, option 1a) \u2014 edit the generator, never this file, or the eight languages drift apart.\n  Two cards: bank transfer (MYR | USD) and Pay online. The Pay online choices open the online payment\n  app below them (#gl-pay-app \u2014 talks to WordPress, which proxies to the ERP with the API key attached),\n  starting at the step the card's choice names; Back returns to the card.\n-->\n<style id=\"pay2-css\">\/* Payment page v2 (docs\/design\/payment-page, option 1a \"Two doors\"). Everything is scoped under .pay2.\n   The online payment app inside keeps its own .glp-* styles in gl-academy-all.css. *\/\n.pay2{--navy:#052868;--navy9:#021C49;--royal:#1556B5;--body:#3D4757;--muted:#6B7385;--line:#E4E7EE;--line2:#EFF1F5;--sky:#F4F8FE;--gold:#C9A961;--cream:#FBF4E2;--brown:#8A5A0A;--grad:linear-gradient(95deg,#1556B5 0%,#2178E0 55%,#9C7C2E 100%);--shadow:0 30px 60px -36px rgba(5,40,104,.35);font-family:'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:var(--navy)}\n.pay2 *,.pay2 *::before,.pay2 *::after{box-sizing:border-box}\n\/* resets for the shell only \u2014 the app inside (.pay2-app) keeps its own spacing *\/\n.pay2-hero :is(p,h1),.pay2-card :is(p,h2,ul),.pay2-after :is(p,h2){margin:0}\n.pay2-logos{padding:0;list-style:none}\n.pay2-card a,.pay2-after a{text-decoration:none}\n.pay2-hero svg,.pay2-card svg,.pay2-after svg{display:block;flex-shrink:0}\n.pay2 [hidden]{display:none!important}\n.pay2 a:focus-visible,.pay2 button:focus-visible{outline:2px solid var(--royal);outline-offset:2px}\n.pay2-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}\n.pay2-in{max-width:1200px;margin:0 auto}\n.pay2-grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}\n\n\/* hero \u2014 the theme pulls this first section up behind the fixed header (main.css) *\/\n.pay2-hero{background:var(--sky);padding:56px 24px 0;text-align:center}\n.pay2-eyebrow{display:inline-flex;align-items:center;padding:6px 14px;border-radius:999px;background:#DCE7F5;color:var(--royal);font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;line-height:1.3}\n.pay2 .pay2-h1{margin:18px 0 0;font-family:inherit;font-size:clamp(38px,5.2vw,56px);font-weight:800;letter-spacing:-.035em;line-height:1.04;color:var(--navy)}\n.pay2-lead{max-width:720px;margin:18px auto 0!important;font-size:17px;line-height:1.6;color:var(--body)}\n\n.pay2-main{background:linear-gradient(180deg,var(--sky) 0,#fff 360px);padding:48px 24px 96px}\n.pay2-cards{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;align-items:stretch}\n\n\/* cards *\/\n.pay2-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:22px;overflow:hidden;box-shadow:var(--shadow);scroll-margin-top:calc(var(--gla-hdr,97px) + 20px)}\n.pay2-head{display:flex;align-items:center;gap:14px;padding:22px 28px;border-bottom:1px solid var(--line2);background:linear-gradient(160deg,#EEF4FF,#fff)}\n.pay2-head--gold{background:linear-gradient(160deg,var(--cream),#fff)}\n.pay2-tile{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:12px;background:var(--navy);color:#fff}\n.pay2-tile svg{width:20px;height:20px}\n.pay2-tile--gold{background:var(--gold);color:#2B1F05}\n.pay2-ht{flex:1;min-width:0}\n.pay2 .pay2-t{font-family:inherit;font-size:18px;font-weight:800;line-height:1.25;letter-spacing:-.01em;color:var(--navy)}\n.pay2-s{margin-top:2px!important;font-size:12.5px;line-height:1.4;color:var(--muted)}\n\n.pay2-seg{display:inline-flex;flex:none;padding:3px;border:1px solid var(--line);border-radius:999px;background:#fff}\n.pay2-seg__b{appearance:none;-webkit-appearance:none;min-height:34px;padding:7px 16px;border:0;border-radius:999px;background:transparent;font:inherit;font-size:13px;font-weight:700;line-height:1.2;color:var(--muted);cursor:pointer;transition:background .15s,color .15s}\n.pay2-seg__b:hover{color:var(--navy)}\n.pay2-seg__b[aria-pressed=\"true\"]{background:var(--navy);color:#fff}\n\n.pay2-body{display:flex;flex:1;flex-direction:column;padding:6px 28px 24px}\n.pay2-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 0}\n.pay2-row--sep{border-top:1.5px dashed #D5DBE5}\n.pay2-row__txt{min-width:0}\n.pay2-l{margin-bottom:6px!important;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;line-height:1.4;color:var(--muted)}\n.pay2-num{font-size:24px;font-weight:800;letter-spacing:.02em;line-height:1.2;font-variant-numeric:tabular-nums;color:var(--navy);white-space:nowrap}\n.pay2-v{font-size:15px;font-weight:800;line-height:1.35;color:var(--navy);overflow-wrap:anywhere}\n\n.pay2-copy{display:inline-flex;align-items:center;gap:6px;flex:none;padding:7px 12px;border:1px solid var(--line);border-radius:999px;background:#fff;font:inherit;font-size:12.5px;font-weight:700;line-height:1.2;color:var(--navy);cursor:pointer;transition:background .15s,border-color .15s,color .15s}\n.pay2-copy svg{width:15px;height:15px}\n.pay2-copy:hover{border-color:#C3CAD6;background:#F6F7FA}\n.pay2-copy .pay2-i-ok{display:none}\n.pay2-copy.is-done{border-color:#9FDCC6;background:#E1F5EE;color:#0F6E56}\n.pay2-copy.is-done .pay2-i-copy{display:none}\n.pay2-copy.is-done .pay2-i-ok{display:block}\n\n.pay2-ref{display:flex;align-items:flex-start;gap:10px;margin-top:8px;padding:14px 16px;border-radius:12px;background:var(--cream);font-size:13.5px;line-height:1.55;color:#5A3E07}\n.pay2-ref svg{width:20px;height:20px;color:var(--brown)}\n.pay2-ref b{font-weight:700}\n\n\/* pay online *\/\n.pay2-body--on{padding:24px 28px}\n.pay2-prompt{margin-bottom:14px!important;font-size:14px;font-weight:700;line-height:1.45;color:var(--navy)}\n.pay2-choices{display:grid;gap:12px;margin-bottom:24px}\n.pay2-choice{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:16px;padding:18px;border:1.5px solid var(--line);border-radius:14px;background:#fff;color:var(--navy);text-align:start;cursor:pointer;transition:border-color .15s,background .15s}\n.pay2-choice:hover,.pay2-choice[aria-expanded=\"true\"]{border-color:var(--royal);background:var(--sky)}\n.pay2-choice__ico{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:#EEF4FF;color:var(--royal)}\n.pay2-choice__ico svg{width:22px;height:22px}\n.pay2-choice__ico--gold{background:var(--cream);color:var(--brown)}\n.pay2-choice__t{display:block;font-size:15px;font-weight:700;line-height:1.35;color:var(--navy)}\n.pay2-choice__s{display:block;margin-top:3px;font-size:13px;line-height:1.45;color:var(--muted)}\n.pay2-arrow{width:18px;height:18px;color:var(--royal);transition:transform .15s}\n.pay2-choice:hover .pay2-arrow{transform:translateX(3px)}\n.pay2[dir=\"rtl\"] .pay2-arrow{transform:scaleX(-1)}\n.pay2[dir=\"rtl\"] .pay2-choice:hover .pay2-arrow{transform:scaleX(-1) translateX(3px)}\n\n.pay2-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 16px;margin-top:auto;padding-top:16px;border-top:1px solid var(--line2)}\n.pay2-secure{display:flex;align-items:center;gap:8px;font-size:12.5px;line-height:1.45;color:var(--muted)}\n.pay2-secure svg{width:16px;height:16px;color:#1D9E75}\n.pay2-logos{display:flex;flex-wrap:wrap;gap:6px}\n.pay2-logo{display:grid;place-items:center;width:46px;height:30px;border:1px solid var(--line);border-radius:6px;background:#fff}\n.pay2-logo svg{width:auto;max-width:34px;height:18px}\n.pay2-logo--txt{width:auto;padding:0 8px;font-size:10.5px;font-weight:700;line-height:1;color:var(--muted);white-space:nowrap}\n\n\/* the online payment app, opened from a choice above *\/\n.pay2-app{margin-top:28px;padding:36px 40px;border:1px solid var(--line);border-radius:22px;background:#fff;box-shadow:var(--shadow);scroll-margin-top:calc(var(--gla-hdr,97px) + 20px)}\n.pay2-app .glp{margin:0 auto}\n.pay2-app .glp-h:focus{outline:none}\n\/* the theme makes every mailto link a 44px inline-flex box on phones, which breaks a sentence in two *\/\n.pay2-app .glp-fine a[href^=\"mailto:\"]{display:inline;min-height:0}\n\/* the card above asks \"which describes you?\", so the app's own first step never shows *\/\n.pay2-app #glp-step-who{display:none!important}\n\n\/* after payment *\/\n.pay2-after{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:28px;margin-top:28px;padding:24px 28px;border:1px solid var(--line);border-radius:16px;background:#FAFBFC}\n.pay2-after__ico{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:var(--cream);color:var(--brown)}\n.pay2-after__ico svg{width:24px;height:24px}\n.pay2 .pay2-after__t{font-family:inherit;font-size:16px;font-weight:800;line-height:1.35;letter-spacing:0;color:var(--navy)}\n.pay2-after__b{margin-top:4px!important;font-size:14px;line-height:1.55;color:var(--body)}\n.pay2-after__btns{display:flex;flex-wrap:wrap;gap:10px}\n.pay2-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:12px 20px;border:1.5px solid transparent;border-radius:999px;font-size:14px;font-weight:700;line-height:1.2;white-space:nowrap;transition:background .15s,border-color .15s,color .15s}\n.pay2-btn svg{width:18px;height:18px}\n.pay2 .pay2-btn--navy{background:var(--navy);color:#fff}\n.pay2 .pay2-btn--navy:hover{background:var(--navy9);color:#fff}\n.pay2 .pay2-btn--line{border-color:#C3CAD6;background:#fff;color:var(--navy)}\n.pay2 .pay2-btn--line:hover{border-color:var(--navy);color:var(--navy)}\n\n\/* scripts that a negative tracking breaks: Arabic joins letters, CJK has no word spaces to tighten *\/\n.pay2[dir=\"rtl\"] .pay2-h1,.pay2[dir=\"rtl\"] .pay2-t,.pay2[dir=\"rtl\"] .pay2-l,.pay2[dir=\"rtl\"] .pay2-eyebrow{letter-spacing:0}\nhtml[lang^=\"zh\"] .pay2 .pay2-h1,html[lang^=\"ja\"] .pay2 .pay2-h1,html[lang^=\"ko\"] .pay2 .pay2-h1{letter-spacing:-.01em}\nhtml[lang^=\"zh\"] .pay2-lead,html[lang^=\"ja\"] .pay2-lead{word-break:keep-all;overflow-wrap:anywhere}\n\n@media (max-width:899px){\n  .pay2-cards{grid-template-columns:minmax(0,1fr)}\n  .pay2-app{padding:28px 24px}\n}\n@media (max-width:759px){\n  .pay2-after{grid-template-columns:auto minmax(0,1fr);gap:16px 20px}\n  .pay2-after__btns{grid-column:1\/-1}\n}\n@media (max-width:559px){\n  .pay2-hero{padding:36px 16px 0}\n  .pay2 .pay2-h1{font-size:38px}\n  .pay2-lead{font-size:16px}\n  .pay2-main{padding:32px 16px 72px}\n  .pay2-cards{gap:20px}\n  .pay2-head{flex-wrap:wrap;padding:18px 20px}\n  .pay2-seg{flex-basis:100%}\n  .pay2-seg__b{flex:1;min-height:42px}\n  .pay2-body{padding:2px 20px 20px}\n  .pay2-body--on{padding:20px}\n  .pay2-num{font-size:20px}\n  .pay2-copy{min-height:44px;padding:10px 14px}\n  .pay2-choice{gap:14px;padding:16px}\n  .pay2-choice{min-height:44px}\n  .pay2-foot{flex-direction:column;align-items:flex-start}\n  .pay2-app{margin-top:20px;padding:22px 16px;border-radius:18px}\n  .pay2-after{grid-template-columns:minmax(0,1fr);margin-top:20px;padding:20px}\n  .pay2-after__btns{display:grid;grid-template-columns:1fr 1fr}\n  .pay2-btn{padding:12px 14px}\n}\n@media (prefers-reduced-motion:reduce){\n  .pay2 *{transition:none!important}\n}<\/style>\n<section class=\"pay2 pay2-hero\">\n  <div class=\"pay2-in\">\n    <span class=\"pay2-eyebrow\">Yuran Pengajian<\/span>\n    <h1 class=\"pay2-h1\">Dua cara <span class=\"pay2-grad\">untuk membayar.<\/span><\/h1>\n    <p class=\"pay2-lead\">Pindahkan ke akaun bank kami, atau bayar dalam talian dan jelaskan jumlah tepat pada invois anda.<\/p>\n  <\/div>\n<\/section>\n\n<section class=\"pay2 pay2-main\" data-copy=\"Salin\" data-copied=\"Disalin\">\n  <div class=\"pay2-in\">\n    <span class=\"pay2-sr\" id=\"pay2-live\" aria-live=\"polite\"><\/span>\n    <div class=\"pay2-cards\">\n\n      <article class=\"pay2-card\" id=\"pay-bank\" aria-labelledby=\"pay2-bank-t\">\n        <div class=\"pay2-head\">\n          <span class=\"pay2-tile\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M3 9.2L12 4l9 5.2\"\/><path d=\"M5 10.5v7M9.7 10.5v7M14.3 10.5v7M19 10.5v7\"\/><path d=\"M3 20h18\"\/><\/svg><\/span>\n          <div class=\"pay2-ht\">\n            <h2 class=\"pay2-t\" id=\"pay2-bank-t\">Pindahan bank<\/h2>\n            <p class=\"pay2-s\">AmBank (M) Berhad<\/p>\n          <\/div>\n          <div class=\"pay2-seg\" role=\"group\" aria-label=\"Mata wang\">\n            <button class=\"pay2-seg__b\" type=\"button\" data-tab=\"myr\" aria-pressed=\"true\">MYR<\/button>\n            <button class=\"pay2-seg__b\" type=\"button\" data-tab=\"usd\" aria-pressed=\"false\">USD<\/button>\n          <\/div>\n        <\/div>\n        <div class=\"pay2-body\">\n          <div class=\"pay2-row\" data-cur=\"myr\">\n            <div class=\"pay2-row__txt\">\n              <p class=\"pay2-l\">Akaun MYR \u00b7 Nombor akaun<\/p>\n              <p class=\"pay2-num\"><span id=\"pay-acc-num-myr\" dir=\"ltr\">888-1064-7467-04<\/span><\/p>\n            <\/div>\n            <button class=\"pay2-copy\" type=\"button\" data-copy-target=\"pay-acc-num-myr\" aria-label=\"Salin nombor akaun\"><svg class=\"pay2-i-copy\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\" focusable=\"false\"><rect x=\"8.5\" y=\"8.5\" width=\"12\" height=\"12\" rx=\"2.2\"\/><path d=\"M15.5 8.5V5.7a2.2 2.2 0 00-2.2-2.2H5.7a2.2 2.2 0 00-2.2 2.2v7.6a2.2 2.2 0 002.2 2.2h2.8\"\/><\/svg><svg class=\"pay2-i-ok\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M5 12.5l4.5 4.5L19 7.5\"\/><\/svg><span class=\"pay2-copy__l\" aria-hidden=\"true\">Salin<\/span><\/button>\n          <\/div>\n          <div class=\"pay2-row\" data-cur=\"usd\" hidden>\n            <div class=\"pay2-row__txt\">\n              <p class=\"pay2-l\">Akaun USD \u00b7 Nombor akaun<\/p>\n              <p class=\"pay2-num\"><span id=\"pay-acc-num-usd\" dir=\"ltr\">888-3000-775-778<\/span><\/p>\n            <\/div>\n            <button class=\"pay2-copy\" type=\"button\" data-copy-target=\"pay-acc-num-usd\" aria-label=\"Salin nombor akaun\"><svg class=\"pay2-i-copy\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\" focusable=\"false\"><rect x=\"8.5\" y=\"8.5\" width=\"12\" height=\"12\" rx=\"2.2\"\/><path d=\"M15.5 8.5V5.7a2.2 2.2 0 00-2.2-2.2H5.7a2.2 2.2 0 00-2.2 2.2v7.6a2.2 2.2 0 002.2 2.2h2.8\"\/><\/svg><svg class=\"pay2-i-ok\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M5 12.5l4.5 4.5L19 7.5\"\/><\/svg><span class=\"pay2-copy__l\" aria-hidden=\"true\">Salin<\/span><\/button>\n          <\/div>\n          <div class=\"pay2-row pay2-row--sep\">\n            <div class=\"pay2-row__txt\">\n              <p class=\"pay2-l\">Nama akaun<\/p>\n              <p class=\"pay2-v\"><span id=\"pay-acc-name\" dir=\"ltr\">GL Education Group Sdn Bhd<\/span><\/p>\n            <\/div>\n            <button class=\"pay2-copy\" type=\"button\" data-copy-target=\"pay-acc-name\" aria-label=\"Salin nama akaun\"><svg class=\"pay2-i-copy\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\" focusable=\"false\"><rect x=\"8.5\" y=\"8.5\" width=\"12\" height=\"12\" rx=\"2.2\"\/><path d=\"M15.5 8.5V5.7a2.2 2.2 0 00-2.2-2.2H5.7a2.2 2.2 0 00-2.2 2.2v7.6a2.2 2.2 0 002.2 2.2h2.8\"\/><\/svg><svg class=\"pay2-i-ok\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M5 12.5l4.5 4.5L19 7.5\"\/><\/svg><span class=\"pay2-copy__l\" aria-hidden=\"true\">Salin<\/span><\/button>\n          <\/div>\n          <div class=\"pay2-row pay2-row--sep\">\n            <div class=\"pay2-row__txt\">\n              <p class=\"pay2-l\" dir=\"ltr\">SWIFT \/ BIC<\/p>\n              <p class=\"pay2-v\"><span id=\"pay-swift\" dir=\"ltr\">ARBKMYKL<\/span><\/p>\n            <\/div>\n            <button class=\"pay2-copy\" type=\"button\" data-copy-target=\"pay-swift\" aria-label=\"Salin kod SWIFT\"><svg class=\"pay2-i-copy\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\" focusable=\"false\"><rect x=\"8.5\" y=\"8.5\" width=\"12\" height=\"12\" rx=\"2.2\"\/><path d=\"M15.5 8.5V5.7a2.2 2.2 0 00-2.2-2.2H5.7a2.2 2.2 0 00-2.2 2.2v7.6a2.2 2.2 0 002.2 2.2h2.8\"\/><\/svg><svg class=\"pay2-i-ok\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M5 12.5l4.5 4.5L19 7.5\"\/><\/svg><span class=\"pay2-copy__l\" aria-hidden=\"true\">Salin<\/span><\/button>\n          <\/div>\n          <div class=\"pay2-ref\">\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\" focusable=\"false\"><rect x=\"3\" y=\"5\" width=\"18\" height=\"14\" rx=\"2.5\"\/><circle cx=\"9\" cy=\"11\" r=\"2.2\"\/><path d=\"M5.8 16.2c.6-1.5 1.8-2.2 3.2-2.2s2.6.7 3.2 2.2\"\/><path d=\"M14.5 10h4M14.5 13.2h3\"\/><\/svg>\n            <p data-cur=\"myr\"><b>Rujukan pembayaran:<\/b> nama penuh pelajar.<\/p>\n            <p data-cur=\"usd\" hidden><b>Rujukan pembayaran:<\/b> nama penuh pelajar. Untuk pemindahan antarabangsa, sertakan juga kod SWIFT.<\/p>\n          <\/div>\n        <\/div>\n      <\/article>\n\n      <article class=\"pay2-card\" id=\"pay-online\" aria-labelledby=\"pay2-online-t\">\n        <div class=\"pay2-head pay2-head--gold\">\n          <span class=\"pay2-tile pay2-tile--gold\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M13.2 2.8L5 13.4h6l-1.2 7.8L18 10.6h-6z\"\/><\/svg><\/span>\n          <div class=\"pay2-ht\">\n            <h2 class=\"pay2-t\" id=\"pay2-online-t\">Bayar dalam talian<\/h2>\n            <p class=\"pay2-s\">Perbankan internet FPX \u00b7 Kad \u00b7 Alipay<\/p>\n          <\/div>\n        <\/div>\n        <div class=\"pay2-body pay2-body--on\">\n          <p class=\"pay2-prompt\" id=\"pay2-prompt\">Sebelum kita mula, yang manakah menggambarkan anda?<\/p>\n          <div class=\"pay2-choices\" role=\"group\" aria-labelledby=\"pay2-prompt\">\n            <a class=\"pay2-choice\" href=\"https:\/\/erp.glacademy.edu.my\/pay\" data-pay-who=\"registered\">\n              <span class=\"pay2-choice__ico\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M2 9.5l10-5 10 5-10 5z\"\/><path d=\"M6 11.5v4.8c0 1.5 2.7 3 6 3s6-1.5 6-3v-4.8\"\/><path d=\"M22 9.5v5.5\"\/><\/svg><\/span>\n              <span class=\"pay2-choice__txt\"><span class=\"pay2-choice__t\">Saya pelajar berdaftar<\/span><span class=\"pay2-choice__s\">Semak invois anda dan bayar jumlah tertunggak<\/span><\/span>\n              <svg class=\"pay2-arrow\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M5 12h14M13 6l6 6-6 6\"\/><\/svg>\n            <\/a>\n            <a class=\"pay2-choice\" href=\"https:\/\/erp.glacademy.edu.my\/pay\" data-pay-who=\"new\">\n              <span class=\"pay2-choice__ico pay2-choice__ico--gold\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\" focusable=\"false\"><circle cx=\"10\" cy=\"8\" r=\"3.8\"\/><path d=\"M3 20.2c.9-3.7 3.7-6.1 7-6.1 2 0 3.8.9 5.1 2.4\"\/><path d=\"M19 13.5v6M16 16.5h6\"\/><\/svg><\/span>\n              <span class=\"pay2-choice__txt\"><span class=\"pay2-choice__t\">Saya belum mendaftar<\/span><span class=\"pay2-choice__s\">Bayar deposit atau jumlah sekali sahaja<\/span><\/span>\n              <svg class=\"pay2-arrow\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M5 12h14M13 6l6 6-6 6\"\/><\/svg>\n            <\/a>\n          <\/div>\n          <div class=\"pay2-foot\">\n            <p class=\"pay2-secure\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\" focusable=\"false\"><rect x=\"4.5\" y=\"10.5\" width=\"15\" height=\"10.5\" rx=\"2.2\"\/><path d=\"M8 10.5V7.6a4 4 0 018 0v2.9\"\/><\/svg><span>Pembayaran selamat. Kami tidak pernah melihat butiran kad anda.<\/span><\/p>\n            <ul class=\"pay2-logos\" aria-label=\"Kad dan dompet yang diterima\"><li class=\"pay2-logo pay2-logo--txt\">Apple Pay<\/li><li class=\"pay2-logo pay2-logo--txt\">Visa<\/li><li class=\"pay2-logo pay2-logo--txt\">Mastercard<\/li><li class=\"pay2-logo pay2-logo--txt\">UnionPay<\/li><\/ul>\n          <\/div>\n        <\/div>\n      <\/article>\n\n    <\/div>\n\n    <div class=\"pay2-app\" id=\"pay-app\" hidden>\n<div class=\"glp\" id=\"gl-pay-app\">\n\n  <!-- Step 1 \u2014 who is paying -->\n  <div class=\"glp-step\" id=\"glp-step-who\">\n    <h3 class=\"glp-h\">Sebelum kita mula<\/h3>\n    <p class=\"glp-sub\">Ini membantu kami mengkreditkan akaun yang betul.<\/p>\n    <div class=\"glp-choice-grid\">\n      <button type=\"button\" class=\"glp-choice\" data-who=\"registered\">\n        <span class=\"glp-choice__ico\"><svg class=\"glp-ico\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M22 10L12 5 2 10l10 5 10-5z\"\/><path d=\"M6 12v5c0 1.66 2.69 3 6 3s6-1.34 6-3v-5\"\/><\/svg><\/span>\n        <span class=\"glp-choice__body\">\n          <span class=\"glp-choice__title\">Saya pelajar berdaftar<\/span>\n          <span class=\"glp-choice__sub\">Semak invois anda dan bayar jumlah tertunggak<\/span>\n        <\/span>\n        <span class=\"glp-choice__go\"><svg class=\"glp-ico\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><polyline points=\"9 18 15 12 9 6\"\/><\/svg><\/span>\n      <\/button>\n      <button type=\"button\" class=\"glp-choice\" data-who=\"new\">\n        <span class=\"glp-choice__ico\"><svg class=\"glp-ico\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2\"\/><circle cx=\"9\" cy=\"7\" r=\"4\"\/><line x1=\"19\" y1=\"8\" x2=\"19\" y2=\"14\"\/><line x1=\"22\" y1=\"11\" x2=\"16\" y2=\"11\"\/><\/svg><\/span>\n        <span class=\"glp-choice__body\">\n          <span class=\"glp-choice__title\">Saya belum mendaftar<\/span>\n          <span class=\"glp-choice__sub\">Bayar deposit atau jumlah sekali sahaja<\/span>\n        <\/span>\n        <span class=\"glp-choice__go\"><svg class=\"glp-ico\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><polyline points=\"9 18 15 12 9 6\"\/><\/svg><\/span>\n      <\/button>\n    <\/div>\n  <\/div>\n\n  <!-- Step 2 \u2014 find the account -->\n  <div class=\"glp-step glp-hidden\" id=\"glp-step-find\">\n    <button type=\"button\" class=\"glp-back\" data-goto=\"who\"><svg class=\"glp-ico\" width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><line x1=\"19\" y1=\"12\" x2=\"5\" y2=\"12\"\/><polyline points=\"12 19 5 12 12 5\"\/><\/svg><span>Kembali<\/span><\/button>\n    <h3 class=\"glp-h\">Cari invois anda<\/h3>\n    <p class=\"glp-sub\">Masukkan alamat e-mel dalam rekod kami \u2014 milik pelajar atau ibu bapa \u2014 atau nombor pasport \/ kad pengenalan yang digunakan semasa pendaftaran.<\/p>\n\n    <form id=\"glp-find-form\" novalidate>\n      <div class=\"glp-field\">\n        <label class=\"glp-label\" for=\"glp-q\">E-mel, pasport atau nombor KP<\/label>\n        <input class=\"glp-input\" id=\"glp-q\" type=\"text\" autocomplete=\"email\"\n               placeholder=\"parent@email.com  atau  A12345678\" required>\n      <\/div>\n      <div class=\"glp-error\" id=\"glp-find-error\" role=\"alert\"><\/div>\n          <p class=\"glp-alt glp-hidden\" id=\"glp-find-alt\">Halaman ini bermasalah? Anda juga boleh membayar terus di <a class=\"glp-alt__link\" href=\"https:\/\/erp.glacademy.edu.my\/pay\" rel=\"noopener\">Buka halaman pembayaran<\/a><\/p>\n      <button class=\"glp-btn\" id=\"glp-find-btn\" type=\"submit\">\n        <svg class=\"glp-ico\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><circle cx=\"11\" cy=\"11\" r=\"7\"\/><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"\/><\/svg><span>Cari invois saya<\/span>\n      <\/button>\n    <\/form>\n\n    <p class=\"glp-fine\"><svg class=\"glp-ico\" width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z\"\/><\/svg><span>Untuk perlindungan anda, kami hanya memaparkan nama dan e-mel yang sebahagiannya disembunyikan \u2014 cukup untuk anda mengenali akaun sendiri. Jika tiada rekod ditemui, e-mel kepada <a href=\"mailto:hello@glacademy.edu.my\">hello@glacademy.edu.my<\/a>.<\/span><\/p>\n  <\/div>\n\n  <!-- Step 3 \u2014 choose what to pay -->\n  <div class=\"glp-step glp-hidden\" id=\"glp-step-pick\">\n    <button type=\"button\" class=\"glp-back\" data-goto=\"find\"><svg class=\"glp-ico\" width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><line x1=\"19\" y1=\"12\" x2=\"5\" y2=\"12\"\/><polyline points=\"12 19 5 12 12 5\"\/><\/svg><span>Cari semula<\/span><\/button>\n    <h3 class=\"glp-h\">Apakah yang ingin anda bayar?<\/h3>\n    <p class=\"glp-sub\">Pilih keseluruhan invois, atau pilih item tertentu. Anda juga boleh memasukkan jumlah yang lebih kecil bagi mana-mana item untuk membayar secara beransur.<\/p>\n\n    <div id=\"glp-students\"><\/div>\n\n    <div class=\"glp-extra\">\n      <label class=\"glp-check\">\n        <input type=\"checkbox\" id=\"glp-extra-on\">\n        <span class=\"glp-check__label\"><svg class=\"glp-ico\" width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\"\/><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><\/svg><span>Tambah sesuatu yang tiada dalam senarai di atas<\/span><\/span>\n      <\/label>\n      <div class=\"glp-extra__fields glp-hidden\" id=\"glp-extra-fields\">\n        <div class=\"glp-row\">\n          <div class=\"glp-field\">\n            <label class=\"glp-label\" for=\"glp-extra-desc\">Untuk apa bayaran ini?<\/label>\n            <input class=\"glp-input\" id=\"glp-extra-desc\" type=\"text\" placeholder=\"cth. Deposit IEP, kemasukan Januari\">\n          <\/div>\n          <div class=\"glp-field\">\n            <label class=\"glp-label\" for=\"glp-extra-amt\">Jumlah (MYR)<\/label>\n            <div class=\"glp-amount\"><span class=\"glp-amount__cur\">RM<\/span>\n              <input class=\"glp-input glp-input--amount\" id=\"glp-extra-amt\" type=\"number\" min=\"1\" step=\"0.01\" placeholder=\"0.00\"><\/div>\n          <\/div>\n        <\/div>\n        <p class=\"glp-fine\"><svg class=\"glp-ico\" width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z\"\/><\/svg><span>Bayaran yang tiada dalam invois diuruskan secara berasingan. Anda akan menerima e-mel pengesahan, dan pasukan kewangan kami akan mengeluarkan resit rasmi setelah ia dipadankan dengan akaun anda.<\/span><\/p>\n      <\/div>\n    <\/div>\n\n    <div class=\"glp-total\">\n      <span class=\"glp-total__label\">Dipilih<\/span>\n      <span class=\"glp-total__amount\" id=\"glp-total\">RM 0.00<\/span>\n    <\/div>\n    <div class=\"glp-error\" id=\"glp-pick-error\" role=\"alert\"><\/div>\n    <button class=\"glp-btn\" id=\"glp-pick-next\" type=\"button\" disabled>\n      <span>Teruskan<\/span><svg class=\"glp-ico\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><polyline points=\"9 18 15 12 9 6\"\/><\/svg>\n    <\/button>\n  <\/div>\n\n  <!-- Step 3b \u2014 not registered -->\n  <div class=\"glp-step glp-hidden\" id=\"glp-step-new\">\n    <button type=\"button\" class=\"glp-back\" data-goto=\"who\"><svg class=\"glp-ico\" width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><line x1=\"19\" y1=\"12\" x2=\"5\" y2=\"12\"\/><polyline points=\"12 19 5 12 12 5\"\/><\/svg><span>Kembali<\/span><\/button>\n    <h3 class=\"glp-h\">Maklumat anda<\/h3>\n    <p class=\"glp-sub\">Kami akan menghantar pengesahan melalui e-mel, dan pasukan kami akan menghubungi anda untuk membuka akaun.<\/p>\n\n    <div class=\"glp-row\">\n      <div class=\"glp-field\">\n        <label class=\"glp-label\" for=\"glp-n-name\">Nama penuh<\/label>\n        <input class=\"glp-input\" id=\"glp-n-name\" type=\"text\" autocomplete=\"name\" placeholder=\"cth. Lim Jun Wei\">\n      <\/div>\n      <div class=\"glp-field\">\n        <label class=\"glp-label\" for=\"glp-n-email\">Alamat e-mel<\/label>\n        <input class=\"glp-input\" id=\"glp-n-email\" type=\"email\" autocomplete=\"email\" placeholder=\"cth. parent@email.com\">\n      <\/div>\n    <\/div>\n    <div class=\"glp-row\">\n      <div class=\"glp-field\">\n        <label class=\"glp-label\" for=\"glp-n-phone\">Nombor telefon<\/label>\n        <input class=\"glp-input\" id=\"glp-n-phone\" type=\"tel\" autocomplete=\"tel\" placeholder=\"cth. 012-345 6789\">\n      <\/div>\n      <div class=\"glp-field\">\n        <label class=\"glp-label\" for=\"glp-n-amt\">Jumlah (MYR)<\/label>\n        <div class=\"glp-amount\"><span class=\"glp-amount__cur\">RM<\/span>\n          <input class=\"glp-input glp-input--amount\" id=\"glp-n-amt\" type=\"number\" min=\"1\" step=\"0.01\" placeholder=\"0.00\"><\/div>\n      <\/div>\n    <\/div>\n    <div class=\"glp-field\">\n      <label class=\"glp-label\" for=\"glp-n-desc\">Untuk apa bayaran ini?<\/label>\n      <input class=\"glp-input\" id=\"glp-n-desc\" type=\"text\" placeholder=\"cth. Deposit IEP, kemasukan Januari\">\n    <\/div>\n\n    <p class=\"glp-fine\"><svg class=\"glp-ico\" width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z\"\/><\/svg><span>Ini adalah bayaran, bukan pendaftaran. Kami akan menghantar pengesahan serta-merta; resit rasmi menyusul setelah pasukan kewangan memadankannya dengan akaun anda.<\/span><\/p>\n    <div class=\"glp-error\" id=\"glp-new-error\" role=\"alert\"><\/div>\n    <button class=\"glp-btn\" id=\"glp-new-next\" type=\"button\">\n      <span>Teruskan<\/span><svg class=\"glp-ico\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><polyline points=\"9 18 15 12 9 6\"\/><\/svg>\n    <\/button>\n  <\/div>\n\n  <!-- Step 4 \u2014 method -->\n  <div class=\"glp-step glp-hidden\" id=\"glp-step-method\">\n    <button type=\"button\" class=\"glp-back\" id=\"glp-method-back\"><svg class=\"glp-ico\" width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><line x1=\"19\" y1=\"12\" x2=\"5\" y2=\"12\"\/><polyline points=\"12 19 5 12 12 5\"\/><\/svg><span>Kembali<\/span><\/button>\n    <h3 class=\"glp-h\">Bagaimana anda ingin membayar?<\/h3>\n    <div class=\"glp-summary\" id=\"glp-summary\"><\/div>\n\n    <div id=\"glp-payer-block\">\n      <div class=\"glp-row\">\n        <div class=\"glp-field\">\n          <label class=\"glp-label\" for=\"glp-p-name\">Nama pembayar<\/label>\n          <input class=\"glp-input\" id=\"glp-p-name\" type=\"text\" autocomplete=\"name\" placeholder=\"cth. Lim Mei Ling\">\n        <\/div>\n        <div class=\"glp-field\">\n          <label class=\"glp-label\" for=\"glp-p-email\">E-mel untuk pengesahan<\/label>\n          <input class=\"glp-input\" id=\"glp-p-email\" type=\"email\" autocomplete=\"email\" placeholder=\"cth. parent@email.com\">\n        <\/div>\n      <\/div>\n    <\/div>\n\n    <div class=\"glp-method-grid glp-method-grid--3\">\n      <button type=\"button\" class=\"glp-method\" data-method=\"fpx\">\n        <span class=\"glp-method__ico\"><svg class=\"glp-ico\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><line x1=\"3\" y1=\"21\" x2=\"21\" y2=\"21\"\/><line x1=\"4\" y1=\"10\" x2=\"4\" y2=\"18\"\/><line x1=\"9\" y1=\"10\" x2=\"9\" y2=\"18\"\/><line x1=\"15\" y1=\"10\" x2=\"15\" y2=\"18\"\/><line x1=\"20\" y1=\"10\" x2=\"20\" y2=\"18\"\/><polyline points=\"2 10 12 3 22 10\"\/><\/svg><\/span>\n        <span class=\"glp-method__body\">\n          <span class=\"glp-method__title\">Perbankan internet (FPX)<\/span>\n          <span class=\"glp-method__sub\">Bayar terus dari akaun bank Malaysia anda<\/span>\n        <\/span>\n      <\/button>\n      <button type=\"button\" class=\"glp-method\" data-method=\"card\">\n        <span class=\"glp-method__ico\"><svg class=\"glp-ico\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><rect x=\"2\" y=\"5\" width=\"20\" height=\"14\" rx=\"2\"\/><line x1=\"2\" y1=\"10\" x2=\"22\" y2=\"10\"\/><\/svg><\/span>\n        <span class=\"glp-method__body\">\n          <span class=\"glp-method__title\">Kad Debit \/ Kredit<\/span>\n          <span class=\"glp-method__sub\">Visa dan Mastercard<\/span>\n        <\/span>\n      <\/button>\n      <button type=\"button\" class=\"glp-method\" data-method=\"alipay\">\n        <span class=\"glp-method__ico\"><svg class=\"glp-ico\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M3 7V5a2 2 0 0 1 2-2h2\"\/><path d=\"M17 3h2a2 2 0 0 1 2 2v2\"\/><path d=\"M21 17v2a2 2 0 0 1-2 2h-2\"\/><path d=\"M7 21H5a2 2 0 0 1-2-2v-2\"\/><rect x=\"7\" y=\"7\" width=\"4\" height=\"4\"\/><rect x=\"13\" y=\"13\" width=\"4\" height=\"4\"\/><\/svg><\/span>\n        <span class=\"glp-method__body\">\n          <span class=\"glp-method__title\">Alipay<\/span>\n          <span class=\"glp-method__sub\">Imbas dengan aplikasi Alipay<\/span>\n        <\/span>\n      <\/button>\n    <\/div>\n\n    <!-- What the payer will actually see once they reach Stripe. Apple Pay and\n         Google Pay appear automatically on a supported device; the card brands are\n         those enabled on the account. -->\n    <div class=\"glp-accepts\">\n      <span class=\"glp-accepts__label\">Turut diterima<\/span>\n      <span class=\"glp-accepts__list\">\n        <span class=\"glp-brand\">Apple&nbsp;Pay<\/span>\n        <span class=\"glp-brand\">Google&nbsp;Pay<\/span>\n        <span class=\"glp-brand\">Visa<\/span>\n        <span class=\"glp-brand\">Mastercard<\/span>\n        <span class=\"glp-brand\">UnionPay<\/span>\n      <\/span>\n    <\/div>\n\n    <div class=\"glp-error\" id=\"glp-method-error\" role=\"alert\"><\/div>\n      <p class=\"glp-alt glp-hidden\" id=\"glp-method-alt\">Halaman ini bermasalah? Anda juga boleh membayar terus di <a class=\"glp-alt__link\" href=\"https:\/\/erp.glacademy.edu.my\/pay\" rel=\"noopener\">Buka halaman pembayaran<\/a><\/p>\n    <p class=\"glp-fine\"><svg class=\"glp-ico\" width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><rect x=\"3\" y=\"11\" width=\"18\" height=\"11\" rx=\"2\"\/><path d=\"M7 11V7a5 5 0 0 1 10 0v4\"\/><\/svg><span>Anda akan dibawa ke halaman pembayaran yang selamat. GL Academy tidak sekali-kali melihat atau menyimpan maklumat kad atau perbankan anda.<\/span><\/p>\n  <\/div>\n\n  <!-- Step 5 \u2014 outcome, shown on return from the gateway -->\n  <div class=\"glp-step glp-hidden\" id=\"glp-step-done\">\n    <div class=\"glp-result glp-result--ok glp-hidden\" id=\"glp-result-ok\">\n      <span class=\"glp-result__ico\"><svg class=\"glp-ico\" width=\"30\" height=\"30\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M22 11.08V12a10 10 0 1 1-5.93-9.14\"\/><polyline points=\"22 4 12 14.01 9 11.01\"\/><\/svg><\/span>\n      <h3 class=\"glp-h\">Bayaran diterima<\/h3>\n      <p class=\"glp-sub\">Terima kasih. Pengesahan sedang dihantar ke e-mel anda. Jika anda membayar invois, resit rasmi akan menyusul sebentar lagi.<\/p>\n      <p class=\"glp-ref\" id=\"glp-done-ref\"><\/p>\n    <\/div>\n    <div class=\"glp-result glp-result--bad glp-hidden\" id=\"glp-result-bad\">\n      <span class=\"glp-result__ico\"><svg class=\"glp-ico\" width=\"30\" height=\"30\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z\"\/><line x1=\"12\" y1=\"9\" x2=\"12\" y2=\"13\"\/><line x1=\"12\" y1=\"17\" x2=\"12.01\" y2=\"17\"\/><\/svg><\/span>\n      <h3 class=\"glp-h\">Bayaran tidak selesai<\/h3>\n      <p class=\"glp-sub\">Tiada caj dikenakan. Anda boleh cuba semula, atau membuat pemindahan bank menggunakan maklumat di atas.<\/p>\n      <p class=\"glp-alt\">Halaman ini bermasalah? Anda juga boleh membayar terus di <a class=\"glp-alt__link\" href=\"https:\/\/erp.glacademy.edu.my\/pay\" rel=\"noopener\">Buka halaman pembayaran<\/a><\/p>\n    <\/div>\n    <button type=\"button\" class=\"glp-btn glp-btn--ghost\" data-goto=\"who\">Buat bayaran lain<\/button>\n  <\/div>\n\n<\/div>\n\n<!-- ============================================================\n  ONLINE PAYMENT \u2014 behaviour\n  Source: tools\/pay-page\/app\/ (built by tools\/pay-page\/build.py). Talks to WordPress, which proxies to the ERP with the\n  API key attached server-side. Every amount chosen here is re-validated against the real\n  invoice before a ringgit is charged, so this file only ever builds a REQUEST.\n============================================================ -->\n<script>\n(function () {\n  \"use strict\";\n  var app = document.getElementById(\"gl-pay-app\");\n  if (!app) return;\n\n  var API = \"\/wp-json\/glacademy\/v1\";\n  var T = {due: \"tertunggak\", nothingDue: \"Tiada baki tertunggak \u2014 terima kasih.\", ref: \"Rujukan\", searching: \"Mencari\u2026\", selected: \"Dipilih\", eQuery: \"Sila masukkan alamat e-mel, pasport atau nombor kad pengenalan.\", eNotFound: \"Kami tidak menemui akaun dengan maklumat tersebut. Semak ejaan, cuba alamat e-mel yang lain, atau e-mel hello@glacademy.edu.my dan kami akan membantu.\", eTooMany: \"Terlalu banyak carian. Sila tunggu beberapa minit dan cuba lagi.\", eSearch: \"Kami tidak dapat membuat carian buat masa ini. Sila cuba sebentar lagi.\", eNetwork: \"Kami tidak dapat menghubungi sistem. Sila semak sambungan anda dan cuba lagi.\", ePick: \"Sila pilih sekurang-kurangnya satu item untuk dibayar.\", eMix: \"Sila bayar item invois dahulu, kemudian tambah bayaran tambahan secara berasingan \u2014 resitnya berbeza.\", eName: \"Sila masukkan nama penuh anda.\", eEmail: \"Sila masukkan alamat e-mel yang sah \u2014 pengesahan akan dihantar ke sana.\", eAmount: \"Sila masukkan jumlah yang ingin anda bayar.\", eDesc: \"Sila nyatakan tujuan bayaran ini.\", ePayerName: \"Sila masukkan nama pembayar.\", eStart: \"Kami tidak dapat memulakan bayaran. Sila cuba lagi, atau buat pemindahan bank di atas.\"};\n\n  var state = { who: null, students: [], picked: {}, extra: null, payer: {}, kind: \"invoice\", pending: null, backTo: \"who\" };\n\n  function $(id) { return document.getElementById(id); }\n  function rm(n) { return \"RM \" + (Number(n) || 0).toLocaleString(\"en-MY\", { minimumFractionDigits: 2, maximumFractionDigits: 2 }); }\n  function esc(s) {\n    return String(s == null ? \"\" : s).replace(\/[&<>\"']\/g, function (c) {\n      return { \"&\": \"&amp;\", \"<\": \"&lt;\", \">\": \"&gt;\", '\"': \"&quot;\", \"'\": \"&#39;\" }[c];\n    });\n  }\n  function show(id) {\n    var steps = app.querySelectorAll(\".glp-step\");\n    for (var i = 0; i < steps.length; i++) steps[i].classList.add(\"glp-hidden\");\n    $(id).classList.remove(\"glp-hidden\");\n    app.scrollIntoView({ behavior: \"smooth\", block: \"nearest\" });\n  }\n  function err(id, msg) { var e = $(id); if (e) { e.textContent = msg || \"\"; e.classList.toggle(\"glp-error--on\", !!msg); } if (!msg) alt(id, false); }\n  \/* The way out to the ERP's own payment page, offered only when this page fails to reach it. *\/\n  function alt(id, on) { var a = $(id.replace(\"-error\", \"-alt\")); if (a) a.classList.toggle(\"glp-hidden\", !on); }\n  function busy(btn, on, label) {\n    if (!btn) return;\n    btn.disabled = !!on;\n    var s = btn.querySelector(\"span\");\n    if (!s) return;\n    if (on) { s.dataset.was = s.textContent; s.textContent = label || T.searching; }\n    else if (s.dataset.was) { s.textContent = s.dataset.was; }\n  }\n  function detail(d, fallback) { return (d && d.detail) ? d.detail : fallback; }\n\n  async function post(path, body) {\n    var r = await fetch(API + path, { method: \"POST\", headers: { \"Content-Type\": \"application\/json\" }, body: JSON.stringify(body) });\n    var data = null;\n    try { data = await r.json(); } catch (e) { data = null; }\n    if (!r.ok) throw data || {};\n    return data;\n  }\n\n  \/* ---- step 1 ---- *\/\n  app.addEventListener(\"click\", function (ev) {\n    var c = ev.target.closest(\"[data-who]\");\n    if (c) {\n      state.who = c.getAttribute(\"data-who\");\n      state.kind = state.who === \"new\" ? \"adhoc\" : \"invoice\";\n      show(state.who === \"new\" ? \"glp-step-new\" : \"glp-step-find\");\n      return;\n    }\n    var b = ev.target.closest(\"[data-goto]\");\n    if (b) {\n      var to = b.getAttribute(\"data-goto\");\n      if (to === \"who\") { state.picked = {}; state.extra = null; state.payer = {}; state.pending = null; }\n      show(\"glp-step-\" + to);\n    }\n  });\n\n  \/* ---- step 2: find ---- *\/\n  $(\"glp-find-form\").addEventListener(\"submit\", async function (ev) {\n    ev.preventDefault();\n    var q = $(\"glp-q\").value.trim();\n    err(\"glp-find-error\", \"\");\n    if (!q) { err(\"glp-find-error\", T.eQuery); return; }\n\n    var btn = $(\"glp-find-btn\");\n    busy(btn, true);\n    try {\n      var r = await fetch(API + \"\/pay-lookup?q=\" + encodeURIComponent(q));\n      var data = null;\n      try { data = await r.json(); } catch (e) { data = null; }\n      if (r.status === 429) { err(\"glp-find-error\", detail(data, T.eTooMany)); return; }\n      if (!r.ok) { err(\"glp-find-error\", detail(data, T.eSearch)); alt(\"glp-find-error\", true); return; }\n      if (!data.found || !data.students.length) { err(\"glp-find-error\", T.eNotFound); return; }\n      state.students = data.students; state.picked = {}; state.extra = null;\n      renderStudents();\n      show(\"glp-step-pick\");\n    } catch (e) {\n      err(\"glp-find-error\", T.eNetwork); alt(\"glp-find-error\", true);\n    } finally { busy(btn, false); }\n  });\n\n  \/* ---- step 3: pick ---- *\/\n  function renderStudents() {\n    var html = \"\";\n    state.students.forEach(function (st, si) {\n      html += '<div class=\"glp-student\">';\n      html += '<div class=\"glp-student__head\">';\n      html += '<span class=\"glp-student__name\">' + esc(st.masked_name) + \"<\/span>\";\n      html += '<span class=\"glp-student__email\">' + esc(st.masked_email) + \"<\/span>\";\n      html += '<span class=\"glp-student__due\">' + rm(st.total_due) + \"<\/span><\/div>\";\n      if (!st.invoices.length) html += '<p class=\"glp-student__clear\">' + esc(T.nothingDue) + \"<\/p>\";\n      st.invoices.forEach(function (inv, ii) {\n        var key = si + \":\" + ii;\n        html += '<div class=\"glp-inv\">';\n        html += '<label class=\"glp-inv__head\"><input type=\"checkbox\" class=\"glp-inv__all\" data-inv=\"' + key + '\">';\n        html += '<span class=\"glp-inv__no\">' + esc(inv.invoice_number) + \"<\/span>\";\n        if (inv.due_date) html += '<span class=\"glp-inv__date\">' + esc(inv.due_date) + \"<\/span>\";\n        html += '<span class=\"glp-inv__amt\">' + rm(inv.balance) + \"<\/span><\/label>\";\n        html += '<div class=\"glp-items\">';\n        inv.items.forEach(function (it, xi) {\n          var ik = key + \":\" + xi;\n          html += '<div class=\"glp-item\"><label class=\"glp-item__main\">';\n          html += '<input type=\"checkbox\" class=\"glp-item__on\" data-item=\"' + ik + '\">';\n          html += '<span class=\"glp-item__desc\">' + esc(it.description || \"\") + \"<\/span><\/label>\";\n          html += '<div class=\"glp-item__pay\"><span class=\"glp-item__due\">' + rm(it.due) + \" \" + esc(T.due) + \"<\/span>\";\n          html += '<div class=\"glp-amount glp-amount--sm\"><span class=\"glp-amount__cur\">RM<\/span>';\n          html += '<input class=\"glp-input glp-input--amount glp-item__amt\" data-item=\"' + ik + '\" type=\"number\" min=\"0.01\" step=\"0.01\" max=\"' + it.due + '\" value=\"' + it.due.toFixed(2) + '\" disabled><\/div>';\n          html += \"<\/div><\/div>\";\n        });\n        html += \"<\/div><\/div>\";\n      });\n      html += \"<\/div>\";\n    });\n    $(\"glp-students\").innerHTML = html;\n    recalc();\n  }\n\n  function itemAt(k) { var p = k.split(\":\"); return state.students[+p[0]].invoices[+p[1]].items[+p[2]]; }\n  function invAt(k) { var p = k.split(\":\"); return state.students[+p[0]].invoices[+p[1]]; }\n\n  $(\"glp-students\").addEventListener(\"change\", function (ev) {\n    var t = ev.target;\n    if (t.classList.contains(\"glp-inv__all\")) {\n      var key = t.getAttribute(\"data-inv\");\n      var boxes = $(\"glp-students\").querySelectorAll('.glp-item__on[data-item^=\"' + key + ':\"]');\n      for (var i = 0; i < boxes.length; i++) { boxes[i].checked = t.checked; syncItem(boxes[i]); }\n    }\n    if (t.classList.contains(\"glp-item__on\")) syncItem(t);\n    if (t.classList.contains(\"glp-item__amt\")) {\n      var ik = t.getAttribute(\"data-item\"), due = itemAt(ik).due, v = parseFloat(t.value);\n      if (isNaN(v) || v <= 0) t.value = \"\"; else if (v > due) t.value = due.toFixed(2);\n      if (state.picked[ik]) state.picked[ik].amount = parseFloat(t.value) || 0;\n    }\n    recalc();\n  });\n  $(\"glp-students\").addEventListener(\"input\", function (ev) {\n    if (!ev.target.classList.contains(\"glp-item__amt\")) return;\n    var ik = ev.target.getAttribute(\"data-item\");\n    if (state.picked[ik]) state.picked[ik].amount = parseFloat(ev.target.value) || 0;\n    recalc();\n  });\n\n  function syncItem(box) {\n    var ik = box.getAttribute(\"data-item\");\n    var amt = $(\"glp-students\").querySelector('.glp-item__amt[data-item=\"' + ik + '\"]');\n    var it = itemAt(ik), inv = invAt(ik);\n    amt.disabled = !box.checked;\n    if (box.checked) {\n      if (!parseFloat(amt.value)) amt.value = it.due.toFixed(2);\n      state.picked[ik] = { invoice_id: inv.invoice_id, item_id: it.item_id, amount: parseFloat(amt.value) || it.due, label: it.description, invoice_number: inv.invoice_number };\n    } else { delete state.picked[ik]; }\n  }\n\n  $(\"glp-extra-on\").addEventListener(\"change\", function () {\n    $(\"glp-extra-fields\").classList.toggle(\"glp-hidden\", !this.checked);\n    if (!this.checked) { state.extra = null; recalc(); }\n  });\n  [\"glp-extra-desc\", \"glp-extra-amt\"].forEach(function (id) {\n    $(id).addEventListener(\"input\", function () {\n      var d = $(\"glp-extra-desc\").value.trim(), a = parseFloat($(\"glp-extra-amt\").value) || 0;\n      state.extra = (d && a > 0) ? { description: d, amount: a } : null;\n      recalc();\n    });\n  });\n\n  function total() {\n    var s = 0;\n    Object.keys(state.picked).forEach(function (k) { s += Number(state.picked[k].amount) || 0; });\n    if (state.extra) s += Number(state.extra.amount) || 0;\n    return Math.round(s * 100) \/ 100;\n  }\n  function recalc() { $(\"glp-total\").textContent = rm(total()); $(\"glp-pick-next\").disabled = total() <= 0; }\n\n  $(\"glp-pick-next\").addEventListener(\"click\", function () {\n    err(\"glp-pick-error\", \"\");\n    var allocs = Object.keys(state.picked).map(function (k) { return state.picked[k]; });\n    if (!allocs.length && !state.extra) { err(\"glp-pick-error\", T.ePick); return; }\n    \/* An invoice payment becomes a receipt; an off-invoice extra only a confirmation.\n       Two different kinds of record, so they cannot ride on one charge. *\/\n    if (allocs.length && state.extra) { err(\"glp-pick-error\", T.eMix); return; }\n\n    if (state.extra) { state.kind = \"adhoc\"; state.pending = { description: state.extra.description, amount: state.extra.amount }; }\n    else { state.kind = \"invoice\"; state.pending = { allocations: allocs.map(function (a) { return { invoice_id: a.invoice_id, item_id: a.item_id, amount: a.amount }; }) }; }\n    state.backTo = \"pick\";\n    $(\"glp-payer-block\").classList.toggle(\"glp-hidden\", state.kind !== \"adhoc\");\n    renderSummary(allocs, total());\n    show(\"glp-step-method\");\n  });\n\n  function renderSummary(allocs, sum) {\n    var html = '<ul class=\"glp-summary__list\">';\n    if (state.kind === \"adhoc\") {\n      html += \"<li><span>\" + esc(state.pending.description) + \"<\/span><b>\" + rm(state.pending.amount) + \"<\/b><\/li>\";\n    } else {\n      allocs.forEach(function (a) {\n        html += \"<li><span>\" + esc(a.invoice_number) + \" &middot; \" + esc(a.label) + \"<\/span><b>\" + rm(a.amount) + \"<\/b><\/li>\";\n      });\n    }\n    html += \"<\/ul><div class=\\\"glp-summary__total\\\"><span>\" + esc(T.selected) + \"<\/span><b>\" + rm(sum) + \"<\/b><\/div>\";\n    $(\"glp-summary\").innerHTML = html;\n  }\n\n  \/* ---- step 3b: not registered ---- *\/\n  $(\"glp-new-next\").addEventListener(\"click\", function () {\n    err(\"glp-new-error\", \"\");\n    var name = $(\"glp-n-name\").value.trim(), email = $(\"glp-n-email\").value.trim();\n    var amt = parseFloat($(\"glp-n-amt\").value) || 0, desc = $(\"glp-n-desc\").value.trim();\n    if (!name) { err(\"glp-new-error\", T.eName); $(\"glp-n-name\").focus(); return; }\n    if (!\/^[^@\\s]+@[^@\\s]+\\.[^@\\s]+$\/.test(email)) { err(\"glp-new-error\", T.eEmail); $(\"glp-n-email\").focus(); return; }\n    if (amt <= 0) { err(\"glp-new-error\", T.eAmount); $(\"glp-n-amt\").focus(); return; }\n    if (!desc) { err(\"glp-new-error\", T.eDesc); $(\"glp-n-desc\").focus(); return; }\n\n    state.kind = \"adhoc\";\n    state.payer = { payer_name: name, payer_email: email, payer_phone: $(\"glp-n-phone\").value.trim() };\n    state.pending = { description: desc, amount: amt };\n    state.backTo = \"new\";\n    $(\"glp-payer-block\").classList.add(\"glp-hidden\");\n    renderSummary([], amt);\n    show(\"glp-step-method\");\n  });\n\n  $(\"glp-method-back\").addEventListener(\"click\", function () { show(\"glp-step-\" + (state.backTo || \"who\")); });\n\n  \/* ---- step 4: pay ---- *\/\n  app.addEventListener(\"click\", async function (ev) {\n    var m = ev.target.closest(\"[data-method]\");\n    if (!m) return;\n    err(\"glp-method-error\", \"\");\n\n    var payer = state.payer;\n    \/* Only asked when we have nobody on file. A matched family already identified itself\n       by finding its invoices, and the server fills the name and email from the student\n       record \u2014 server-side on purpose, because the lookup returns only MASKED details and\n       pre-filling the real ones here would undo the masking. *\/\n    if (state.kind === \"adhoc\" && !payer.payer_email) {\n      var name = $(\"glp-p-name\").value.trim(), email = $(\"glp-p-email\").value.trim();\n      if (!name) { err(\"glp-method-error\", T.ePayerName); $(\"glp-p-name\").focus(); return; }\n      if (!\/^[^@\\s]+@[^@\\s]+\\.[^@\\s]+$\/.test(email)) { err(\"glp-method-error\", T.eEmail); $(\"glp-p-email\").focus(); return; }\n      payer = { payer_name: name, payer_email: email, payer_phone: \"\" };\n      state.payer = payer;\n    }\n\n    var body = Object.assign({ kind: state.kind, method: m.getAttribute(\"data-method\") }, payer, state.pending);\n    var btns = app.querySelectorAll(\"[data-method]\");\n    for (var i = 0; i < btns.length; i++) btns[i].disabled = true;\n    try {\n      var res = await post(\"\/pay-start\", body);\n      window.location.href = res.url;\n    } catch (e) {\n      err(\"glp-method-error\", detail(e, T.eStart)); alt(\"glp-method-error\", true);\n      for (var j = 0; j < btns.length; j++) btns[j].disabled = false;\n    }\n  });\n\n  \/* ---- back from the gateway ---- *\/\n  (function () {\n    var p = new URLSearchParams(window.location.search);\n    var paid = p.get(\"paid\"), failed = p.get(\"failed\");\n    if (!paid && !failed) return;\n    show(\"glp-step-done\");\n    if (paid) { $(\"glp-result-ok\").classList.remove(\"glp-hidden\"); $(\"glp-done-ref\").textContent = T.ref + \": \" + paid; }\n    else { $(\"glp-result-bad\").classList.remove(\"glp-hidden\"); }\n    window.history.replaceState({}, \"\", window.location.pathname + \"#pay-online\");\n  })();\n})();\n<\/script>\n    <\/div>\n\n    <aside class=\"pay2-after\" aria-labelledby=\"pay2-after-t\">\n      <span class=\"pay2-after__ico\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M6 3h12v18l-3-2-3 2-3-2-3 2z\"\/><path d=\"M9 8h6M9 12h6M9 16h3\"\/><\/svg><\/span>\n      <div>\n        <h2 class=\"pay2-after__t\" id=\"pay2-after-t\">Selepas membayar, hantarkan resit kepada kami<\/h2>\n        <p class=\"pay2-after__b\">Sertakan nama penuh dan tarikh lahir pelajar supaya kami dapat memadankannya dengan akaun yang betul.<\/p>\n      <\/div>\n      <div class=\"pay2-after__btns\">\n        <a class=\"pay2-btn pay2-btn--navy\" href=\"https:\/\/wa.me\/601154397010?text=Hi%20GL%20Academy%2C%20Saya%20telah%20membuat%20pembayaran%20dan%20ingin%20menghantar%20resit%20saya.\" target=\"_blank\" rel=\"noopener\"><svg aria-hidden=\"true\" focusable=\"false\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z\"\/><\/svg>WhatsApp<\/a>\n        <a class=\"pay2-btn pay2-btn--line\" href=\"mailto:hello@glacademy.edu.my?subject=Penghantaran%20Resit%20Pembayaran&amp;body=Sila%20rujuk%20resit%20pembayaran%20saya%20yang%20dilampirkan.%0A%0ANama%20Pelajar%3A%20%0ATarikh%20Lahir%3A%20\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\" focusable=\"false\"><rect x=\"3\" y=\"5\" width=\"18\" height=\"14\" rx=\"2.5\"\/><path d=\"M3.8 6.6l8.2 6 8.2-6\"\/><\/svg>E-mel<\/a>\n      <\/div>\n    <\/aside>\n  <\/div>\n<\/section>\n<script>\/* Payment page v2 shell: currency toggle, Copy buttons, and the Pay online card's two choices, which\n   open the online payment app (#gl-pay-app) at the matching step. Runs AFTER the app's own script:\n   it drives the app only through the app's own buttons, so the payment flow itself is untouched. *\/\n(function () {\n  'use strict';\n  var root = document.querySelector('.pay2-main');\n  if (!root) return;\n  var L = root.dataset;\n  var live = document.getElementById('pay2-live');\n  var motion = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches ? 'auto' : 'smooth';\n\n  \/* \u2500\u2500 MYR | USD \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n  var seg = root.querySelectorAll('.pay2-seg__b');\n  function currency(c) {\n    seg.forEach(function (b) { b.setAttribute('aria-pressed', b.getAttribute('data-tab') === c ? 'true' : 'false'); });\n    root.querySelectorAll('[data-cur]').forEach(function (el) { el.hidden = el.getAttribute('data-cur') !== c; });\n  }\n  seg.forEach(function (b) { b.addEventListener('click', function () { currency(b.getAttribute('data-tab')); }); });\n\n  \/* \u2500\u2500 Copy \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n     A number goes on the clipboard without dashes or spaces (what a banking app's field accepts);\n     a name goes as written. If the browser refuses, the value is selected for a manual copy. *\/\n  function select(el) {\n    var r = document.createRange(); r.selectNodeContents(el);\n    var s = window.getSelection(); s.removeAllRanges(); s.addRange(r);\n  }\n  function legacyCopy(text) {\n    var ta = document.createElement('textarea');\n    ta.value = text; ta.setAttribute('readonly', ''); ta.style.position = 'fixed'; ta.style.opacity = '0';\n    document.body.appendChild(ta); ta.select();\n    var ok = false;\n    try { ok = document.execCommand('copy'); } catch (e) { ok = false; }\n    document.body.removeChild(ta);\n    return ok;\n  }\n  root.addEventListener('click', function (e) {\n    var btn = e.target.closest('.pay2-copy');\n    if (!btn) return;\n    var el = document.getElementById(btn.getAttribute('data-copy-target'));\n    if (!el) return;\n    var text = el.textContent.trim();\n    if (\/^[\\d\\s-]+$\/.test(text)) text = text.replace(\/[-\\s]\/g, '');\n    var label = btn.querySelector('.pay2-copy__l');\n    function done() {\n      btn.classList.add('is-done');\n      if (label) label.textContent = L.copied;\n      if (live) live.textContent = L.copied;\n      clearTimeout(btn._t);\n      btn._t = setTimeout(function () {\n        btn.classList.remove('is-done');\n        if (label) label.textContent = L.copy;\n        if (live) live.textContent = '';\n      }, 1600);\n    }\n    function fallback() { if (legacyCopy(text)) done(); else select(el); }\n    if (navigator.clipboard && window.isSecureContext) navigator.clipboard.writeText(text).then(done, fallback);\n    else fallback();\n  });\n\n  \/* \u2500\u2500 Pay online: the two choices open the app \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n     Each choice is a link to the ERP's own payment page, so with no script (or no app) it still\n     goes somewhere that works. With the app present it opens the app in place instead. *\/\n  var wrap = document.getElementById('pay-app');\n  var app = document.getElementById('gl-pay-app');\n  if (!wrap || !app) return;\n  var choices = root.querySelectorAll('[data-pay-who]');\n  var quiet = false, last = null;\n\n  function mark(on) {\n    choices.forEach(function (c) { c.setAttribute('aria-expanded', c === on ? 'true' : 'false'); });\n  }\n  function reveal(behavior) {\n    wrap.hidden = false;\n    wrap.scrollIntoView({ behavior: behavior || motion, block: 'start' });\n  }\n  function focusStep() {\n    \/* the first heading actually on screen \u2014 the result step holds two, one of them hidden *\/\n    var h = [].filter.call(app.querySelectorAll('.glp-step:not(.glp-hidden) .glp-h'), function (x) {\n      return x.getClientRects().length > 0;\n    })[0];\n    if (!h) return;\n    h.setAttribute('tabindex', '-1');\n    try { h.focus({ preventScroll: true }); } catch (e) { h.focus(); }\n  }\n\n  choices.forEach(function (c) {\n    c.setAttribute('role', 'button');\n    c.setAttribute('aria-controls', 'pay-app');\n    c.setAttribute('aria-expanded', 'false');\n    c.addEventListener('click', function (e) {\n      var who = app.querySelector('#glp-step-who [data-who=\"' + c.getAttribute('data-pay-who') + '\"]');\n      if (!who) return;                       \/* no app: follow the link to the ERP *\/\n      e.preventDefault();\n      \/* The app's own \"Back to the start\" clears whatever an earlier choice left behind\u2026 *\/\n      var reset = app.querySelector('#glp-step-find [data-goto=\"who\"]');\n      quiet = true;\n      if (reset) reset.click();\n      quiet = false;\n      \/* \u2026then its own first-step button sets the path, exactly as if it had been pressed there. *\/\n      who.click();\n      last = c; mark(c);\n      reveal();\n      focusStep();\n    });\n    c.addEventListener('keydown', function (e) {\n      if (e.key === ' ' || e.key === 'Spacebar') { e.preventDefault(); c.click(); }\n    });\n  });\n\n  \/* Every way back to the app's first step (Back, Make another payment) returns to the card. *\/\n  wrap.addEventListener('click', function (e) {\n    if (quiet || !e.target.closest('[data-goto=\"who\"]')) return;\n    wrap.hidden = true;\n    mark(null);\n    var card = document.getElementById('pay-online');\n    if (card) card.scrollIntoView({ behavior: motion, block: 'start' });\n    var back = last || choices[0];   \/* none chosen yet when the page opened on a gateway result *\/\n    if (back) { try { back.focus({ preventScroll: true }); } catch (err) { back.focus(); } }\n  });\n\n  \/* Back from the gateway: the app has already put up its result \u2014 show it. The app rewrites the\n     address to end in #pay-online, and the browser jumps to that fragment once the page has parsed,\n     after anything done here; pointing the fragment at the app instead makes the two jumps agree. *\/\n  var outcome = document.getElementById('glp-step-done');\n  if (outcome && !outcome.classList.contains('glp-hidden')) {\n    wrap.hidden = false;\n    try { history.replaceState(history.state, '', location.pathname + location.search + '#pay-app'); } catch (e) { \/* old browser *\/ }\n    var go = function () { wrap.scrollIntoView({ block: 'start' }); focusStep(); };\n    go();\n    if (document.readyState === 'loading') {\n      document.addEventListener('DOMContentLoaded', function () { setTimeout(go, 0); });\n    }\n  }\n})();<\/script>\n\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-4291","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/glacademy.edu.my\/ms\/wp-json\/wp\/v2\/pages\/4291","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/glacademy.edu.my\/ms\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/glacademy.edu.my\/ms\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/glacademy.edu.my\/ms\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/glacademy.edu.my\/ms\/wp-json\/wp\/v2\/comments?post=4291"}],"version-history":[{"count":5,"href":"https:\/\/glacademy.edu.my\/ms\/wp-json\/wp\/v2\/pages\/4291\/revisions"}],"predecessor-version":[{"id":5098,"href":"https:\/\/glacademy.edu.my\/ms\/wp-json\/wp\/v2\/pages\/4291\/revisions\/5098"}],"wp:attachment":[{"href":"https:\/\/glacademy.edu.my\/ms\/wp-json\/wp\/v2\/media?parent=4291"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}