Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix the "0.00" amount in Google Pay for virtual products (3696) #2636

Open
wants to merge 4 commits into
base: trunk
Choose a base branch
from
+58 −46
Open

Fix the "0.00" amount in Google Pay for virtual products (3696) #2636

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
368ad49
🎨 Minor changes in comment linebreaks
stracker-phil Sep 18, 2024
643a23c
🐛 Fix the 0-amount bug
stracker-phil Sep 18, 2024
5891d80
🎨 Code style changes & cleanup
stracker-phil Sep 23, 2024
c852bc9
🐛 Fix express payment error in block cart
stracker-phil Sep 23, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
67 changes: 45 additions & 22 deletions modules/ppcp-blocks/resources/js/checkout-block.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,16 +19,15 @@ import { PayPalScriptProvider, PayPalButtons } from '@paypal/react-paypal-js';
import { normalizeStyleForFundingSource } from '../../../ppcp-button/resources/js/modules/Helper/Style';
import buttonModuleWatcher from '../../../ppcp-button/resources/js/modules/ButtonModuleWatcher';
import BlockCheckoutMessagesBootstrap from './Bootstrap/BlockCheckoutMessagesBootstrap';
import { keysToCamelCase } from '../../../ppcp-button/resources/js/modules/Helper/Utils';
import { handleShippingOptionsChange } from '../../../ppcp-button/resources/js/modules/Helper/ShippingHandler';
const config = wc.wcSettings.getSetting( 'ppcp-gateway_data' );

window.ppcpFundingSource = config.fundingSource;

let registeredContext = false;

let paypalScriptPromise = null;

const PAYPAL_GATEWAY_ID = 'ppcp-gateway';

const PayPalComponent = ( {
onClick,
onClose,
Expand All @@ -46,6 +45,7 @@ const PayPalComponent = ( {
const { responseTypes } = emitResponse;

const [ paypalOrder, setPaypalOrder ] = useState( null );
const [ continuationFilled, setContinuationFilled ] = useState( false );
const [ gotoContinuationOnError, setGotoContinuationOnError ] =
useState( false );

Expand All @@ -63,15 +63,33 @@ const PayPalComponent = ( {
? `${ config.id }-${ fundingSource }`
: config.id;

/**
* The block cart displays express checkout buttons. Those buttons are handled by the
* PAYPAL_GATEWAY_ID method on the server ("PayPal Smart Buttons").
*
* A possible bug in WooCommerce does not use the correct payment method ID for the express
* payment buttons inside the cart, but sends the ID of the _first_ active payment method.
*
* This function uses an internal WooCommerce dispatcher method to set the correct method ID.
*/
const enforcePaymentMethodForCart = () => {
// Do nothing, unless we're handling block cart express payment buttons.
if ( 'cart-block' !== config.scriptData.context ) {
return;
}

// Set the active payment method to PAYPAL_GATEWAY_ID.
wp.data
.dispatch( 'wc/store/payment' )
.__internalSetActivePaymentMethod( PAYPAL_GATEWAY_ID, {} );
};

useEffect( () => {
// fill the form if in continuation (for product or mini-cart buttons)
if (
! config.scriptData.continuation ||
! config.scriptData.continuation.order ||
window.ppcpContinuationFilled
) {
if ( continuationFilled || ! config.scriptData.continuation?.order ) {
return;
}

try {
const paypalAddresses = paypalOrderToWcAddresses(
config.scriptData.continuation.order
Expand All @@ -80,9 +98,11 @@ const PayPalComponent = ( {
.select( 'wc/store/cart' )
.getCustomerData();
const addresses = mergeWcAddress( wcAddresses, paypalAddresses );

wp.data
.dispatch( 'wc/store/cart' )
.setBillingAddress( addresses.billingAddress );

if ( shippingData.needsShipping ) {
wp.data
.dispatch( 'wc/store/cart' )
Expand All @@ -92,9 +112,10 @@ const PayPalComponent = ( {
// sometimes the PayPal address is missing, skip in this case.
console.log( err );
}

// this useEffect should run only once, but adding this in case of some kind of full re-rendering
window.ppcpContinuationFilled = true;
}, [] );
setContinuationFilled( true );
}, [ shippingData, continuationFilled ] );

const createOrder = async ( data, actions ) => {
try {
Expand Down Expand Up @@ -231,6 +252,7 @@ const PayPalComponent = ( {
location.href = getCheckoutRedirectUrl();
} else {
setGotoContinuationOnError( true );
enforcePaymentMethodForCart();
onSubmit();
}
} catch ( err ) {
Expand Down Expand Up @@ -322,6 +344,7 @@ const PayPalComponent = ( {
location.href = getCheckoutRedirectUrl();
} else {
setGotoContinuationOnError( true );
enforcePaymentMethodForCart();
onSubmit();
}
} catch ( err ) {
Expand Down Expand Up @@ -364,19 +387,19 @@ const PayPalComponent = ( {
};

const shouldHandleShippingInPayPal = () => {
return shouldskipFinalConfirmation() && config.needShipping
return shouldskipFinalConfirmation() && config.needShipping;
};

const shouldskipFinalConfirmation = () => {
if ( config.finalReviewEnabled ) {
return false;
}
const shouldskipFinalConfirmation = () => {
if ( config.finalReviewEnabled ) {
return false;
}

return (
window.ppcpFundingSource !== 'venmo' ||
! config.scriptData.vaultingEnabled
);
};
return (
window.ppcpFundingSource !== 'venmo' ||
! config.scriptData.vaultingEnabled
);
};

let handleShippingOptionsChange = null;
let handleShippingAddressChange = null;
Expand Down Expand Up @@ -610,11 +633,11 @@ const PayPalComponent = ( {
}

return ( data, actions ) => {
let shippingAddressChange = shouldHandleShippingInPayPal()
const shippingAddressChange = shouldHandleShippingInPayPal()
? handleShippingAddressChange( data, actions )
: null;

return shippingAddressChange;
return shippingAddressChange;
};
};

Expand Down
35 changes: 11 additions & 24 deletions modules/ppcp-googlepay/resources/js/GooglepayButton.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ 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';
Expand Down Expand Up @@ -42,17 +41,11 @@ import moduleStorage from './Helper/GooglePayStorage';
*
* @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 {(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.
* @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.
*/

/**
Expand All @@ -62,18 +55,12 @@ import moduleStorage from './Helper/GooglePayStorage';
* @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 ) {
Expand Down
2 changes: 2 additions & 0 deletions modules/ppcp-googlepay/resources/js/Helper/TransactionInfo.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,8 @@ export default class TransactionInfo {
this.#country = country;
this.#currency = currency;

shippingFee = this.toAmount( shippingFee );
total = this.toAmount( total );
this.shippingFee = shippingFee;
this.amount = total - shippingFee;
}
Expand Down
Loading