woocommerce/woocommerce-paypal-payments
2
0
Fork 0
mirror of https://github.com/woocommerce/woocommerce-paypal-payments.git synced 2025-09-05 08:59:14 +08:00
Code Issues Projects Packages Wiki Activity Actions 11

🥅 Improve code stability and documentation

Browse source
This commit is contained in:
Philipp Stracker 2024-08-07 15:45:28 +02:00
parent 7c8c9429e0
commit 8c811d9f8e
No known key found for this signature in database
1 changed files with 55 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

60
modules/ppcp-googlepay/resources/js/GooglepayButton.js
View file

@ -28,12 +28,31 @@ import { PaymentMethods } from '../../../ppcp-button/resources/js/modules/Helper
* @property {string} language - The locale; an empty string will apply the user-agent's language.
*/
/**
* Google Pay JS SDK
*
* @see https://developers.google.com/pay/api/web/reference/request-objects
* @typedef {Object} GooglePaySDK
* @property {typeof PaymentsClient} PaymentsClient - Main API client for payment actions.
*/
/**
* The Payments Client class, generated by the Google Pay SDK.
*
* @see https://developers.google.com/pay/api/web/reference/client
* @typedef {Object} PaymentsClient
* @property {Function} createButton - The convenience method is used to generate a Google Pay payment button styled with the latest Google Pay branding for insertion into a webpage.
* @property {Function} isReadyToPay - Use the isReadyToPay(isReadyToPayRequest) method to determine a user's ability to return a form of payment from the Google Pay API.
* @property {Function} loadPaymentData - This method presents a Google Pay payment sheet that allows selection of a payment method and optionally configured parameters
* @property {Function} onPaymentAuthorized - This method is called when a payment is authorized in the payment sheet.
* @property {Function} onPaymentDataChanged - This method handles payment data changes in the payment sheet such as shipping address and shipping options.
*/
class GooglepayButton extends PaymentButton {
/**
* Client reference, provided by the Google Pay JS SDK.
* @see https://developers.google.com/pay/api/web/reference/client
*/
paymentsClient = null;
#paymentsClient = null;
constructor(
context,
@ -90,6 +109,25 @@ class GooglepayButton extends PaymentButton {
return true;
}
/**
* The Google Pay API.
*
* @return {?GooglePaySDK} API for the Google Pay JS SDK, or null when SDK is not ready yet.
*/
get googlePayApi() {
return window.google?.payments?.api;
}
/**
* The Google Pay PaymentsClient instance created by this button.
* @see https://developers.google.com/pay/api/web/reference/client
*
* @return {?PaymentsClient} The SDK object, or null when SDK is not ready yet.
*/
get paymentsClient() {
return this.#paymentsClient;
}
init( config = null, transactionInfo = null ) {
if ( this.isInitialized ) {
return;
@ -114,12 +152,16 @@ class GooglepayButton extends PaymentButton {
this.baseCardPaymentMethod = this.allowedPaymentMethods[ 0 ];
super.init();
this.initClient();
this.#paymentsClient = this.createPaymentsClient();
if ( ! this.isPresent ) {
this.log( 'Payment wrapper not found', this.wrapperId );
return;
}
if ( ! this.paymentsClient ) {
this.log( 'Could not initialize the payments client' );
return;
}
this.paymentsClient
.isReadyToPay(
@ -147,7 +189,11 @@ class GooglepayButton extends PaymentButton {
this.init();
}
initClient() {
createPaymentsClient() {
if ( ! this.googlePayApi ) {
return null;
}
const callbacks = {
onPaymentAuthorized: this.onPaymentAuthorized.bind( this ),
};
@ -165,7 +211,7 @@ class GooglepayButton extends PaymentButton {
*
* @see https://developers.google.com/pay/api/web/reference/request-objects#PaymentOptions
*/
this.paymentsClient = new google.payments.api.PaymentsClient( {
return new this.googlePayApi.PaymentsClient( {
environment: this.buttonConfig.environment,
paymentDataCallbacks: callbacks,
} );
@ -183,6 +229,10 @@ class GooglepayButton extends PaymentButton {
* Add a Google Pay purchase button.
*/
addButton() {
if ( ! this.isInitialized ) {
return;
}
const baseCardPaymentMethod = this.baseCardPaymentMethod;
const { color, type, language } = this.style;