Mobile: make the next action obvious
On a phone, customers may prefer opening a supported UPI app directly. Keep the amount and merchant visible before that handoff. Provide a way back to the checkout so the customer can see the final order status. If an app is unavailable, explain how to use the QR or another supported method without implying that the app launch completed payment.
Desktop: prioritise the QR
Desktop customers often scan the on-screen code with a second device. Give the QR enough contrast and quiet space to scan reliably. Place it near the amount and payee, and avoid decorative overlays on top of the code. A copyable order reference helps support if the customer switches between devices.
One order across both devices
Mobile and desktop should lead to the same server-side order status. Poll or refresh carefully, show a clear expiry, and stop presenting “pay now” once the order is verified. Test the layout at narrow screen widths as well as a normal laptop viewport.