Web Adding payment details in Shop

Watch a recorded Adding payment details flow inside Shop on desktop web. Every screen and interaction is captured step by step — see exactly how Shop designs the Adding payment details experience for web users.

Shopping

The Shop app, created by Shopify, is a free mobile application for customers to track orders, discover new brands and products, make faster checkouts using Shop Pay, and manage their payments for Shop Pay Installments.

Save
download icon Download all screens
Showing 13 Flows
Video preview
In this video
  • Home
  • Account
  • Log in
  • Enter code
  • Email confirmed
  • Enter phone number
  • Enter code
  • Add card
  • Enter card number
  • Enter name
  • Enter expiration date
  • Enter code
  • Enter nickname
  • Add address
  • Select country
  • Enter name
  • Enter company name
  • Enter Address
  • Enter postcode
  • Enter city
  • Select region
  • Added
  • Error
Adding payment details 30 Screens
Adding payment details screenshot
Home
Adding payment details screenshot
Account
Adding payment details screenshot
Adding payment details screenshot

Sign up to unlock this user flow

Try 3 Days
Log in
Adding payment details screenshot

Sign up to unlock this user flow

Try 3 Days
Enter code
Adding payment details screenshot

Sign up to unlock this user flow

Try 3 Days
Email confirmed
Adding payment details screenshot

Sign up to unlock this user flow

Try 3 Days
Enter phone number
Adding payment details screenshot

Sign up to unlock this user flow

Try 3 Days
Adding payment details screenshot

Sign up to unlock this user flow

Try 3 Days
Enter code
Adding payment details screenshot

Sign up to unlock this user flow

Try 3 Days
Adding payment details screenshot

Sign up to unlock this user flow

Try 3 Days
Adding payment details screenshot

Sign up to unlock this user flow

Try 3 Days
Add card
Adding payment details screenshot

Sign up to unlock this user flow

Try 3 Days
Enter card number
Adding payment details screenshot

Sign up to unlock this user flow

Try 3 Days
Enter name
Adding payment details screenshot

Sign up to unlock this user flow

Try 3 Days
Enter expiration date
Adding payment details screenshot

Sign up to unlock this user flow

Try 3 Days
Enter code
Adding payment details screenshot

Sign up to unlock this user flow

Try 3 Days
Enter nickname
Adding payment details screenshot

Sign up to unlock this user flow

Try 3 Days
Adding payment details screenshot

Sign up to unlock this user flow

Try 3 Days
Add address
Adding payment details screenshot

Sign up to unlock this user flow

Try 3 Days
Select country
Adding payment details screenshot

Sign up to unlock this user flow

Try 3 Days
Enter name
Adding payment details screenshot

Sign up to unlock this user flow

Try 3 Days
Enter company name
Adding payment details screenshot

Sign up to unlock this user flow

Try 3 Days
Enter Address
Adding payment details screenshot

Sign up to unlock this user flow

Try 3 Days
Enter postcode
Adding payment details screenshot

Sign up to unlock this user flow

Try 3 Days
Enter city
Adding payment details screenshot

Sign up to unlock this user flow

Try 3 Days
Select region
Adding payment details screenshot

Sign up to unlock this user flow

Try 3 Days
Adding payment details screenshot

Sign up to unlock this user flow

Try 3 Days
Added
Adding payment details screenshot

Sign up to unlock this user flow

Try 3 Days
Adding payment details screenshot

Sign up to unlock this user flow

Try 3 Days
Error
Unlock 13 hidden flows

Log In or Sign Up to See All
Shop Flows

  • Home
  • Account
  • Log in
  • Enter code
  • Email confirmed
  • Enter phone number
  • Enter code
  • Add card
  • Enter card number
  • Enter name
  • Enter expiration date
  • Enter code
  • Enter nickname
  • Add address
  • Select country
  • Enter name
  • Enter company name
  • Enter Address
  • Enter postcode
  • Enter city
  • Select region
  • Added
  • Error

Shop

Adding payment details
All saved

Add to collection

Create collection

Other Shopping apps you might like

Airbnb screenshot

Shop Adding payment details Flow on Web — Full Sequence

This recording documents the Adding payment details flow inside Shop's web experience, captured from the live desktop product. Rather than showing summarized highlights, it preserves the full flow — every screen, hover state, transition, and UX decision — so you can study the real experience, not a press-ready version.

Web-Specific Adding payment details Design Considerations

Adding payment details on the web comes with different constraints than mobile: larger screens, multi-column layouts, keyboard shortcuts, and richer interaction possibilities. Shop's approach to Adding payment details on web reflects those realities, and seeing it in full makes it easy to understand the design decisions behind the flow.

A Reference for Adding payment details Research on the Web

For growth teams, designers, and PMs researching Adding payment details patterns on the web, this recording provides a direct reference to a production implementation. For teams benchmarking against Shop specifically, it's a detailed look at how the brand handles this moment of the experience.

Frequently Asked Questions

What does the Shop Adding payment details flow cover?

The recording captures the full Adding payment details sequence inside Shop on desktop web — every step, every transition, and every significant design decision from start to finish.

How does Shop's web Adding payment details differ from its mobile versions?

Web Adding payment details flows typically use more screen real estate, richer hover interactions, and keyboard-friendly patterns that don't work on mobile. If Shop also has iOS or Android entries, you can cross-reference to see the platform differences.

Can I see Adding payment details flows from other web products?

Yes. The web Adding payment details flows category gathers the same flow type from many different web products, so you can compare Shop's approach against competitors and alternatives.

How up to date is the Shop Adding payment details recording?

Recordings are refreshed when Shop ships notable redesigns, so the Adding payment details flow reflects the current web experience.