mirror of
https://github.com/woocommerce/woocommerce-paypal-payments.git
synced 2025-09-03 08:37:53 +08:00
Merge branch 'trunk' into update/add-title-description-and-gateway
This commit is contained in:
Emili Castells Guasch
commit
b8a7a533c2
190 changed files with 6070 additions and 1680 deletions
|
|
@ -1,5 +1,6 @@
|
|||
import ErrorHandler from '../../../../ppcp-button/resources/js/modules/ErrorHandler';
|
||||
import CartActionHandler from '../../../../ppcp-button/resources/js/modules/ActionHandler/CartActionHandler';
|
||||
import TransactionInfo from '../Helper/TransactionInfo';
|
||||
|
||||
class BaseHandler {
|
||||
constructor( buttonConfig, ppcpConfig, externalHandler ) {
|
||||
|
|
@ -34,13 +35,14 @@ class BaseHandler {
|
|||
|
||||
// handle script reload
|
||||
const data = result.data;
|
||||
const transaction = new TransactionInfo(
|
||||
data.total,
|
||||
data.shipping_fee,
|
||||
data.currency_code,
|
||||
data.country_code
|
||||
);
|
||||
|
||||
resolve( {
|
||||
countryCode: data.country_code,
|
||||
currencyCode: data.currency_code,
|
||||
totalPriceStatus: 'FINAL',
|
||||
totalPrice: data.total_str,
|
||||
} );
|
||||
resolve( transaction );
|
||||
} );
|
||||
} );
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import Spinner from '../../../../ppcp-button/resources/js/modules/Helper/Spinner';
|
||||
import BaseHandler from './BaseHandler';
|
||||
import CheckoutActionHandler from '../../../../ppcp-button/resources/js/modules/ActionHandler/CheckoutActionHandler';
|
||||
import TransactionInfo from '../Helper/TransactionInfo';
|
||||
|
||||
class PayNowHandler extends BaseHandler {
|
||||
validateContext() {
|
||||
|
|
@ -14,12 +15,14 @@ class PayNowHandler extends BaseHandler {
|
|||
return new Promise( async ( resolve, reject ) => {
|
||||
const data = this.ppcpConfig.pay_now;
|
||||
|
||||
resolve( {
|
||||
countryCode: data.country_code,
|
||||
currencyCode: data.currency_code,
|
||||
totalPriceStatus: 'FINAL',
|
||||
totalPrice: data.total_str,
|
||||
} );
|
||||
const transaction = new TransactionInfo(
|
||||
data.total,
|
||||
data.shipping_fee,
|
||||
data.currency_code,
|
||||
data.country_code
|
||||
);
|
||||
|
||||
resolve( transaction );
|
||||
} );
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ import SimulateCart from '../../../../ppcp-button/resources/js/modules/Helper/Si
|
|||
import ErrorHandler from '../../../../ppcp-button/resources/js/modules/ErrorHandler';
|
||||
import UpdateCart from '../../../../ppcp-button/resources/js/modules/Helper/UpdateCart';
|
||||
import BaseHandler from './BaseHandler';
|
||||
import TransactionInfo from '../Helper/TransactionInfo';
|
||||
|
||||
class SingleProductHandler extends BaseHandler {
|
||||
validateContext() {
|
||||
|
|
@ -42,12 +43,14 @@ class SingleProductHandler extends BaseHandler {
|
|||
this.ppcpConfig.ajax.simulate_cart.endpoint,
|
||||
this.ppcpConfig.ajax.simulate_cart.nonce
|
||||
).simulate( ( data ) => {
|
||||
resolve( {
|
||||
countryCode: data.country_code,
|
||||
currencyCode: data.currency_code,
|
||||
totalPriceStatus: 'FINAL',
|
||||
totalPrice: data.total_str,
|
||||
} );
|
||||
const transaction = new TransactionInfo(
|
||||
data.total,
|
||||
data.shipping_fee,
|
||||
data.currency_code,
|
||||
data.country_code
|
||||
);
|
||||
|
||||
resolve( transaction );
|
||||
}, products );
|
||||
} );
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,102 @@
|
|||
import { GooglePayStorage } from '../Helper/GooglePayStorage';
|
||||
import {
|
||||
getWooCommerceCustomerDetails,
|
||||
setPayerData,
|
||||
} from '../../../../ppcp-button/resources/js/modules/Helper/PayerData';
|
||||
|
||||
const CHECKOUT_FORM_SELECTOR = 'form.woocommerce-checkout';
|
||||
|
||||
export class CheckoutBootstrap {
|
||||
/**
|
||||
* @type {GooglePayStorage}
|
||||
*/
|
||||
#storage;
|
||||
|
||||
/**
|
||||
* @type {HTMLFormElement|null}
|
||||
*/
|
||||
#checkoutForm;
|
||||
|
||||
/**
|
||||
* @param {GooglePayStorage} storage
|
||||
*/
|
||||
constructor( storage ) {
|
||||
this.#storage = storage;
|
||||
this.#checkoutForm = CheckoutBootstrap.getCheckoutForm();
|
||||
}
|
||||
|
||||
/**
|
||||
* Indicates if the current page contains a checkout form.
|
||||
*
|
||||
* @return {boolean} True if a checkout form is present.
|
||||
*/
|
||||
static isPageWithCheckoutForm() {
|
||||
return null !== CheckoutBootstrap.getCheckoutForm();
|
||||
}
|
||||
|
||||
/**
|
||||
* Retrieves the WooCommerce checkout form element.
|
||||
*
|
||||
* @return {HTMLFormElement|null} The form, or null if not a checkout page.
|
||||
*/
|
||||
static getCheckoutForm() {
|
||||
return document.querySelector( CHECKOUT_FORM_SELECTOR );
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns the WooCommerce checkout form element.
|
||||
*
|
||||
* @return {HTMLFormElement|null} The form, or null if not a checkout page.
|
||||
*/
|
||||
get checkoutForm() {
|
||||
return this.#checkoutForm;
|
||||
}
|
||||
|
||||
/**
|
||||
* Initializes the checkout process.
|
||||
*
|
||||
* @throws {Error} If called on a page without a checkout form.
|
||||
*/
|
||||
init() {
|
||||
if ( ! this.#checkoutForm ) {
|
||||
throw new Error(
|
||||
'Checkout form not found. Cannot initialize CheckoutBootstrap.'
|
||||
);
|
||||
}
|
||||
|
||||
this.#populateCheckoutFields();
|
||||
}
|
||||
|
||||
/**
|
||||
* Populates checkout fields with stored or customer data.
|
||||
*/
|
||||
#populateCheckoutFields() {
|
||||
const loggedInData = getWooCommerceCustomerDetails();
|
||||
|
||||
if ( loggedInData ) {
|
||||
// If customer is logged in, we use the details from the customer profile.
|
||||
return;
|
||||
}
|
||||
|
||||
const billingData = this.#storage.getPayer();
|
||||
|
||||
if ( ! billingData ) {
|
||||
return;
|
||||
}
|
||||
|
||||
setPayerData( billingData, true );
|
||||
this.checkoutForm.addEventListener(
|
||||
'submit',
|
||||
this.#onFormSubmit.bind( this )
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Clean-up when checkout form is submitted.
|
||||
*
|
||||
* Immediately removes the payer details from the localStorage.
|
||||
*/
|
||||
#onFormSubmit() {
|
||||
this.#storage.clearPayer();
|
||||
}
|
||||
}
|
||||
|
|
@ -5,7 +5,10 @@ import {
|
|||
import PaymentButton from '../../../ppcp-button/resources/js/modules/Renderer/PaymentButton';
|
||||
import widgetBuilder from '../../../ppcp-button/resources/js/modules/Renderer/WidgetBuilder';
|
||||
import UpdatePaymentData from './Helper/UpdatePaymentData';
|
||||
import TransactionInfo from './Helper/TransactionInfo';
|
||||
import { PaymentMethods } from '../../../ppcp-button/resources/js/modules/Helper/CheckoutMethodState';
|
||||
import { setPayerData } from '../../../ppcp-button/resources/js/modules/Helper/PayerData';
|
||||
import moduleStorage from './Helper/GooglePayStorage';
|
||||
|
||||
/**
|
||||
* Plugin-specific styling.
|
||||
|
|
@ -39,11 +42,17 @@ import { PaymentMethods } from '../../../ppcp-button/resources/js/modules/Helper
|
|||
*
|
||||
* @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.
|
||||
* @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 {(Object) => Promise} 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.
|
||||
*/
|
||||
|
||||
/**
|
||||
|
|
@ -53,14 +62,40 @@ import { PaymentMethods } from '../../../ppcp-button/resources/js/modules/Helper
|
|||
* @typedef {Object} TransactionInfo
|
||||
* @property {string} currencyCode - Required. The ISO 4217 alphabetic currency code.
|
||||
* @property {string} countryCode - Optional. required for EEA countries,
|
||||
* @property {string} transactionId - Optional. A unique ID that identifies a facilitation attempt. Highly encouraged for troubleshooting.
|
||||
* @property {string} totalPriceStatus - Required. [ESTIMATED|FINAL] The status of the total price used:
|
||||
* @property {string} totalPrice - Required. Total monetary value of the transaction with an optional decimal precision of two decimal places.
|
||||
* @property {Array} displayItems - Optional. A list of cart items shown in the payment sheet (e.g. subtotals, sales taxes, shipping charges, discounts etc.).
|
||||
* @property {string} totalPriceLabel - Optional. Custom label for the total price within the display items.
|
||||
* @property {string} checkoutOption - Optional. Affects the submit button text displayed in the Google Pay payment sheet.
|
||||
* @property {string} transactionId - Optional. A unique ID that identifies a facilitation
|
||||
* attempt. Highly encouraged for troubleshooting.
|
||||
* @property {string} totalPriceStatus - Required. [ESTIMATED|FINAL] The status of the total price
|
||||
* used:
|
||||
* @property {string} totalPrice - Required. Total monetary value of the transaction with an
|
||||
* optional decimal precision of two decimal places.
|
||||
* @property {Array} displayItems - Optional. A list of cart items shown in the payment sheet
|
||||
* (e.g. subtotals, sales taxes, shipping charges, discounts etc.).
|
||||
* @property {string} totalPriceLabel - Optional. Custom label for the total price within the
|
||||
* display items.
|
||||
* @property {string} checkoutOption - Optional. Affects the submit button text displayed in the
|
||||
* Google Pay payment sheet.
|
||||
*/
|
||||
|
||||
function payerDataFromPaymentResponse( response ) {
|
||||
const raw = response?.paymentMethodData?.info?.billingAddress;
|
||||
|
||||
return {
|
||||
email_address: response?.email,
|
||||
name: {
|
||||
given_name: raw.name.split( ' ' )[ 0 ], // Assuming first name is the first part
|
||||
surname: raw.name.split( ' ' ).slice( 1 ).join( ' ' ), // Assuming last name is the rest
|
||||
},
|
||||
address: {
|
||||
country_code: raw.countryCode,
|
||||
address_line_1: raw.address1,
|
||||
address_line_2: raw.address2,
|
||||
admin_area_1: raw.administrativeArea,
|
||||
admin_area_2: raw.locality,
|
||||
postal_code: raw.postalCode,
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
class GooglepayButton extends PaymentButton {
|
||||
/**
|
||||
* @inheritDoc
|
||||
|
|
@ -78,7 +113,7 @@ class GooglepayButton extends PaymentButton {
|
|||
#paymentsClient = null;
|
||||
|
||||
/**
|
||||
* Details about the processed transaction.
|
||||
* Details about the processed transaction, provided to the Google SDK.
|
||||
*
|
||||
* @type {?TransactionInfo}
|
||||
*/
|
||||
|
|
@ -388,12 +423,14 @@ class GooglepayButton extends PaymentButton {
|
|||
const initiatePaymentRequest = () => {
|
||||
window.ppcpFundingSource = 'googlepay';
|
||||
const paymentDataRequest = this.paymentDataRequest();
|
||||
|
||||
this.log(
|
||||
'onButtonClick: paymentDataRequest',
|
||||
paymentDataRequest,
|
||||
this.context
|
||||
);
|
||||
this.paymentsClient.loadPaymentData( paymentDataRequest );
|
||||
|
||||
return this.paymentsClient.loadPaymentData( paymentDataRequest );
|
||||
};
|
||||
|
||||
const validateForm = () => {
|
||||
|
|
@ -434,28 +471,24 @@ class GooglepayButton extends PaymentButton {
|
|||
apiVersionMinor: 0,
|
||||
};
|
||||
|
||||
const googlePayConfig = this.googlePayConfig;
|
||||
const paymentDataRequest = Object.assign( {}, baseRequest );
|
||||
paymentDataRequest.allowedPaymentMethods =
|
||||
googlePayConfig.allowedPaymentMethods;
|
||||
paymentDataRequest.transactionInfo = this.transactionInfo;
|
||||
paymentDataRequest.merchantInfo = googlePayConfig.merchantInfo;
|
||||
const useShippingCallback = this.requiresShipping;
|
||||
const callbackIntents = [ 'PAYMENT_AUTHORIZATION' ];
|
||||
|
||||
if ( this.requiresShipping ) {
|
||||
paymentDataRequest.callbackIntents = [
|
||||
'SHIPPING_ADDRESS',
|
||||
'SHIPPING_OPTION',
|
||||
'PAYMENT_AUTHORIZATION',
|
||||
];
|
||||
paymentDataRequest.shippingAddressRequired = true;
|
||||
paymentDataRequest.shippingAddressParameters =
|
||||
this.shippingAddressParameters();
|
||||
paymentDataRequest.shippingOptionRequired = true;
|
||||
} else {
|
||||
paymentDataRequest.callbackIntents = [ 'PAYMENT_AUTHORIZATION' ];
|
||||
if ( useShippingCallback ) {
|
||||
callbackIntents.push( 'SHIPPING_ADDRESS', 'SHIPPING_OPTION' );
|
||||
}
|
||||
|
||||
return paymentDataRequest;
|
||||
return {
|
||||
...baseRequest,
|
||||
allowedPaymentMethods: this.googlePayConfig.allowedPaymentMethods,
|
||||
transactionInfo: this.transactionInfo.finalObject,
|
||||
merchantInfo: this.googlePayConfig.merchantInfo,
|
||||
callbackIntents,
|
||||
emailRequired: true,
|
||||
shippingAddressRequired: useShippingCallback,
|
||||
shippingOptionRequired: useShippingCallback,
|
||||
shippingAddressParameters: this.shippingAddressParameters(),
|
||||
};
|
||||
}
|
||||
|
||||
//------------------------
|
||||
|
|
@ -481,6 +514,16 @@ class GooglepayButton extends PaymentButton {
|
|||
).update( paymentData );
|
||||
const transactionInfo = this.transactionInfo;
|
||||
|
||||
// Check, if the current context uses the WC cart.
|
||||
const hasRealCart = [
|
||||
'checkout-block',
|
||||
'checkout',
|
||||
'cart-block',
|
||||
'cart',
|
||||
'mini-cart',
|
||||
'pay-now',
|
||||
].includes( this.context );
|
||||
|
||||
this.log( 'onPaymentDataChanged:updatedData', updatedData );
|
||||
this.log(
|
||||
'onPaymentDataChanged:transactionInfo',
|
||||
|
|
@ -489,7 +532,6 @@ class GooglepayButton extends PaymentButton {
|
|||
|
||||
updatedData.country_code = transactionInfo.countryCode;
|
||||
updatedData.currency_code = transactionInfo.currencyCode;
|
||||
updatedData.total_str = transactionInfo.totalPrice;
|
||||
|
||||
// Handle unserviceable address.
|
||||
if ( ! updatedData.shipping_options?.shippingOptions?.length ) {
|
||||
|
|
@ -499,20 +541,37 @@ class GooglepayButton extends PaymentButton {
|
|||
return;
|
||||
}
|
||||
|
||||
switch ( paymentData.callbackTrigger ) {
|
||||
case 'INITIALIZE':
|
||||
case 'SHIPPING_ADDRESS':
|
||||
paymentDataRequestUpdate.newShippingOptionParameters =
|
||||
updatedData.shipping_options;
|
||||
paymentDataRequestUpdate.newTransactionInfo =
|
||||
this.calculateNewTransactionInfo( updatedData );
|
||||
break;
|
||||
case 'SHIPPING_OPTION':
|
||||
paymentDataRequestUpdate.newTransactionInfo =
|
||||
this.calculateNewTransactionInfo( updatedData );
|
||||
break;
|
||||
if (
|
||||
[ 'INITIALIZE', 'SHIPPING_ADDRESS' ].includes(
|
||||
paymentData.callbackTrigger
|
||||
)
|
||||
) {
|
||||
paymentDataRequestUpdate.newShippingOptionParameters =
|
||||
this.sanitizeShippingOptions(
|
||||
updatedData.shipping_options
|
||||
);
|
||||
}
|
||||
|
||||
if ( updatedData.total && hasRealCart ) {
|
||||
transactionInfo.setTotal(
|
||||
updatedData.total,
|
||||
updatedData.shipping_fee
|
||||
);
|
||||
|
||||
// This page contains a real cart and potentially a form for shipping options.
|
||||
this.syncShippingOptionWithForm(
|
||||
paymentData?.shippingOptionData?.id
|
||||
);
|
||||
} else {
|
||||
transactionInfo.shippingFee = this.getShippingCosts(
|
||||
paymentData?.shippingOptionData?.id,
|
||||
updatedData.shipping_options
|
||||
);
|
||||
}
|
||||
|
||||
paymentDataRequestUpdate.newTransactionInfo =
|
||||
this.calculateNewTransactionInfo( transactionInfo );
|
||||
|
||||
resolve( paymentDataRequestUpdate );
|
||||
} catch ( error ) {
|
||||
this.error( 'Error during onPaymentDataChanged:', error );
|
||||
|
|
@ -521,6 +580,76 @@ class GooglepayButton extends PaymentButton {
|
|||
} );
|
||||
}
|
||||
|
||||
/**
|
||||
* Google Pay throws an error, when the shippingOptions entries contain
|
||||
* custom properties. This function strips unsupported properties from the
|
||||
* provided ajax response.
|
||||
*
|
||||
* @param {Object} responseData Data returned from the ajax endpoint.
|
||||
* @return {Object} Sanitized object.
|
||||
*/
|
||||
sanitizeShippingOptions( responseData ) {
|
||||
// Sanitize the shipping options.
|
||||
const cleanOptions = responseData.shippingOptions.map( ( item ) => ( {
|
||||
id: item.id,
|
||||
label: item.label,
|
||||
description: item.description,
|
||||
} ) );
|
||||
|
||||
// Ensure that the default option is valid.
|
||||
let defaultOptionId = responseData.defaultSelectedOptionId;
|
||||
if ( ! cleanOptions.some( ( item ) => item.id === defaultOptionId ) ) {
|
||||
defaultOptionId = cleanOptions[ 0 ].id;
|
||||
}
|
||||
|
||||
return {
|
||||
defaultSelectedOptionId: defaultOptionId,
|
||||
shippingOptions: cleanOptions,
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns the shipping costs as numeric value.
|
||||
*
|
||||
* TODO - Move this to the PaymentButton base class
|
||||
*
|
||||
* @param {string} shippingId - The shipping method ID.
|
||||
* @param {Object} shippingData - The PaymentDataRequest object that
|
||||
* contains shipping options.
|
||||
* @param {Array} shippingData.shippingOptions
|
||||
* @param {string} shippingData.defaultSelectedOptionId
|
||||
*
|
||||
* @return {number} The shipping costs.
|
||||
*/
|
||||
getShippingCosts(
|
||||
shippingId,
|
||||
{ shippingOptions = [], defaultSelectedOptionId = '' } = {}
|
||||
) {
|
||||
if ( ! shippingOptions?.length ) {
|
||||
this.log( 'Cannot calculate shipping cost: No Shipping Options' );
|
||||
return 0;
|
||||
}
|
||||
|
||||
const findOptionById = ( id ) =>
|
||||
shippingOptions.find( ( option ) => option.id === id );
|
||||
|
||||
const getValidShippingId = () => {
|
||||
if (
|
||||
'shipping_option_unselected' === shippingId ||
|
||||
! findOptionById( shippingId )
|
||||
) {
|
||||
// Entered on initial call, and when changing the shipping country.
|
||||
return defaultSelectedOptionId;
|
||||
}
|
||||
|
||||
return shippingId;
|
||||
};
|
||||
|
||||
const currentOption = findOptionById( getValidShippingId() );
|
||||
|
||||
return Number( currentOption?.cost ) || 0;
|
||||
}
|
||||
|
||||
unserviceableShippingAddressError() {
|
||||
return {
|
||||
reason: 'SHIPPING_ADDRESS_UNSERVICEABLE',
|
||||
|
|
@ -529,13 +658,14 @@ class GooglepayButton extends PaymentButton {
|
|||
};
|
||||
}
|
||||
|
||||
calculateNewTransactionInfo( updatedData ) {
|
||||
return {
|
||||
countryCode: updatedData.country_code,
|
||||
currencyCode: updatedData.currency_code,
|
||||
totalPriceStatus: 'FINAL',
|
||||
totalPrice: updatedData.total_str,
|
||||
};
|
||||
/**
|
||||
* Recalculates and returns the plain transaction info object.
|
||||
*
|
||||
* @param {TransactionInfo} transactionInfo - Internal transactionInfo instance.
|
||||
* @return {{totalPrice: string, countryCode: string, totalPriceStatus: string, currencyCode: string}} Updated details.
|
||||
*/
|
||||
calculateNewTransactionInfo( transactionInfo ) {
|
||||
return transactionInfo.finalObject;
|
||||
}
|
||||
|
||||
//------------------------
|
||||
|
|
@ -543,83 +673,111 @@ class GooglepayButton extends PaymentButton {
|
|||
//------------------------
|
||||
|
||||
onPaymentAuthorized( paymentData ) {
|
||||
this.log( 'onPaymentAuthorized' );
|
||||
this.log( 'onPaymentAuthorized', paymentData );
|
||||
|
||||
return this.processPayment( paymentData );
|
||||
}
|
||||
|
||||
async processPayment( paymentData ) {
|
||||
this.log( 'processPayment' );
|
||||
this.logGroup( 'processPayment' );
|
||||
|
||||
return new Promise( async ( resolve, reject ) => {
|
||||
try {
|
||||
const id = await this.contextHandler.createOrder();
|
||||
const payer = payerDataFromPaymentResponse( paymentData );
|
||||
|
||||
this.log( 'processPayment: createOrder', id );
|
||||
const paymentError = ( reason ) => {
|
||||
this.error( reason );
|
||||
|
||||
const confirmOrderResponse = await widgetBuilder.paypal
|
||||
.Googlepay()
|
||||
.confirmOrder( {
|
||||
orderId: id,
|
||||
paymentMethodData: paymentData.paymentMethodData,
|
||||
} );
|
||||
return this.processPaymentResponse(
|
||||
'ERROR',
|
||||
'PAYMENT_AUTHORIZATION',
|
||||
reason
|
||||
);
|
||||
};
|
||||
|
||||
this.log(
|
||||
'processPayment: confirmOrder',
|
||||
confirmOrderResponse
|
||||
);
|
||||
const checkPayPalApproval = async ( orderId ) => {
|
||||
const confirmationData = {
|
||||
orderId,
|
||||
paymentMethodData: paymentData.paymentMethodData,
|
||||
};
|
||||
|
||||
/** Capture the Order on the Server */
|
||||
if ( confirmOrderResponse.status === 'APPROVED' ) {
|
||||
let approveFailed = false;
|
||||
await this.contextHandler.approveOrder(
|
||||
{
|
||||
orderID: id,
|
||||
},
|
||||
{
|
||||
// actions mock object.
|
||||
restart: () =>
|
||||
new Promise( ( resolve, reject ) => {
|
||||
approveFailed = true;
|
||||
resolve();
|
||||
} ),
|
||||
order: {
|
||||
get: () =>
|
||||
new Promise( ( resolve, reject ) => {
|
||||
resolve( null );
|
||||
} ),
|
||||
},
|
||||
}
|
||||
);
|
||||
const confirmOrderResponse = await widgetBuilder.paypal
|
||||
.Googlepay()
|
||||
.confirmOrder( confirmationData );
|
||||
|
||||
if ( ! approveFailed ) {
|
||||
resolve( this.processPaymentResponse( 'SUCCESS' ) );
|
||||
} else {
|
||||
resolve(
|
||||
this.processPaymentResponse(
|
||||
'ERROR',
|
||||
'PAYMENT_AUTHORIZATION',
|
||||
'FAILED TO APPROVE'
|
||||
)
|
||||
);
|
||||
}
|
||||
} else {
|
||||
resolve(
|
||||
this.processPaymentResponse(
|
||||
'ERROR',
|
||||
'PAYMENT_AUTHORIZATION',
|
||||
'TRANSACTION FAILED'
|
||||
)
|
||||
);
|
||||
this.log( 'confirmOrder', confirmOrderResponse );
|
||||
|
||||
return 'APPROVED' === confirmOrderResponse?.status;
|
||||
};
|
||||
|
||||
/**
|
||||
* This approval mainly confirms that the orderID is valid.
|
||||
*
|
||||
* It's still needed because this handler redirects to the checkout page if the server-side
|
||||
* approval was successful.
|
||||
*
|
||||
* @param {string} orderID
|
||||
*/
|
||||
const approveOrderServerSide = async ( orderID ) => {
|
||||
let isApproved = true;
|
||||
|
||||
this.log( 'approveOrder', orderID );
|
||||
|
||||
await this.contextHandler.approveOrder(
|
||||
{ orderID, payer },
|
||||
{
|
||||
restart: () =>
|
||||
new Promise( ( resolve ) => {
|
||||
isApproved = false;
|
||||
resolve();
|
||||
} ),
|
||||
order: {
|
||||
get: () =>
|
||||
new Promise( ( resolve ) => {
|
||||
resolve( null );
|
||||
} ),
|
||||
},
|
||||
}
|
||||
} catch ( err ) {
|
||||
resolve(
|
||||
this.processPaymentResponse(
|
||||
'ERROR',
|
||||
'PAYMENT_AUTHORIZATION',
|
||||
err.message
|
||||
)
|
||||
);
|
||||
);
|
||||
|
||||
return isApproved;
|
||||
};
|
||||
|
||||
const processPaymentPromise = async ( resolve ) => {
|
||||
const id = await this.contextHandler.createOrder();
|
||||
|
||||
this.log( 'createOrder', id );
|
||||
|
||||
const isApprovedByPayPal = await checkPayPalApproval( id );
|
||||
|
||||
if ( ! isApprovedByPayPal ) {
|
||||
resolve( paymentError( 'TRANSACTION FAILED' ) );
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
// This must be the last step in the process, as it initiates a redirect.
|
||||
const success = await approveOrderServerSide( id );
|
||||
|
||||
if ( success ) {
|
||||
resolve( this.processPaymentResponse( 'SUCCESS' ) );
|
||||
} else {
|
||||
resolve( paymentError( 'FAILED TO APPROVE' ) );
|
||||
}
|
||||
};
|
||||
|
||||
const addBillingDataToSession = () => {
|
||||
moduleStorage.setPayer( payer );
|
||||
setPayerData( payer );
|
||||
};
|
||||
|
||||
return new Promise( async ( resolve ) => {
|
||||
try {
|
||||
addBillingDataToSession();
|
||||
await processPaymentPromise( resolve );
|
||||
} catch ( err ) {
|
||||
resolve( paymentError( err.message ) );
|
||||
}
|
||||
|
||||
this.logGroup();
|
||||
} );
|
||||
}
|
||||
|
||||
|
|
@ -639,6 +797,55 @@ class GooglepayButton extends PaymentButton {
|
|||
|
||||
return response;
|
||||
}
|
||||
|
||||
/**
|
||||
* Updates the shipping option in the checkout form, if a form with shipping options is
|
||||
* detected.
|
||||
*
|
||||
* @param {string} shippingOption - The shipping option ID, e.g. "flat_rate:4".
|
||||
* @return {boolean} - True if a shipping option was found and selected, false otherwise.
|
||||
*/
|
||||
syncShippingOptionWithForm( shippingOption ) {
|
||||
const wrappers = [
|
||||
// Classic checkout, Classic cart.
|
||||
'.woocommerce-shipping-methods',
|
||||
// Block checkout.
|
||||
'.wc-block-components-shipping-rates-control',
|
||||
// Block cart.
|
||||
'.wc-block-components-totals-shipping',
|
||||
];
|
||||
|
||||
const sanitizedShippingOption = shippingOption.replace( /"/g, '' );
|
||||
|
||||
// Check for radio buttons with shipping options.
|
||||
for ( const wrapper of wrappers ) {
|
||||
const selector = `${ wrapper } input[type="radio"][value="${ sanitizedShippingOption }"]`;
|
||||
const radioInput = document.querySelector( selector );
|
||||
|
||||
if ( radioInput ) {
|
||||
radioInput.click();
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
// Check for select list with shipping options.
|
||||
for ( const wrapper of wrappers ) {
|
||||
const selector = `${ wrapper } select option[value="${ sanitizedShippingOption }"]`;
|
||||
const selectOption = document.querySelector( selector );
|
||||
|
||||
if ( selectOption ) {
|
||||
const selectElement = selectOption.closest( 'select' );
|
||||
|
||||
if ( selectElement ) {
|
||||
selectElement.value = sanitizedShippingOption;
|
||||
selectElement.dispatchEvent( new Event( 'change' ) );
|
||||
return true;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
export default GooglepayButton;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,31 @@
|
|||
import { LocalStorage } from '../../../../ppcp-button/resources/js/modules/Helper/LocalStorage';
|
||||
|
||||
export class GooglePayStorage extends LocalStorage {
|
||||
static PAYER = 'payer';
|
||||
static PAYER_TTL = 900; // 15 minutes in seconds
|
||||
|
||||
constructor() {
|
||||
super( 'ppcp-googlepay' );
|
||||
}
|
||||
|
||||
getPayer() {
|
||||
return this.get( GooglePayStorage.PAYER );
|
||||
}
|
||||
|
||||
setPayer( data ) {
|
||||
/*
|
||||
* The payer details are deleted on successful checkout, or after the TTL is reached.
|
||||
* This helps to remove stale data from the browser, in case the customer chooses to
|
||||
* use a different method to complete the purchase.
|
||||
*/
|
||||
this.set( GooglePayStorage.PAYER, data, GooglePayStorage.PAYER_TTL );
|
||||
}
|
||||
|
||||
clearPayer() {
|
||||
this.clear( GooglePayStorage.PAYER );
|
||||
}
|
||||
}
|
||||
|
||||
const moduleStorage = new GooglePayStorage();
|
||||
|
||||
export default moduleStorage;
|
||||
|
|
@ -0,0 +1,73 @@
|
|||
export default class TransactionInfo {
|
||||
#country = '';
|
||||
#currency = '';
|
||||
#amount = 0;
|
||||
#shippingFee = 0;
|
||||
|
||||
constructor( total, shippingFee, currency, country ) {
|
||||
this.#country = country;
|
||||
this.#currency = currency;
|
||||
|
||||
this.shippingFee = shippingFee;
|
||||
this.amount = total - shippingFee;
|
||||
}
|
||||
|
||||
set amount( newAmount ) {
|
||||
this.#amount = this.toAmount( newAmount );
|
||||
}
|
||||
|
||||
get amount() {
|
||||
return this.#amount;
|
||||
}
|
||||
|
||||
set shippingFee( newCost ) {
|
||||
this.#shippingFee = this.toAmount( newCost );
|
||||
}
|
||||
|
||||
get shippingFee() {
|
||||
return this.#shippingFee;
|
||||
}
|
||||
|
||||
get currencyCode() {
|
||||
return this.#currency;
|
||||
}
|
||||
|
||||
get countryCode() {
|
||||
return this.#country;
|
||||
}
|
||||
|
||||
get totalPrice() {
|
||||
const total = this.#amount + this.#shippingFee;
|
||||
|
||||
return total.toFixed( 2 );
|
||||
}
|
||||
|
||||
get finalObject() {
|
||||
return {
|
||||
countryCode: this.countryCode,
|
||||
currencyCode: this.currencyCode,
|
||||
totalPriceStatus: 'FINAL',
|
||||
totalPrice: this.totalPrice,
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Converts the value to a number and rounds to a precision of 2 digits.
|
||||
*
|
||||
* @param {any} value - The value to sanitize.
|
||||
* @return {number} Numeric value.
|
||||
*/
|
||||
toAmount( value ) {
|
||||
value = Number( value ) || 0;
|
||||
return Math.round( value * 100 ) / 100;
|
||||
}
|
||||
|
||||
setTotal( totalPrice, shippingFee ) {
|
||||
totalPrice = this.toAmount( totalPrice );
|
||||
|
||||
if ( totalPrice ) {
|
||||
this.shippingFee = shippingFee;
|
||||
this.amount = totalPrice - this.shippingFee;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
import GooglepayButton from '../GooglepayButton';
|
||||
import PreviewButton from '../../../../ppcp-button/resources/js/modules/Preview/PreviewButton';
|
||||
|
||||
/**
|
||||
* A single GooglePay preview button instance.
|
||||
*/
|
||||
export default class GooglePayPreviewButton extends PreviewButton {
|
||||
constructor( args ) {
|
||||
super( args );
|
||||
|
||||
this.selector = `${ args.selector }GooglePay`;
|
||||
this.defaultAttributes = {
|
||||
button: {
|
||||
style: {
|
||||
type: 'pay',
|
||||
color: 'black',
|
||||
language: 'en',
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
createButton( buttonConfig ) {
|
||||
const button = new GooglepayButton(
|
||||
'preview',
|
||||
null,
|
||||
buttonConfig,
|
||||
this.ppcpConfig
|
||||
);
|
||||
|
||||
button.init( this.apiConfig );
|
||||
}
|
||||
|
||||
/**
|
||||
* Merge form details into the config object for preview.
|
||||
* Mutates the previewConfig object; no return value.
|
||||
* @param buttonConfig
|
||||
* @param ppcpConfig
|
||||
*/
|
||||
dynamicPreviewConfig( buttonConfig, ppcpConfig ) {
|
||||
// Merge the current form-values into the preview-button configuration.
|
||||
if ( ppcpConfig.button && buttonConfig.button ) {
|
||||
Object.assign( buttonConfig.button.style, ppcpConfig.button.style );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,57 @@
|
|||
import PreviewButtonManager from '../../../../ppcp-button/resources/js/modules/Preview/PreviewButtonManager';
|
||||
import GooglePayPreviewButton from './GooglePayPreviewButton';
|
||||
|
||||
/**
|
||||
* Manages all GooglePay preview buttons on this page.
|
||||
*/
|
||||
export default class GooglePayPreviewButtonManager extends PreviewButtonManager {
|
||||
constructor() {
|
||||
const args = {
|
||||
methodName: 'GooglePay',
|
||||
buttonConfig: window.wc_ppcp_googlepay_admin,
|
||||
};
|
||||
|
||||
super( args );
|
||||
}
|
||||
|
||||
/**
|
||||
* Responsible for fetching and returning the PayPal configuration object for this payment
|
||||
* method.
|
||||
*
|
||||
* @param {{}} payPal - The PayPal SDK object provided by WidgetBuilder.
|
||||
* @return {Promise<{}>}
|
||||
*/
|
||||
async fetchConfig( payPal ) {
|
||||
const apiMethod = payPal?.Googlepay()?.config;
|
||||
|
||||
if ( ! apiMethod ) {
|
||||
this.error(
|
||||
'configuration object cannot be retrieved from PayPal'
|
||||
);
|
||||
return {};
|
||||
}
|
||||
|
||||
try {
|
||||
return await apiMethod();
|
||||
} catch ( error ) {
|
||||
if ( error.message.includes( 'Not Eligible' ) ) {
|
||||
this.apiError = 'Not Eligible';
|
||||
}
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* This method is responsible for creating a new PreviewButton instance and returning it.
|
||||
*
|
||||
* @param {string} wrapperId - CSS ID of the wrapper element.
|
||||
* @return {GooglePayPreviewButton}
|
||||
*/
|
||||
createButtonInstance( wrapperId ) {
|
||||
return new GooglePayPreviewButton( {
|
||||
selector: wrapperId,
|
||||
apiConfig: this.apiConfig,
|
||||
methodName: this.methodName,
|
||||
} );
|
||||
}
|
||||
}
|
||||
|
|
@ -1,5 +1,4 @@
|
|||
import PreviewButtonManager from '../../../ppcp-button/resources/js/modules/Renderer/PreviewButtonManager';
|
||||
import GooglePayPreviewButton from './GooglepayPreviewButton';
|
||||
import GooglePayPreviewButtonManager from './Preview/GooglePayPreviewButtonManager';
|
||||
|
||||
/**
|
||||
* Accessor that creates and returns a single PreviewButtonManager instance.
|
||||
|
|
@ -13,59 +12,5 @@ const buttonManager = () => {
|
|||
return GooglePayPreviewButtonManager.instance;
|
||||
};
|
||||
|
||||
/**
|
||||
* Manages all GooglePay preview buttons on this page.
|
||||
*/
|
||||
class GooglePayPreviewButtonManager extends PreviewButtonManager {
|
||||
constructor() {
|
||||
const args = {
|
||||
methodName: 'GooglePay',
|
||||
buttonConfig: window.wc_ppcp_googlepay_admin,
|
||||
};
|
||||
|
||||
super( args );
|
||||
}
|
||||
|
||||
/**
|
||||
* Responsible for fetching and returning the PayPal configuration object for this payment
|
||||
* method.
|
||||
*
|
||||
* @param {{}} payPal - The PayPal SDK object provided by WidgetBuilder.
|
||||
* @return {Promise<{}>} Promise that resolves when API configuration is available.
|
||||
*/
|
||||
async fetchConfig( payPal ) {
|
||||
const apiMethod = payPal?.Googlepay()?.config;
|
||||
|
||||
if ( ! apiMethod ) {
|
||||
this.error(
|
||||
'configuration object cannot be retrieved from PayPal'
|
||||
);
|
||||
return {};
|
||||
}
|
||||
|
||||
try {
|
||||
return await apiMethod();
|
||||
} catch ( error ) {
|
||||
if ( error.message.includes( 'Not Eligible' ) ) {
|
||||
this.apiError = 'Not Eligible';
|
||||
}
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* This method is responsible for creating a new PreviewButton instance and returning it.
|
||||
*
|
||||
* @param {string} wrapperId - CSS ID of the wrapper element.
|
||||
* @return {GooglePayPreviewButton} The new preview button instance.
|
||||
*/
|
||||
createButtonInstance( wrapperId ) {
|
||||
return new GooglePayPreviewButton( {
|
||||
selector: wrapperId,
|
||||
apiConfig: this.apiConfig,
|
||||
} );
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize the preview button manager.
|
||||
buttonManager();
|
||||
|
|
|
|||
|
|
@ -1,28 +1,62 @@
|
|||
/**
|
||||
* Initialize the GooglePay module in the front end.
|
||||
* In some cases, this module is loaded when the `window.PayPalCommerceGateway` object is not
|
||||
* present. In that case, the page does not contain a Google Pay button, but some other logic
|
||||
* that is related to Google Pay (e.g., the CheckoutBootstrap module)
|
||||
*
|
||||
* @file
|
||||
*/
|
||||
|
||||
import { loadCustomScript } from '@paypal/paypal-js';
|
||||
import { loadPaypalScript } from '../../../ppcp-button/resources/js/modules/Helper/ScriptLoading';
|
||||
import GooglepayManager from './GooglepayManager';
|
||||
import { setupButtonEvents } from '../../../ppcp-button/resources/js/modules/Helper/ButtonRefreshHelper';
|
||||
import { CheckoutBootstrap } from './ContextBootstrap/CheckoutBootstrap';
|
||||
import moduleStorage from './Helper/GooglePayStorage';
|
||||
|
||||
( function ( { buttonConfig, ppcpConfig, jQuery } ) {
|
||||
let manager;
|
||||
( function ( { buttonConfig, ppcpConfig = {} } ) {
|
||||
const context = ppcpConfig.context;
|
||||
|
||||
const bootstrap = function () {
|
||||
manager = new GooglepayManager( buttonConfig, ppcpConfig );
|
||||
manager.init();
|
||||
};
|
||||
|
||||
setupButtonEvents( function () {
|
||||
if ( manager ) {
|
||||
manager.reinit();
|
||||
function bootstrapPayButton() {
|
||||
if ( ! buttonConfig || ! ppcpConfig ) {
|
||||
return;
|
||||
}
|
||||
} );
|
||||
|
||||
const manager = new GooglepayManager( buttonConfig, ppcpConfig );
|
||||
manager.init();
|
||||
|
||||
setupButtonEvents( function () {
|
||||
manager.reinit();
|
||||
} );
|
||||
}
|
||||
|
||||
function bootstrapCheckout() {
|
||||
if ( context && ! [ 'continuation', 'checkout' ].includes( context ) ) {
|
||||
// Context must be missing/empty, or "continuation"/"checkout" to proceed.
|
||||
return;
|
||||
}
|
||||
if ( ! CheckoutBootstrap.isPageWithCheckoutForm() ) {
|
||||
return;
|
||||
}
|
||||
|
||||
const checkoutBootstrap = new CheckoutBootstrap( moduleStorage );
|
||||
checkoutBootstrap.init();
|
||||
}
|
||||
|
||||
function bootstrap() {
|
||||
bootstrapPayButton();
|
||||
bootstrapCheckout();
|
||||
}
|
||||
|
||||
document.addEventListener( 'DOMContentLoaded', () => {
|
||||
if (
|
||||
typeof buttonConfig === 'undefined' ||
|
||||
typeof ppcpConfig === 'undefined'
|
||||
) {
|
||||
// No PayPal buttons present on this page.
|
||||
if ( ! buttonConfig || ! ppcpConfig ) {
|
||||
/*
|
||||
* No PayPal buttons present on this page, but maybe a bootstrap module needs to be
|
||||
* initialized. Skip loading the SDK or gateway configuration, and directly initialize
|
||||
* the module.
|
||||
*/
|
||||
bootstrap();
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
|
|
@ -52,5 +86,4 @@ import { setupButtonEvents } from '../../../ppcp-button/resources/js/modules/Hel
|
|||
} )( {
|
||||
buttonConfig: window.wc_ppcp_googlepay,
|
||||
ppcpConfig: window.PayPalCommerceGateway,
|
||||
jQuery: window.jQuery,
|
||||
} );
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue
