Commerce & payments

Add payment method flows from real apps

Every add payment method flow we have rebuilt, as a row of numbered screens with the transition between each step. Open one to play it through and import it into Figma.

6 flows from 5 apps

Add payment method on Airbnb

Play all 3 steps

1
Tap Payments
Sheet
2
Tap Add payment method
Dismiss modal or sheet
3
Card added

Add a debit card on Cash App

Play all 13 steps

1
In-place change
2
Tap field
In-place change
3
Type number
In-place change
4
In-place change
5
In-place change
6
Type expiry
In-place change
7
In-place change
8
Type CVV
+5 more

Add a card on Coinbase

Play all 22 steps

1
Push
2
In-place change
3
Scroll
Push
4
Tap Add a payment method
In-place change
5
Scroll
Push
6
Push
7
Tap Credit/Debit card
In-place change
8
+14 more

Manage wallet on PayPal

Play all 8 steps

1
Tap Wallet
In-place change
2
Push
3
Tap balance
Alert / dialog over screen
4
Tap Add Money
Sheet
5
Tap plus
In-place change
6
Push
7
Tap Online purchases
Push
8

Link a card on PayPal

Play all 11 steps

1
Tap Add your cards
Push
2
In-place change
3
In-place change
4
Type number
In-place change
5
Type expiry
In-place change
6
Type code
In-place change
7
In-place change
8
+3 more

Add a payment card on Uber Eats

Play all 18 steps

1
Push
2
Tap Credit or debit card
In-place change
3
Type number
In-place change
4
In-place change
5
Invalid number
In-place change
6
In-place change
7
Fix number
In-place change
8
Card expired
+10 more

Try an editable clone in Figma

Install the free plugin and import 5 screens from any paid clone, or take the whole WhatsApp clone free.

Try 5 screens free in Figma Browse the clones

Not affiliated with, endorsed or sponsored by the companies whose apps we recreate. Their names and logos are trade marks of their owners. Recreated for design reference and education. Rights holders: contact us