Introduction
Google Pay for the web is built on the Payment Request API, an open web standard candidate that relies on the customer's browser as a secure intermediary for payments.
What is Payment Request API
It is one part of Web Payments standard.
Web Payments is an emerging web standard being developed by the W3C to simplify online payments. Web Payments consist of the following web standards:
- Payment Request API
- Payment Handler API
- Payment Method Identifiers
- Payment Method Manifest
//sample code for Payment Request
const request = new PaymentRequest(paymentMethods, paymentDetails);
request.canMakePayment().then(result => {
if (result) {
// This browser supports the specified payment method.
} else {
// This browser does NOT support the specified payment method.
}
}).catch(e => {
// An exception
});Standalone page to show Google Pay
<html>
<head>
<script async src="https://pay.google.com/gp/p/js/pay.js" onload="onGooglePayLoaded()"></script>
<script>
const tokenizationSpec = {
type: 'PAYMENT_GATEWAY',
parameters: {
gateway: 'example',
gatewayMerchantId: 'gatewayMerchantId'
}
};
const cardPaymentMethod = {
type: 'CARD',
tokenizationSpecification: tokenizationSpec,
parameters: {
allowedCardNetworks: ['VISA', 'AMEX'],
allowedAuthMethods:
['PAN_ONLY', 'CRYPTOGRAM_3DS'],
billingAddressRequired: true,
billingAddressParameters: {
format: 'FULL',
phoneNumberRequired: true
}
}
}
function onGooglePayLoaded() {
const googlePayClient = new google.payments.api.PaymentsClient({ environment: "TEST" });
const clientConfiguration = {
apiVersion: 2,
apiVersionMinor: 0,
allowedPaymentMethods: [cardPaymentMethod]
};
googlePayClient.isReadyToPay(clientConfiguration)
.then(function (response) {
console.log(response)
if (response.result) {
//create button
let button = googlePayClient.createButton({
buttonColor: 'default',
buttonType: 'long',
onClick: handleSubmit
})
document.getElementById('gp').appendChild(button);
}
}).catch(function (err) {
});
function handleSubmit() {
const paymentDataRequest = Object.assign({}, clientConfiguration);
paymentDataRequest.transactionInfo = {
totalPriceStatus: 'FINAL',
totalPrice: '123.45',
currencyCode: 'USD'
}
paymentDataRequest.merchantInfo = {
merchantId: '0123456789',
merchantName: 'Example Merchant'
}
googlePayClient.loadPaymentData(paymentDataRequest)
.then(function (paymentData) {
console.log("payment data:", paymentData)
})
}
}
</script>
</head>
<body>
<p>Try Google Pay</p>
<p id="gp"></p>
</body>
</html>Local development
- if it is localhost, Google allows it to be http
- let a gmail to joined into sandbox test group and do not need to provide card when click "Google Pay button"
No comments:
Post a Comment