Back to product momentsMotion Pack 27 · Workflow
Checkout payment
After payment is submitted, use a processing state and receipt result to reduce uncertainty in checkout.
•••• 4242
Order total$48.00
Build checkout payment: after Pay $36, show processing while the order summary stays visible; on completion, switch to Payment successful and show an order number. Use only a brief looping icon and state copy while waiting, with a reduced-motion treatment.
Input feedbackPress / Tap feedbackThe payment action acknowledges the click when the request starts.State changePerceived performanceThe order summary stays visible while processing state reduces uncertainty during payment.TimingLoopThe processing icon rotates only briefly during the payment window.State changeText morphPayment action and result copy switch to the receipt state.Reduced motionReduced motionReduced motion retains processing and payment-success copy.
Motion rules
The success result includes amount, order number, and a receipt that can be viewed next.
Reduced motion
Keep processing and success copy while omitting icon rotation.
Implementation
Copy HTML, CSS, and the JavaScript required for behavior together.