Streamlining Online Checkout Using Web Standards Why are checkouts - - PowerPoint PPT Presentation

▶
streamlining online checkout using web standards why are
SMART_READER_LITE
LIVE PREVIEW

Streamlining Online Checkout Using Web Standards Why are checkouts - - PowerPoint PPT Presentation

Mar 27, 2024 126 likes •531 views

Alex Liu & Michel Weksler / November 2017 Streamlining Online Checkout Using Web Standards Why are checkouts not easy nor fast? Support different: networks Why not easy nor fast? payment methods billing address formats

slide-1
SLIDE 1

Streamlining Online Checkout Using Web Standards

Alex Liu & Michel Weksler / November 2017

slide-2
SLIDE 2

Why are checkouts not easy nor fast?

slide-3
SLIDE 3
slide-4
SLIDE 4
slide-5
SLIDE 5
slide-6
SLIDE 6
slide-7
SLIDE 7

Why not easy nor fast?

Support different:

  • networks
  • payment methods
  • billing address formats
  • shipping address formats
slide-8
SLIDE 8

Agenda

  • 1. What?
  • 2. Why?
  • 3. Demo
  • 4. Technical Details
slide-9
SLIDE 9

Payment Request API

slide-10
SLIDE 10

W3C

A standard to allow merchants to utilize payment methods with minimal integration

slide-11
SLIDE 11
slide-12
SLIDE 12
slide-13
SLIDE 13

Why Payment Request API?

slide-14
SLIDE 14

Airbnb Payments

  • An escrow service
  • Moving billions of dollars per year
  • 25 integrations, 191 countries, 75

currencies

  • Ecosystems of all maturity levels
slide-15
SLIDE 15

Why Payment Request API?

  • Mobile is 21% of e-commerce

payments

  • 66% of mobile purchases made on

web rather than native apps

  • At airbnb, conversion rate on

mobile much lower than desktop

slide-16
SLIDE 16

Google Developer Blog

“makes checkout flows easier, faster and consistent”

slide-17
SLIDE 17
  • 1. Easier
slide-18
SLIDE 18
  • 1. Easier
  • 2. Faster
slide-19
SLIDE 19
  • 1. Easier
  • 2. Faster
  • 3. Consistent
slide-20
SLIDE 20

Payment Request at Airbnb

  • Users can use their existing wallets
  • Preferred payment methods
  • Avoid custom billing form

presentation

  • Common infrastructure: CVV, billing

address, shipping address

slide-21
SLIDE 21

Demo

slide-22
SLIDE 22

Demo

slide-23
SLIDE 23

Demo

slide-24
SLIDE 24

Google Developer Blog

“makes checkout flows easier, faster and consistent”

slide-25
SLIDE 25
slide-26
SLIDE 26

PaymentRequest new PaymentRequest( methodData, details,

  • ptions

).show();

slide-27
SLIDE 27

methodData new PaymentRequest( methodData, details,

  • ptions

).show();

slide-28
SLIDE 28

methodData .methods

const methods = [ 'basic-card', 'https://android.com/pay', 'https://apple.com/apple-pay', ];

slide-29
SLIDE 29

methodData .networks const networks = [ 'mastercard', 'visa', 'discover', 'amex' ];

slide-30
SLIDE 30

methodData .types const types = [ 'credit', 'debit', ];

slide-31
SLIDE 31

methodData

const methodData = [ { supportedMethods: methods, data: { supportedNetworks: networks, supportedTypes: types, }, } ]

slide-32
SLIDE 32

details new PaymentRequest( methodData,

details,

  • ptions

).show();

slide-33
SLIDE 33

details

const details = { id: "HM2AJDX29P1", displayItems: [{ label: "1 x $55 per night", amount: { currency: "USD", value: "55.00" }, }, { label: "Occupancy Tax", amount: { currency: "USD", value: "5.00" }, }], total: { label: "Total due", amount: { currency: "USD", value: "60.00" }, }, };

slide-34
SLIDE 34
  • ptions

new PaymentRequest( methodData, details,

  • ptions

).show();

slide-35
SLIDE 35
  • ptions

const options = { requestPayerEmail: false, requestPayerName: true, requestPayerPhone: false, requestShipping: true, }

slide-36
SLIDE 36

PaymentRequest new PaymentRequest( methodData, details,

  • ptions

);

slide-37
SLIDE 37

PaymentRequest new PaymentRequest( methodData, details,

  • ptions

).show();

slide-38
SLIDE 38
slide-39
SLIDE 39

Questions?