Checkout Mascot Animation: Payments, Orders and Emails
By the Charmotion team · Updated
In checkout, a mascot should only confirm what already happened: a loading loop while payment processes, a success reaction once the order is confirmed, and calm text with no character reaction when a payment fails. Never make shoppers wait for an animation, keep it away from payment fields, and use a GIF with a meaningful first frame in confirmation emails.
Key takeaways
- Baymard reports 18% of US shoppers abandoned an order over a too long or complicated checkout, so animation must never add time.
- A failed payment is about money: no error bounce or sad face, a generic decline message and a clear next step, as Stripe's docs suggest.
- Shopify checkout UI extensions run in a sandbox with Shopify's components only, so a custom animation runtime can't run inside checkout.
- Can I email lists Outlook for Windows 2007 to 2019 as not animating GIFs, so the first frame must say "order confirmed" on its own.
- Order tracking maps cleanly: processing to loading, out for delivery to attention, delivered to success.
Already have a character or logo? See your character in real app screens: splash, onboarding, loading and empty-state screens. It's free, runs in your browser and uploads nothing.
Which state fits each checkout and order event?
| Event | State | Where |
|---|---|---|
| Empty cart | sleeping (8) or idle (0) plus "Keep shopping" | Cart page |
| Added to cart | yes | Small, near the cart icon |
| Discount code applied | yes | Next to the new total |
| Payment processing | loading (5) | Next to the disabled Pay button |
| Bank verification (3-D Secure) | None | The bank's screen needs full attention |
| Order confirmed | success, then happy (1) | Confirmation page, email |
| Payment failed | None, or a still idle | Checkout |
| Order shipped, out for delivery | attention (9) | Email, push, order page |
| Delivered | success | Email, push |
| Return requested, refund issued | idle (0), then yes on refund | Order page |
Every row has text that works alone: the amount, the order number, the delivery date. The mascot confirms the tone; it never carries the facts. That matters for screen readers and for anyone who scrolls past the character.
How do I keep animation from slowing checkout?
Treat checkout speed as a hard limit. In Baymard Institute's survey, 18% of US online shoppers had abandoned an order in the past quarter because of a "too long / complicated checkout process" (Baymard). Apple's motion guidance makes the same point at the interaction level: "don't make people wait for an animation to complete before they can do anything" (Apple HIG).
- Never gate on the animation. The confirmation page renders the order details immediately; the success reaction plays alongside, not before.
- Loading means loading. Start the loop when the payment request starts and stop it when the response arrives. No minimum play time.
- Load late. Fetch the animation runtime and files after the payment form is interactive, with a still poster in place.
- Stay out of the form. No character next to card fields, address autocomplete or the Pay button's label.
For loader timing in general, see add a loading animation.
How should the mascot behave when a payment fails?
It shouldn't react at all. A declined payment can be embarrassing or worrying, and an error flinch or a sad face makes it feel like a scolding. Hide the character or leave it still, and let calm copy do the work.
Stripe's documentation helps with the copy. It notes that card issuers categorize most declines as generic and, for privacy and security reasons, discuss specifics only with their cardholders (Stripe). For some codes, such as a card reported lost, Stripe says the specific reason "shouldn't be reported to the customer" and should be presented as a generic decline (Stripe).
A good failed-payment screen:
- says plainly that the payment didn't go through,
- keeps the cart and the entered details,
- offers another payment method and suggests contacting the bank,
- avoids blaming the shopper, which NN/g also advises for error messages in general (NN/g).
Don't promise "you were not charged" unless your payment provider confirms it; authorizations can show as pending on a statement.
Can I put a mascot inside Shopify or a hosted checkout?
Usually not inside the payment step itself. Shopify's checkout UI extensions "run in an isolated sandbox, separate from the checkout page", inside a Web Worker without access to the DOM, and are "limited to specific UI components and APIs that are exposed by the platform" (Shopify). A Rive or Lottie runtime can't run there.
Where you can add one:
- Theme pages: product, cart and drawer, through a custom section. Add animation to Shopify covers video, Rive and GIF in themes.
- Checkout and thank-you extensions: Shopify's image component accepts an image URL; whether an animated GIF plays there is worth testing in your store's preview before relying on it.
- Emails and the order status page: the next section.
Hosted checkouts from payment providers generally offer branding settings such as a logo and colors rather than custom animation, so keep the mascot on your own pages around them.
How do I animate order confirmation and shipping emails?
Use a GIF, and design for the clients that won't play it. Can I email lists Outlook for Windows 2007 through 2019 as not supporting animated GIFs, and notes that Outlook with an Office 365 account plays the animation three times, then stops and shows a play button (Can I email). Gmail and Apple Mail play GIFs.
- First frame carries the meaning. For order confirmed, start on the success pose, not a neutral frame before it.
- Short and small. A success reaction is a few seconds; a 480 px GIF shown at about half that width stays sharp on high-density screens.
- Alt text. "Order confirmed" or the mascot's name and pose, so the email still makes sense with images off.
- Host it. Reference the GIF from your CDN or your store's file storage with an image tag in the template.
Push notifications follow the same idea. On iOS, an attachment can be a GIF up to 10 MB (Apple); send one for shipped and delivered, not for every status change.
Which file goes where in an e-commerce stack?
| Surface | File |
|---|---|
| Product, cart and confirmation pages | Rive .riv (trigger success on confirmation), or transparent WebM plus HEVC MOV |
| Order and shipping emails | GIF with a meaningful first frame |
| iOS push notifications | GIF attachment |
| Ads, Reels, TikTok | 9:16 video, square MP4 |
| Reduced motion on | A still pose with the same text |
Charmotion makes these from one image of your mascot or logo: 17 animations, including loading, success, attention, happy and sleeping, with MP4, 9:16 video, GIFs, the .riv and transparent WebM and MOV (paid plans, from $20/month). What it doesn't make: poses holding your products, a character carrying a box or riding a delivery van, walk cycles, or a progress bar. Order tracking UI stays your own component, with the character beside it.
Frequently asked questions
Should a checkout page show a loading animation during payment?
Yes, while the payment request is actually running, next to a disabled Pay button with a short text label. Start it when the request starts, stop it the moment the response arrives, and never add a minimum play time. Baymard links long, complicated checkouts to abandoned orders.
Can I use an animated GIF in Shopify order confirmation emails?
Yes. Host the GIF and reference it with an image tag in the notification template, then send a test order. Design the first frame to say order confirmed on its own, because Outlook for Windows 2007 to 2019 shows only that frame.
Should a mascot celebrate before the payment is confirmed?
No. Play the success reaction only after your server confirms the order, never when the shopper taps Pay. Celebrating early and then showing a decline is worse than no animation. Show loading during the request, success after confirmation, and nothing on failure.
Quick answers from this guide
Sources
- Cart abandonment rate statistics, Baymard Institute
- Motion, Apple Human Interface Guidelines
- Card declines, Stripe Docs
- Decline codes, Stripe Docs
- Checkout UI extensions, Shopify Developers
- GIF image format support in email clients, Can I email
- Error-Message Guidelines, Nielsen Norman Group
- UNNotificationAttachment, Apple Developer Documentation