Copyright © 2017 W3C ® ( MIT , ERCIM , Keio , Beihang ). W3C liability , trademark and permissive document license rules apply.
This specification standardizes an API to allow merchants (i.e. web sites selling physical or digital goods) to utilize one or more payment methods with minimal integration. User agents (e.g., browsers) facilitate the payment flow between merchant and user.
This section describes the status of this document at the time of its publication. Other documents may supersede this document. A list of current W3C publications and the latest revision of this technical report can be found in the W3C technical reports index at https://www.w3.org/TR/.
The working group maintains a list of all bug reports that the group has not yet addressed . Pull requests with proposed specification text for outstanding issues are strongly encouraged.
This specification was derived from a report published previously by the Web Platform Incubator Community Group .
Sending comments on this document
If you wish to make comments regarding this document, please raise them as GitHub issues . Only send comments by email if you are unable to raise issues on GitHub (see links below). All comments are welcome.
This document was published by the Web Payments Working Group as an Editor's Draft. If you wish to make comments regarding this document, please send them to public-payments-wg@w3.org ( subscribe , archives ). All comments are welcome.
Publication as an Editor's Draft does not imply endorsement by the W3C Membership. This is a draft document and may be updated, replaced or obsoleted by other documents at any time. It is inappropriate to cite this document as other than work in progress.
This document was produced by a group operating under the 5 February 2004 W3C Patent Policy . W3C maintains a public list of any patent disclosures made in connection with the deliverables of the group; that page also includes instructions for disclosing a patent. An individual who has actual knowledge of a patent which the individual believes contains Essential Claim(s) must disclose the information in accordance with section 6 of the W3C Patent Policy .
This document is governed by the 1 March 2017 W3C Process Document .
This section is non-normative.
This specification describes an API that allows user agents (e.g., browsers) to act as an intermediary between three systems in every transaction: the merchant (e.g., an online web store), the buyer, represented by the user agent (e.g., the user buying from the online web store), and the payment method (e.g., credit card). Information necessary to process and confirm a transaction is passed between the payment method and the merchant via the user agent with the buyer confirming and authorizing as necessary across the flow.
The details of how to fulfill a payment request for a given payment method are handled by payment apps . In this specification, these details are left up to the user agent , but future specifications may expand on the processing model in more detail.
This API also enables web sites to take advantage of more secure payment schemes (e.g., tokenization and system-level authentication) that are not possible with standard JavaScript libraries. This has the potential to reduce liability for the merchant and helps protect sensitive user information.
A string is a valid decimal monetary value if it consists of the following components in the given order:
^-?[0-9]+(\.[0-9]+)?$
PaymentRequest
interface
[Constructor(sequence<PaymentMethodData
> methodData, PaymentDetailsInit
details, optional PaymentOptions
options),
SecureContext]
interface PaymentRequest
: EventTarget {
Promise<PaymentResponse
> show();
Promise<void> abort();
Promise<boolean> canMakePayment();
readonly attribute DOMString id
;
readonly attribute PaymentAddress
? shippingAddress
;
readonly attribute DOMString? shippingOption
;
readonly attribute PaymentShippingType
? shippingType;
attribute EventHandler onshippingaddresschange
;
attribute EventHandler onshippingoptionchange
;
};
A
web
page
creates
a
PaymentRequest
to
make
a
payment
request.
This
is
typically
associated
with
the
user
initiating
a
payment
process
(e.g.,
selecting
a
"Power
Up"
in
an
interactive
game,
pulling
up
to
an
automated
kiosk
in
a
parking
structure,
or
activating
a
"Buy",
"Purchase",
or
"Checkout"
button).
The
PaymentRequest
allows
the
web
page
to
exchange
information
with
the
user
agent
while
the
user
is
providing
input
before
approving
or
denying
a
payment
request.
The
shippingAddress
,
shippingOption
,
and
shippingType
attributes
are
populated
during
processing
if
the
requestShipping
flag
is
set.
The
following
example
shows
how
to
construct
a
PaymentRequest
and
begin
the
user
interaction:
function validateResponse(response){
// check that the response is ok... throw if bad, for example.
}
async function doPaymentRequest() {
const payment = new PaymentRequest(methodData, details, options);
payment.addEventListener("shippingaddresschange", event => {
// Process shipping address change
});
let paymentResponse;
try {
paymentResponse = await payment.show();
// paymentResponse.methodName contains the selected payment method.
// paymentResponse.details contains a payment method specific
// response.
validateResponse(paymentResponse);
paymentResponse.complete("success");
} catch (err) {
console.error("Uh oh, bad payment response!", err.message);
paymentResponse.complete("fail");
}
}
doPaymentRequest();
The
PaymentRequest
is
constructed
using
the
supplied
methodData
list
including
any
payment
method
specific
data
,
the
payment
details
,
and
the
payment
options
.
The
methodData
supplied
to
the
PaymentRequest
constructor
SHOULD
be
in
the
order
of
preference
of
the
caller.
The
methodData
sequence
contains
PaymentMethodData
dictionaries
containing
the
payment
method
identifiers
for
the
payment
methods
that
the
web
site
accepts
and
any
associated
payment
method
specific
data.
const methodData = [{
supportedMethods: ["basic-card"],
data: {
supportedNetworks: ['aFamousBrand', 'aDebitNetwork'],
supportedTypes: ['debit']
}
}, {
supportedMethods: ["bobpay.com"],
data: {
merchantIdentifier: "XXXX",
bobPaySpecificField: true
}
}];
const request = new PaymentRequest(methodData, details, options);
The details object contains information about the transaction that the user is being asked to complete such as the line items in an order.
const details = {
id: "super-store-order-123-12312",
displayItems: [
{
label: "Sub-total",
amount: { currency: "USD", value : "55.00" }, // US$55.00
},
{
label: "Sales Tax",
amount: { currency: "USD", value : "5.00" }, // US$5.00
}
],
total: {
label: "Total due",
amount: { currency: "USD", value : "60.00" }, // US$60.00
}
}
const request = new PaymentRequest(methodData, details, options);
The options object contains information about what options the web page wishes to use from the payment request system.
const options = {
requestShipping: true
}
const request = new PaymentRequest(methodData, details, options);
The PaymentRequest(methodData, details, options) constructor MUST act as follows:
paymentRequestId
was
not
provided
during
construction,
generate
a
paymentRequestId
.
allowpaymentrequest
,
then
throw
a
"
SecurityError
"
DOMException
.
TypeError
,
optionally
informing
the
developer
that
at
least
one
payment
method
is
required.
supportedMethods
sequence
is
zero,
then
throw
a
TypeError
,
optionally
informing
the
developer
that
each
payment
method
needs
to
include
at
least
one
payment
method
identifier
.
data
into
a
string,
if
the
data
member
of
paymentMethod
is
present,
or
null
if
it
is
not.
Rethrow
any
exceptions.
supportedMethods
,
serializedData
)
to
serializedMethodData
.
total
.
amount
.
value
is
not
a
valid
decimal
monetary
value
,
then
throw
a
TypeError
;
optionally
informing
the
developer
that
the
value
is
invalid.
total
.
amount
.
value
is
U+002D
HYPHEN-MINUS,
then
throw
a
TypeError
,
optionally
informing
the
developer
that
the
total
can't
be
negative.
displayItems
member
of
details
is
present,
then
for
each
item
in
details
.
displayItems
:
amount
.
value
is
not
a
valid
decimal
monetary
value
,
then
throw
a
TypeError
,
optionally
informing
the
developer
that
the
value
is
invalid.
sequence
<
PaymentShippingOption
>.
shippingOptions
member
of
details
is
present,
then:
shippingOptions
.
shippingOptions
to
options
.
sequence
<
PaymentDetailsModifier
>.
modifiers
member
of
details
is
present,
then:
modifiers
.
total
member
of
modifier
is
present,
then:
total
.
amount
.
value
.
TypeError
,
optionally
informing
the
developer
that
the
value
is
invalid.
TypeError
,
optionally
informing
the
developer
that
the
value
can't
be
negative.
additionalDisplayItems
member
of
modifier
is
present,
then
for
each
item
of
modifier
.
additionalDisplayItems
:
amount
.
value
.
TypeError
,
optionally
informing
the
developer
that
the
value
is
invalid.
data
into
a
string,
if
the
data
member
of
modifier
is
present,
or
null
if
it
is
not.
Rethrow
any
exceptions.
data
member
of
modifier
,
if
it
is
present.
modifiers
to
modifiers
.
PaymentRequest
.
shippingOption
attribute
to
selectedShippingOption
.
shippingAddress
attribute
on
request
to
null.
shippingType
attribute
on
request
to
null.
requestShipping
is
set
to
true,
then
set
the
value
of
the
shippingType
attribute
on
request
to
options
.
shippingType
.
If
options
.
shippingType
is
not
a
valid
PaymentShippingType
value
then
set
the
value
of
the
shippingType
attribute
on
request
to
"
shipping
".
id
attribute
When
getting,
the
id
attribute
returns
this
PaymentRequest
's
[[details]]
.
id
.
show()
method
The
show()
method
is
called
when
the
page
wants
to
begin
user
interaction
for
the
payment
request.
The
show()
method
returns
a
Promise
that
will
be
resolved
when
the
user
accepts
the
payment
request
.
Some
kind
of
user
interface
will
be
presented
to
the
user
to
facilitate
the
payment
request
after
the
show()
method
returns.
The
show()
method
MUST
act
as
follows:
PaymentRequest
object
on
which
the
method
is
called.
InvalidStateError
"
DOMException
.
Optionally:
AbortError
"
DOMException
.
This allows the user agent to act as if the user had immediately aborted the payment request , at its discretion. For example, in "private browsing" modes or similar, user agents might take advantage of this step.
NotSupportedError
"
DOMException
,
and
abort
this
algorithm.
Otherwise, show a user interface to allow the user to interact with the payment request process, using those payment apps and payment methods which the above step identified as feasible. The user agent MAY show payment methods in the order given by supportedMethods , but SHOULD prioritize the preference of the user when presenting payment methods and applications.
The payment app should be sent the appropriate data from request in order to guide the user through the payment process. This includes the various attributes and internal slots of request .
The acceptPromise will later be resolved or rejected by either the user accepts the payment request algorithm or the user aborts the payment request algorithm , which are triggered through interaction with the user interface.
abort()
method
The
abort()
method
is
called
if
the
web
page
wishes
to
tell
the
user
agent
to
abort
the
payment
request
and
to
tear
down
any
user
interface
that
might
be
shown.
The
abort()
can
only
be
called
after
the
show()
method
has
been
called
(see
states
)
and
before
this
instance's
[[acceptPromise]]
has
been
resolved.
For
example,
a
web
page
might
choose
to
do
this
if
the
goods
they
are
selling
are
only
available
for
a
limited
amount
of
time.
If
the
user
does
not
accept
the
payment
request
within
the
allowed
time
period,
then
the
request
will
be
aborted.
A
user
agent
might
not
always
be
able
to
abort
a
request.
For
example,
if
the
user
agent
has
delegated
responsibility
for
the
request
to
another
app.
In
this
situation,
abort()
will
reject
the
returned
Promise
.
The
abort()
method
MUST
act
as
follows:
PaymentRequest
object
on
which
the
method
is
called.
InvalidStateError
"
DOMException
.
InvalidStateError
"
DOMException
and
abort
these
steps.
AbortError
"
DOMException
.
canMakePayment()
method
The
canMakePayment()
method
can
be
used
by
the
developer
to
determine
if
the
PaymentRequest
object
can
be
used
to
make
a
payment,
before
they
call
show()
.
It
returns
a
Promise
that
will
be
fulfilled
with
true
if
the
user
agent
supports
any
of
the
desired
payment
methods
supplied
to
the
PaymentRequest
constructor,
and
false
if
none
are
supported.
If
the
method
is
called
too
often,
the
user
agent
might
instead
return
a
promise
rejected
with
a
"
QuotaExceededError
"
DOMException
,
at
its
discretion.
The
canMakePayment()
method
MUST
act
as
follows:
PaymentRequest
object
on
which
the
method
was
called.
InvalidStateError
"
DOMException
.
QuotaExceededError
"
DOMException
.
This
allows
user
agents
to
apply
heuristics
to
detect
and
prevent
abuse
of
the
canMakePayment()
method
for
fingerprinting
purposes,
such
as
creating
PaymentRequest
objects
with
a
variety
of
supported
payment
methods
and
calling
canMakePayment()
on
them
one
after
the
other.
For
example,
a
user
agent
may
restrict
the
number
of
successful
calls
that
can
be
made
based
on
the
top-level
browsing
context
or
the
time
period
in
which
those
calls
were
made.
supportedMethods
contains
a
payment
method
identifier
of
a
payment
method
that
the
user
agent
or
other
payment
app
supports
(including
its
payment
method
specific
capabilities),
resolve
promise
with
true,
and
abort
this
algorithm.
shippingAddress
attribute
A
PaymentRequest
's
shippingAddress
attribute
is
populated
when
the
user
provides
a
shipping
address.
It
is
null
by
default.
When
a
user
provides
a
shipping
address,
the
shipping
address
changed
algorithm
runs.
onshippingaddresschange
attribute
A
PaymentRequest
's
onshippingaddresschange
attribute
is
an
EventHandler
for
an
Event
named
shippingaddresschange
.
shippingOption
attribute
A
PaymentRequest
's
shippingOption
attribute
is
populated
when
the
user
chooses
a
shipping
option.
It
is
null
by
default.
When
a
user
chooses
a
shipping
option,
the
shipping
option
changed
algorithm
runs.
onshippingoptionchange
attribute
A
PaymentRequest
's
onshippingoptionchange
attribute
is
an
EventHandler
for
an
Event
named
shippingoptionchange
.
Instances
of
PaymentRequest
are
created
with
the
internal
slots
in
the
following
table:
Internal Slot | Description ( non-normative ) |
---|---|
[[serializedMethodData]] |
The
methodData
supplied
to
the
constructor,
but
represented
as
tuples
containing
supported
methods
and
a
string
or
null
for
data
(instead
of
the
original
object
form).
|
[[serializedModifierData]] |
A
list
containing
the
serialized
string
form
of
each
data
member
for
each
corresponding
item
in
the
sequence
[[details]]
.
modifier
,
or
null
if
no
such
member
was
present.
|
[[details]] |
The
current
PaymentDetailsBase
for
the
payment
request
initially
supplied
to
the
constructor
and
then
updated
with
calls
to
updateWith()
.
Note
that
all
data
members
of
PaymentDetailsModifier
instances
contained
in
the
modifiers
member
will
be
removed,
as
they
are
instead
stored
in
serialized
form
in
the
[[serializedModifierData]]
internal
slot.
|
[[options]] |
The
PaymentOptions
supplied
to
the
constructor.
|
[[state]] |
The current state of the payment request, which transitions from:
The state transitions are illustrated in the figure below:
show()
method
changes
the
state
to
"
interactive
".
From
there,
the
abort()
method
or
any
other
error
can
send
the
state
to
"
closed
";
similarly,
the
user
accepts
the
payment
request
algorithm
and
user
aborts
the
payment
request
algorithm
will
change
the
state
to
"
closed
".
|
[[updating]] | true is there is a pending updateWith() call to update the payment request and false otherwise. |
[[acceptPromise]] | The pending Promise created during show that will be resolved if the user accepts the payment request. |
PaymentMethodData
dictionary
dictionary PaymentMethodData
{
required sequence<DOMString> supportedMethods
;
object data
;
};
A
PaymentMethodData
dictionary
is
used
to
indicate
a
set
of
supported
payment
methods
and
any
associated
payment
method
specific
data
for
those
methods.
The
following
members
are
part
of
the
PaymentMethodData
dictionary:
supportedMethods
member
supportedMethods
is
a
required
sequence
of
strings
containing
payment
method
identifiers
for
payment
methods
that
the
merchant
web
site
accepts.
data
member
data
is
an
object
that
provides
optional
information
that
might
be
needed
by
the
supported
payment
methods.
If
supplied,
it
will
be
JSON-serialized
.
PaymentCurrencyAmount
dictionary
dictionary PaymentCurrencyAmount
{
required DOMString currency
;
required DOMString value
;
DOMString currencySystem
= "urn:iso:std:iso:4217";
};
A
PaymentCurrencyAmount
dictionary
is
used
to
supply
monetary
amounts.
currencySystem
currency
identifier
belongs
to.
By
default,
the
value
is
urn:iso:std:iso:4217
indicating
that
currency
is
defined
by
[
ISO4217
]
(for
example,
USD
for
US
Dollars).
currency
currency
can
be
any
string
that
is
valid
within
the
currency
system
indicated
by
currencySystem
.
value
The following example shows how to represent US$55.00.
{
"currency": "USD",
"value" : "55.00"
}
PaymentDetailsBase
dictionary
{dictionaryPaymentDetailsBase
:Localizable
{ sequence<PaymentItem
>displayItems
; sequence<PaymentShippingOption
>shippingOptions
; sequence<PaymentDetailsModifier
>modifiers
; };
The
following
members
are
part
of
the
PaymentDetailsBase
dictionary:
displayItems
PaymentItem
dictionaries
contains
line
items
for
the
payment
request
that
the
user
agent
MAY
display.
For
example,
it
might
include
details
of
products
or
breakdown
of
tax
and
shipping.
It
is
optional
to
provide
this
information.
It
is
the
developer's
responsibility
to
verify
that
the
total
amount
is
the
sum
of
these
items.
shippingOptions
If
the
sequence
is
empty,
then
this
indicates
that
the
merchant
cannot
ship
to
the
current
shippingAddress
.
If
an
item
in
the
sequence
has
the
selected
member
set
to
true,
then
this
is
the
shipping
option
that
will
be
used
by
default
and
shippingOption
will
be
set
to
the
id
of
this
option
without
running
the
shipping
option
changed
algorithm
.
Authors
SHOULD
NOT
set
selected
to
true
on
more
than
one
item.
If
more
than
one
item
in
the
sequence
has
selected
set
to
true,
then
user
agents
MUST
select
the
last
one
in
the
sequence.
The
shippingOptions
member
is
only
used
if
the
PaymentRequest
was
constructed
with
PaymentOptions
requestShipping
set
to
true.
If
the
sequence
has
an
item
with
the
selected
member
set
to
true,
then
authors
are
responsible
for
ensuring
that
the
total
member
includes
the
cost
of
the
shipping
option.
This
is
because
no
shippingoptionchange
event
will
be
fired
for
this
option
unless
the
user
selects
an
alternative
option
first.
modifiers
PaymentDetailsModifier
dictionaries
contains
modifiers
for
particular
payment
method
identifiers.
For
example,
it
allows
you
to
adjust
the
total
amount
based
on
payment
method.
PaymentDetailsInit
dictionary
dictionary PaymentDetailsInit
: PaymentDetailsBase
{
DOMString id
;
required PaymentItem
total
;
};
The
PaymentDetailsInit
dictionary
is
used
in
the
construction
of
the
payment
request.
In
addition
to
the
members
inherited
from
the
PaymentDetailsBase
dictionary,
the
following
members
are
part
of
the
PaymentDetailsInit
dictionary:
id
id
is
a
free-form
identifier
for
this
payment
request.
If
an
id
member
is
not
present,
then
the
user
agent
will
generate
a
unique
identifier
for
the
payment
request
during
construction
.
total
PaymentItem
contains
the
non-negative
total
amount
of
the
payment
request.
Algorithms
in
this
specification
that
accept
a
PaymentDetailsInit
dictionary
will
throw
if
the
total
.
amount
.
value
is
a
negative
number.
PaymentDetailsUpdate
dictionary
dictionary PaymentDetailsUpdate
: PaymentDetailsBase
{
DOMString error
;
PaymentItem
total
;
};
The
PaymentDetailsUpdate
dictionary
is
used
to
update
the
payment
request
using
updateWith()
.
In
addition
to
the
members
inherited
from
the
PaymentDetailsBase
dictionary,
the
following
members
are
part
of
the
PaymentDetailsUpdate
dictionary:
error
PaymentDetailsUpdate
can
contain
a
human-readable
message
in
the
error
member
that
will
be
displayed
to
the
user.
For
example,
this
might
commonly
be
used
to
explain
why
goods
cannot
be
shipped
to
the
chosen
shipping
address.
total
PaymentItem
contains
the
non-negative
total
amount.
Algorithms
in
this
specification
that
accept
a
PaymentDetailsUpdate
dictionary
will
throw
if
the
total
.
amount
.
value
is
a
negative
number.
PaymentDetailsModifier
dictionary
dictionary PaymentDetailsModifier
{
required sequence<DOMString> supportedMethods
;
PaymentItem
total
;
sequence<PaymentItem
> additionalDisplayItems
;
object data
;
};
The
PaymentDetailsModifier
dictionary
provides
details
that
modify
the
PaymentDetailsBase
based
on
payment
method
identifier
.
It
contains
the
following
fields:
supportedMethods
supportedMethods
member
contains
a
sequence
of
payment
method
identifiers
.
The
remaining
members
in
the
PaymentDetailsModifier
apply
only
if
the
user
selects
a
payment
method
included
in
this
sequence.
total
PaymentItem
value
overrides
the
total
member
in
the
PaymentDetailsInit
dictionary
for
the
payment
method
identifiers
in
the
supportedMethods
member.
additionalDisplayItems
PaymentItem
dictionaries
provides
additional
display
items
that
are
appended
to
the
displayItems
member
in
the
PaymentDetailsBase
dictionary
for
the
payment
method
identifiers
in
the
supportedMethods
member.
This
member
is
commonly
used
to
add
a
discount
or
surcharge
line
item
indicating
the
reason
for
the
different
total
amount
for
the
selected
payment
method
that
the
user
agent
MAY
display.
It
is
the
developer's
responsibility
to
verify
that
the
total
amount
is
the
sum
of
the
displayItems
and
the
additionalDisplayItems
.
data
data
is
an
object
that
provides
optional
information
that
might
be
needed
by
the
supported
payment
methods.
If
supplied,
it
will
be
JSON-serialized
.
PaymentShippingType
enum
enum PaymentShippingType
{
"shipping",
"delivery",
"pickup"
};
shipping
delivery
pickup
PaymentOptions
dictionary
dictionary PaymentOptions
{
boolean requestPayerName
= false;
boolean requestPayerEmail
= false;
boolean requestPayerPhone
= false;
boolean requestShipping
= false;
PaymentShippingType
shippingType
= "shipping";
};
The
PaymentOptions
dictionary
is
passed
to
the
PaymentRequest
constructor
and
provides
information
about
the
options
desired
for
the
payment
request.
requestPayerName
requestPayerEmail
requestPayerPhone
requestShipping
shippingType
requestShipping
is
set
to
true,
then
the
shippingType
member
may
be
used
to
influence
the
way
the
user
agent
presents
the
user
interface
for
gathering
the
shipping
address.
The
shippingType
member
only
affects
the
user
interface
for
the
payment
request.
PaymentItem
dictionary
{dictionaryPaymentItem
:Localizable
{ required DOMStringlabel
; requiredPaymentCurrencyAmount
amount
; booleanpending
= false; };
A
sequence
of
one
or
more
PaymentItem
dictionaries
is
included
in
the
PaymentDetailsBase
dictionary
to
indicate
what
the
payment
request
is
for
and
the
value
asked
for.
label
amount
PaymentCurrencyAmount
containing
the
monetary
amount
for
the
item.
pending
amount
member
is
not
final.
This
is
commonly
used
to
show
items
such
as
shipping
or
tax
amounts
that
depend
upon
selection
of
shipping
address
or
shipping
option.
User
agents
MAY
indicate
pending
fields
in
the
user
interface
for
the
payment
request.
PaymentAddress
interface
[SecureContext]
interface PaymentAddress
{
serializer
= {attribute};
readonly attribute DOMString country
;
readonly attribute FrozenArray<DOMString> addressLine
;
readonly attribute DOMString region
;
readonly attribute DOMString city
;
readonly attribute DOMString dependentLocality
;
readonly attribute DOMString postalCode
;
readonly attribute DOMString sortingCode
;
readonly attribute DOMString languageCode
;
readonly attribute DOMString organization
;
readonly attribute DOMString recipient
;
readonly attribute DOMString phone
;
};
serializer
Each attribute is converted to serialized values as per [ WEBIDL-LS ].
country
attribute
This is the [ CLDR ] (Common Locale Data Repository) region code. For example, US, GB, CN, or JP.
addressLine
attribute
This is the most specific part of the address. It can include, for example, a street name, a house number, apartment number, a rural delivery route, descriptive instructions, or a post office box number.
region
attribute
This is the top level administrative subdivision of the country. For example, this can be a state, a province, an oblast, or a prefecture.
city
attribute
This is the city/town portion of the address.
dependentLocality
attribute
This is the dependent locality or sublocality within a city. For example, used for neighborhoods, boroughs, districts, or UK dependent localities.
postalCode
attribute
This is the postal code or ZIP code, also known as PIN code in India.
sortingCode
attribute
This is the sorting code as used in, for example, France.
languageCode
attribute
This is the BCP-47 language code for the address. It's used to determine the field separators and the order of fields when formatting the address for display.
organization
attribute
This is the organization, firm, company, or institution at this address.
recipient
attribute
This is the name of the recipient or contact person. This member may, under certain circumstances, contain multiline information. For example, it might contain "care of" information.
phone
attribute
This is the phone number of the recipient or contact person.
PaymentShippingOption
dictionary
{dictionaryPaymentShippingOption
:Localizable
{ required DOMStringid
; required DOMStringlabel
; requiredPaymentCurrencyAmount
amount
; booleanselected
= false; };
The
PaymentShippingOption
dictionary
has
members
describing
a
shipping
option.
A
web
page
can
provide
the
user
with
one
or
more
shipping
options
by
calling
the
updateWith()
method
in
response
to
a
change
event.
id
PaymentShippingOption
.
It
MUST
be
unique
for
a
given
PaymentRequest
.
label
amount
PaymentCurrencyAmount
containing
the
monetary
amount
for
the
item.
selected
PaymentShippingOption
in
a
sequence.
User
agents
SHOULD
display
this
option
by
default
in
the
user
interface.
PaymentComplete
enum
enum PaymentComplete
{
"fail",
"success",
"unknown"
};
fail
"
success
"
unknown
"
PaymentResponse
interface
[SecureContext]
interface PaymentResponse
{
serializer
= {attribute};
readonly attribute DOMString requestId
;
readonly attribute DOMString methodName
;
readonly attribute object details
;
readonly attribute PaymentAddress
? shippingAddress
;
readonly attribute DOMString? shippingOption
;
readonly attribute DOMString? payerName
;
readonly attribute DOMString? payerEmail
;
readonly attribute DOMString? payerPhone
;
Promise<void> complete(optional PaymentComplete
result = "unknown");
};
A
PaymentResponse
is
returned
when
a
user
has
selected
a
payment
method
and
approved
a
payment
request.
serializer
Each attribute is converted to serialized values as per [ WEBIDL-LS ].
methodName
attribute
The payment method identifier for the payment method that the user selected to fulfill the transaction.
details
attribute
An object that provides a payment method specific message used by the merchant to process the transaction and determine successful fund transfer. This data is returned by the payment method specific code that satisfies the payment request.
shippingAddress
attribute
If
the
requestShipping
flag
was
set
to
true
in
the
PaymentOptions
passed
to
the
PaymentRequest
constructor,
then
shippingAddress
will
be
the
full
and
final
shipping
address
chosen
by
the
user.
shippingOption
attribute
If
the
requestShipping
flag
was
set
to
true
in
the
PaymentOptions
passed
to
the
PaymentRequest
constructor,
then
shippingOption
will
be
the
id
attribute
of
the
selected
shipping
option.
payerName
attribute
If
the
requestPayerName
flag
was
set
to
true
in
the
PaymentOptions
passed
to
the
PaymentRequest
constructor,
then
payerName
will
be
the
name
provided
by
the
user.
payerEmail
attribute
If
the
requestPayerEmail
flag
was
set
to
true
in
the
PaymentOptions
passed
to
the
PaymentRequest
constructor,
then
payerEmail
will
be
the
email
address
chosen
by
the
user.
payerPhone
attribute
If
the
requestPayerPhone
flag
was
set
to
true
in
the
PaymentOptions
passed
to
the
PaymentRequest
constructor,
then
payerPhone
will
be
the
phone
number
chosen
by
the
user.
requestId
attribute
The
corresponding
payment
request
id
that
spawned
this
payment
response.
complete()
method
The
complete()
method
is
called
after
the
user
has
accepted
the
payment
request
and
the
[[acceptPromise]]
has
been
resolved.
Calling
the
complete()
method
tells
the
user
agent
that
the
transaction
is
over
(and
SHOULD
cause
any
remaining
user
interface
to
be
closed).
After
the
payment
request
has
been
accepted
and
the
PaymentResponse
returned
to
the
page
but
before
the
page
calls
complete()
the
payment
request
user
interface
remains
in
a
pending
state.
At
this
point
the
user
interface
ought
not
offer
a
cancel
command
because
acceptance
of
the
payment
request
has
been
returned.
However,
if
something
goes
wrong
and
the
page
never
calls
complete()
then
the
user
interface
is
blocked.
For
this
reason,
implementations
MAY
impose
a
timeout
for
the
page
to
call
complete()
.
If
the
timeout
expires
then
the
implementation
will
behave
as
if
complete()
was
called
with
no
arguments.
The complete(result) method MUST act as follows:
InvalidStateError
"
DOMException
.
Instances
of
PaymentResponse
are
created
with
the
internal
slots
in
the
following
table:
Internal Slot | Description ( non-normative ) |
---|---|
[[completeCalled]] | true if the complete method has been called and false otherwise. |
Localizable
dictionary
dictionary Localizable
{ DOMString lang
; TextDirection
dir
= "auto";
};
lang
member
dir
member
TextDirection
enum
enum TextDirection
{ "auto", "ltr", "rtl"
};
The text-direction values are the following, implying that the value of the human-readable members is by default:
auto
ltr
rtl
iframe
elements
This section is non-normative.
To
indicate
that
a
cross-origin
iframe
is
allowed
to
invoke
the
payment
request
API,
the
allowpaymentrequest
attribute
can
be
specified
on
the
iframe
element.
This section is non-normative.
Event name | Interface | Dispatched when... |
---|---|---|
shippingaddresschange
|
PaymentRequestUpdateEvent
|
The user provides a new shipping address. |
shippingoptionchange
|
PaymentRequestUpdateEvent
|
The user chooses a new shipping option. |
PaymentRequestUpdateEvent
interface
[Constructor(DOMString type, optional PaymentRequestUpdateEventInit
eventInitDict),
SecureContext]
interface PaymentRequestUpdateEvent
: Event
{
void updateWith(Promise<PaymentDetailsUpdate
> detailsPromise);
};
The
PaymentRequestUpdateEvent
enables
the
web
page
to
update
the
details
of
the
payment
request
in
response
to
a
user
interaction.
If
the
web
page
wishes
to
update
the
payment
request
then
it
should
call
updateWith()
and
provide
a
PaymentDetailsUpdate
dictionary,
or
a
promise
for
one,
containing
changed
values
that
the
user
agent
SHOULD
present
to
the
user.
The
PaymentRequestUpdateEvent
constructor
MUST
set
the
internal
slot
[[waitForUpdate]]
to
false.
updateWith()
method
If
the
web
page
wishes
to
update
the
payment
request
then
it
should
call
updateWith()
and
provide
a
PaymentDetailsUpdate
dictionary,
or
a
promise
for
one,
containing
changed
values
that
the
user
agent
presents
to
the
user.
The updateWith(detailsPromise) method MUST act as follows:
PaymentRequestUpdateEvent
instance.
PaymentRequest
object,
then
throw
a
TypeError
.
InvalidStateError
"
DOMException
.
InvalidStateError
"
DOMException
.
InvalidStateError
"
DOMException
.
InvalidStateError
"
DOMException
.
The user agent SHOULD disable any part of the user interface that could cause another update event to be fired. Only one update may be processed at a time.
Return from the method and perform the remaining steps in parallel .
The remaining steps are conditional on the detailsPromise settling. If detailsPromise never settles then the payment request is blocked. Users should always be able to cancel a payment request. Implementations may choose to implement a timeout for pending updates if detailsPromise doesn't settle in a reasonable amount of time. If an implementation chooses to implement a timeout, they must execute the steps listed below in the "upon rejection" path. Such a timeout is a fatal error for the payment request.
AbortError
"
DOMException
.
User agents might show an error message to the user when this occurs.
PaymentDetailsUpdate
dictionary.
If
this
throws
an
exception,
abort
these
substeps,
and
optionally
show
an
error
message
to
the
user.
total
member
of
details
is
present,
then:
total
.
amount
.
value
.
total
to
the
total
member
of
target
.
[[details]]
.
(Negative
total
amounts
are
ignored.)
displayItems
member
of
details
is
present,
then:
PaymentItem
in
details
.
displayItems
has
an
amount
.
value
containing
a
valid
decimal
monetary
value
,
then
copy
details
.
displayItems
to
the
displayItems
member
of
target
.
[[details]]
.
modifiers
member
of
details
is
present,
then:
modifiers
.
PaymentDetailsModifier
modifier
in
modifiers
:
total
member
of
modifier
is
present
and
member
.
total
.
amount
.
value
is
not
a
valid
decimal
monetary
value
,
then
set
modifiers
to
an
empty
sequence
and
serializedModifierData
to
an
empty
list,
and
jump
to
the
step
labeled
copy
modifiers
below.
additionalDisplayItems
member
of
modifier
is
present,
then
for
each
PaymentItem
item
in
modifier
.
additionalDisplayItems
:
amount
.
value
.
data
into
a
string,
if
the
data
member
of
modifier
is
present,
or
null
if
it
is
not.
If
JSON-serializing
throws
an
exception,
then
set
modifiers
to
an
empty
sequence
and
serializedModifierData
to
an
empty
list,
and
jump
to
the
step
labeled
copy
modifiers
below.
data
member
of
modifier
,
if
it
is
present.
modifiers
to
modifiers
,
and
set
target
.
[[serializedModifierData]]
to
serializedModifierData
.
shippingOptions
member
of
details
is
present,
and
target
.
[[options]]
.
requestShipping
is
true,
then:
shippingOptions
.
amount
.
value
is
not
a
valid
decimal
monetary
value
,
then
set
options
to
the
empty
sequence
and
break.
id
,
then
set
options
to
an
empty
sequence
and
break.
id
to
seenIDs
.
shippingOptions
member
of
target
.
[[details]]
.
error
member
of
details
is
present,
then
the
user
agent
should
update
the
user
interface
to
display
the
error
message
contained
in
error
.
Instances
of
PaymentRequestUpdateEvent
are
created
with
the
internal
slots
in
the
following
table:
Internal Slot | Description ( non-normative ) |
---|---|
[[waitForUpdate]] |
A
boolean
indicating
whether
an
updateWith()
-initiated
update
is
currently
in
progress.
|
PaymentRequestUpdateEventInit
dictionary
dictionary PaymentRequestUpdateEventInit
: EventInit {
};
When
the
internal
slot
[[state]]
of
a
PaymentRequest
object
is
set
to
"
interactive
",
the
user
agent
will
trigger
the
following
algorithms
based
on
user
interaction.
The shipping address changed algorithm runs when the user provides a new shipping address. It MUST run the following steps:
PaymentRequest
object
that
the
user
is
interacting
with.
shippingAddress
attribute
on
request
to
the
shipping
address
provided
by
the
user.
The shipping option changed algorithm runs when the user chooses a new shipping option. It MUST run the following steps:
PaymentRequest
object
that
the
user
is
interacting
with.
shippingOption
attribute
on
request
to
the
id
string
of
the
PaymentShippingOption
provided
by
the
user.
The
PaymentRequest
updated
algorithm
is
run
by
other
algorithms
above
to
fire
an
event
to
indicate
that
a
user
has
made
a
change
to
a
PaymentRequest
called
request
with
an
event
name
of
name
.
It MUST run the following steps:
PaymentRequestUpdateEvent
.
PaymentRequestUpdateEvent
.
The user accepts the payment request algorithm runs when the user accepts the payment request and confirms that they want to pay. It MUST run the following steps:
PaymentRequest
object
that
the
user
is
interacting
with.
requestShipping
value
of
request
.
[[options]]
is
true,
then
if
the
shippingAddress
attribute
of
request
is
null
or
if
the
shippingOption
attribute
of
request
is
null,
then
terminate
this
algorithm
and
take
no
further
action.
This
should
never
occur.
PaymentResponse
.
requestId
attribute
value
of
response
to
the
value
of
request
.
[[details]]
.
id
.
methodName
attribute
value
of
response
to
the
payment
method
identifier
for
the
payment
method
that
the
user
selected
to
accept
the
payment.
details
attribute
value
of
response
to
an
object
containing
the
payment
method
specific
message
that
will
be
used
by
the
merchant
to
process
the
transaction.
The
format
of
this
response
will
be
defined
for
each
payment
method
.
requestShipping
value
of
request
.
[[options]]
is
true,
then
set
the
shippingAddress
attribute
of
response
to
the
value
of
the
shippingAddress
attribute
of
request
.
Otherwise,
set
it
to
null.
requestShipping
value
of
request
.
[[options]]
is
true,
then
set
the
shippingOption
attribute
of
response
to
the
value
of
the
shippingOption
attribute
of
request
.
Otherwise,
set
it
to
null.
requestPayerName
value
of
request
.
[[options]]
is
true,
then
set
the
payerName
attribute
of
response
to
the
payer's
name
provided
by
the
user,
or
to
null
if
none
was
provided.
Otherwise,
set
it
to
null.
requestPayerEmail
value
of
request
.
[[options]]
is
true,
then
set
the
payerEmail
attribute
of
response
to
the
payer's
email
address
provided
by
the
user,
or
to
null
if
none
was
provided.
Otherwise,
set
it
to
null.
requestPayerPhone
value
of
request
.
[[options]]
is
true,
then
set
the
payerPhone
attribute
of
response
to
the
payer's
phone
number
provided
by
the
user,
or
to
null
if
none
was
provided.
When
setting
the
payerPhone
value,
the
user
agent
SHOULD
format
the
phone
number
to
adhere
to
[
E.164
].
Otherwise,
set
it
to
null.
The user aborts the payment request algorithm runs when the user aborts the payment request through the currently interactive user interface. It MUST run the following steps:
PaymentRequest
object
that
the
user
is
interacting
with.
AbortError
"
DOMException
.
This section is non-normative.
This section is a placeholder to record security considerations as we gather them through working group discussion.
The
PaymentRequest
API
does
not
directly
support
encryption
of
data
fields.
Individual
payment
methods
may
choose
to
include
support
for
encrypted
data
but
it
is
not
mandatory
that
all
payment
methods
support
this.
This section is non-normative.
This section is a placeholder to record privacy considerations as we gather them through working group discussion.
The user agent MUST NOT share information about the user to the web page (such as the shipping address) without user consent.
A page might try to call the payment request API repeatedly with only one payment method identifier to try to determine what payment methods a user agent has installed. There may be legitimate scenarios for calling repeatedly (for example, to control the order of payment method selection). The fact that a successful match to a payment method causes a user interface to be displayed mitigates the disclosure risk. Implementations may also require a user action to initiate a payment request or they may choose to rate limit the calls to the API to prevent too many repeated calls.
This specification relies on several other underlying specifications.
TypeError
,
and
JSON.stringify
are
defined
by
[
ECMA-262-2015
].
The
term
JSON-serialize
applied
to
a
given
object
means
to
run
the
algorithm
specified
by
the
original
value
of
the
JSON.stringify
function
on
the
supplied
object,
passing
the
supplied
object
as
the
sole
argument,
and
return
the
resulting
string.
This
can
throw
an
exception.
Event
interface
and
the
terms
fire
an
event
,
dispatch
flag
,
stop
propagation
flag
,
and
stop
immediate
propagation
flag
are
defined
by
[
DOM
].
When this specification says to throw an error, the user agent must throw an error as described in [ WEBIDL-LS ]. When this occurs in a sub-algorithm, this results in termination of execution of the sub-algorithm and all ancestor algorithms until one is reached that explicitly describes procedures for catching exceptions.
The algorithm for converting an ECMAScript value to a dictionary is defined by [ WEBIDL-LS ].
DOMException
and
the
following
DOMException
types
from
[
WEBIDL-LS
]
are
used:
AbortError
"
InvalidStateError
"
NotSupportedError
"
QuotaExceededError
"
SecurityError
"
As well as sections marked as non-normative, all authoring guidelines, diagrams, examples, and notes in this specification are non-normative. Everything else in this specification is normative.
The key words MAY , MUST , MUST NOT , RECOMMENDED , SHOULD , and SHOULD NOT are to be interpreted as described in [ RFC2119 ].
There is only one class of product that can claim conformance to this specification: a user agent .
Although this specification is primarily targeted at web browsers, it is feasible that other software could also implement this specification in a conforming manner.
User agents MAY implement algorithms given in this specification in any way desired, so long as the end result is indistinguishable from the result that would be obtained by the specification's algorithms.
[Constructor(sequence<PaymentMethodData
> methodData,PaymentDetailsInit
details, optionalPaymentOptions
options), SecureContext] interfacePaymentRequest
: EventTarget { Promise<PaymentResponse
> show(); Promise<void> abort(); Promise<boolean> canMakePayment(); readonly attribute DOMStringid
; readonly attributePaymentAddress
?shippingAddress
; readonly attribute DOMString?shippingOption
; readonly attributePaymentShippingType
? shippingType; attribute EventHandleronshippingaddresschange
; attribute EventHandleronshippingoptionchange
; }; dictionaryPaymentMethodData
{ required sequence<DOMString>supportedMethods
; objectdata
; }; dictionaryPaymentCurrencyAmount
{ required DOMStringcurrency
; required DOMStringvalue
; DOMStringcurrencySystem
= "urn:iso:std:iso:4217"; };{dictionaryPaymentDetailsBase
:Localizable
{ sequence<PaymentItem
>displayItems
; sequence<PaymentShippingOption
>shippingOptions
; sequence<PaymentDetailsModifier
>modifiers
; }; dictionaryPaymentDetailsInit
:PaymentDetailsBase
{ DOMStringid
; requiredPaymentItem
total
; }; dictionaryPaymentDetailsUpdate
:PaymentDetailsBase
{ DOMStringerror
;PaymentItem
total
; }; dictionaryPaymentDetailsModifier
{ required sequence<DOMString>supportedMethods
;PaymentItem
total
; sequence<PaymentItem
>additionalDisplayItems
; objectdata
; }; enumPaymentShippingType
{ "shipping", "delivery", "pickup" }; dictionaryPaymentOptions
{ booleanrequestPayerName
= false; booleanrequestPayerEmail
= false; booleanrequestPayerPhone
= false; booleanrequestShipping
= false;PaymentShippingType
shippingType
= "shipping"; };{dictionaryPaymentItem
:Localizable
{ required DOMStringlabel
; requiredPaymentCurrencyAmount
amount
; booleanpending
= false; }; [SecureContext] interfacePaymentAddress
{serializer
= {attribute}; readonly attribute DOMStringcountry
; readonly attribute FrozenArray<DOMString>addressLine
; readonly attribute DOMStringregion
; readonly attribute DOMStringcity
; readonly attribute DOMStringdependentLocality
; readonly attribute DOMStringpostalCode
; readonly attribute DOMStringsortingCode
; readonly attribute DOMStringlanguageCode
; readonly attribute DOMStringorganization
; readonly attribute DOMStringrecipient
; readonly attribute DOMStringphone
; };{dictionaryPaymentShippingOption
:Localizable
{ required DOMStringid
; required DOMStringlabel
; requiredPaymentCurrencyAmount
amount
; booleanselected
= false; }; enumPaymentComplete
{ "fail", "success", "unknown" }; [SecureContext] interfacePaymentResponse
{serializer
= {attribute}; readonly attribute DOMStringrequestId
; readonly attribute DOMStringmethodName
; readonly attribute objectdetails
; readonly attributePaymentAddress
?shippingAddress
; readonly attribute DOMString?shippingOption
; readonly attribute DOMString?payerName
; readonly attribute DOMString?payerEmail
; readonly attribute DOMString?payerPhone
; Promise<void> complete(optionalPaymentComplete
result = "unknown"); }; dictionaryLocalizable
{ DOMStringlang
;TextDirection
dir
= "auto"; }; enumTextDirection
{ "auto", "ltr", "rtl" }; [Constructor(DOMString type, optionalPaymentRequestUpdateEventInit
eventInitDict), SecureContext] interfacePaymentRequestUpdateEvent
:Event
{ void updateWith(Promise<PaymentDetailsUpdate
> detailsPromise); }; dictionaryPaymentRequestUpdateEventInit
: EventInit { };