After creating the PaymentRequest
object, the payment can be initiated by
calling the show()
method.
The following sample code shows how to implement a function used when a user
taps the Buy button in the UI. When a user clicks the Buy button, the PaymentRequest
object is created and checks for the user’s readiness to make
payment.
Based on the parameters defined in create payment request object and check user readiness , the data in the following code snippet is displayed.
In the code snippet, the canMakePaymentPromise()
method is used to check for
user readiness and displays the result. If the result shows that the Google Pay is a
supported payment method, a payment request UI is shown to the user.
/**
Launches
payment
request
flow
when
user
taps
on
buy
button
.
*/
function
onBuyClicked
()
{
if
(
!
window
.
PaymentRequest
)
{
console
.
log
(
'Web payments are not supported in this browser.'
);
return
;
}
//
Create
supported
payment
method
.
const
supportedInstruments
=
[
{
supportedMethods
:
[
'https://tez.google.com/pay'
],
data
:
{
pa
:
'merchant-vpa@xxx'
,
pn
:
'Merchant Name'
,
tr
:
'1234ABCD'
,
//
Your
custom
transaction
reference
ID
url
:
'https://url/of/the/order/in/your/website'
,
mc
:
'1234'
,
//
Your
merchant
category
code
tn
:
'Purchase in Merchant'
,
},
}
];
//
Create
order
detail
data
.
const
details
=
{
total
:
{
label
:
'Total'
,
amount
:
{
currency
:
'INR'
,
value
:
'10.01'
,
//
sample
amount
},
},
displayItems
:
[{
label
:
'Original Amount'
,
amount
:
{
currency
:
'INR'
,
value
:
'10.01'
,
},
}],
};
//
Create
payment
request
object
.
let
request
=
null
;
try
{
request
=
new
PaymentRequest
(
supportedInstruments
,
details
);
}
catch
(
e
)
{
console
.
log
(
'Payment Request Error: '
+
e
.
message
);
return
;
}
if
(
!
request
)
{
console
.
log
(
'Web payments are not supported in this browser.'
);
return
;
}
var
canMakePaymentPromise
=
checkCanMakePayment
(
request
);
canMakePaymentPromise
.
then
((
result
)
=
>
{
showPaymentUI
(
request
,
result
);
})
.
catch
((
err
)
=
>
{
console
.
log
(
'Error calling checkCanMakePayment: '
+
err
);
});
}
Display Google Pay Play Store page
The following code shows how to display a payment request UI and handle the case where the user cannot make payment with Google Pay.
/**
*
Show
the
payment
request
UI
.
*
*
@
private
*
@
param
{
PaymentRequest
}
request
The
payment
request
object
.
*
@
param
{
Promise
}
canMakePayment
The
promise
for
whether
can
make
payment
.
*/
function
showPaymentUI
(
request, canMakePayment )
{
if
(
! canMakePayment
)
{
handleNotReadyToPay
();
return
;
}
// Set payment timeout.
let
paymentTimeout
=
window
.
setTimeout
(
function
()
{
window
.
clearTimeout
(
paymentTimeout
);
request
.
abort
()
.
then
(
function
()
{
console
.
log
(
'Payment timed out after 20 minutes.'
);
})
.
catch
(
function
()
{
console
.
log
(
'Unable to abort, user is in the process of paying.'
);
});
},
20
*
60
*
1000
);
/*
20
minutes
*/
request
.
show
()
.
then
(
function
(
instrument
)
{
window
.
clearTimeout
(
paymentTimeout
);
processResponse
(
instrument
);
// Handle response from browser.
})
.
catch
(
function
(
err
)
{
console
.
log
(
err
);
});
}
