> ## Documentation Index
> Fetch the complete documentation index at: https://developer.tazapay.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Pay by Bank Experience
> See how Pay by Bank works on mobile — a seamless, bank-authenticated checkout flow
export const STEPS = [{
label: "Go to Checkout",
time: 0
}, {
label: "Pay By Bank",
time: 0.5
}, {
label: "Select Bank",
time: 1.5
}, {
label: "Give Consent",
time: 3
}, {
label: "Authenticate",
time: 7
}, {
label: "Success",
time: 10
}];
export function VideoStepPlayer() {
const videoRef = useRef(null);
const [activeStep, setActiveStep] = useState(0);
const [videoTime, setVideoTime] = useState(0);
const [isMobile, setIsMobile] = useState(false);
useEffect(() => {
const check = () => setIsMobile(window.innerWidth < 768);
check();
window.addEventListener("resize", check);
return () => window.removeEventListener("resize", check);
}, []);
useEffect(() => {
const video = videoRef.current;
if (!video) return;
let interval = null;
const tick = () => {
const t = video.currentTime;
setVideoTime(t);
let current = 0;
for (let i = STEPS.length - 1; i >= 0; i--) {
if (t >= STEPS[i].time) {
current = i;
break;
}
}
setActiveStep(current);
};
const startPolling = () => {
if (!interval) interval = setInterval(tick, 100);
};
const stopPolling = () => {
clearInterval(interval);
interval = null;
};
video.addEventListener("play", startPolling);
video.addEventListener("pause", stopPolling);
if (!video.paused) startPolling();
return () => {
stopPolling();
video.removeEventListener("play", startPolling);
video.removeEventListener("pause", stopPolling);
};
}, []);
const segmentFill = i => {
if (i >= STEPS.length - 1) {
if (videoTime < STEPS[i].time) return 0;
return Math.min((videoTime - STEPS[i].time) / (15 - STEPS[i].time) * 100, 100);
}
const start = STEPS[i].time;
const end = STEPS[i + 1].time;
if (videoTime <= start) return 0;
if (videoTime >= end) return 100;
return (videoTime - start) / (end - start) * 100;
};
const handleStepClick = index => {
const video = videoRef.current;
if (!video) return;
video.currentTime = STEPS[index].time;
video.play();
setActiveStep(index);
};
return
{isMobile ?
{STEPS[activeStep].label}
:
{STEPS.map((step, i) =>
)}
}
;
}