✨ Add transaction info to ApplePay initialization

modules/ppcp-applepay/resources/js/ApplepayButton.js

@@ -36,6 +36,18 @@ import {
  * @property {string} lang  - The locale; an empty string will apply the user-agent's language.
  */
 
+/**
+ * This object describes the transaction details.
+ *
+ * @typedef {Object} TransactionInfo
+ * @property {string} countryCode           - The ISO country code
+ * @property {string} currencyCode          - The ISO currency code
+ * @property {string} totalPriceStatus      - Usually 'FINAL', can also be 'DRAFT'
+ * @property {string} totalPrice            - Total monetary value of the transaction.
+ * @property {Array}  chosenShippingMethods - Selected shipping method.
+ * @property {string} shippingPackages      - A list of available shipping methods, defined by WooCommerce.
+ */
+
 /**
  * A payment button for Apple Pay.
  *
@@ -63,6 +75,13 @@ class ApplePayButton extends PaymentButton {
 	 */
 	#initialPaymentRequest = null;
 
+	/**
+	 * Details about the processed transaction, provided to the Apple SDK.
+	 *
+	 * @type {?TransactionInfo}
+	 */
+	#transactionInfo = null;
+
 	/**
 	 * Apple Pay specific API configuration.
 	 */
@@ -116,6 +135,29 @@ class ApplePayButton extends PaymentButton {
 		this.log( 'Create instance' );
 	}
 
+	/**
+	 * Details about the processed transaction.
+	 *
+	 * This object defines the price that is charged, and text that is displayed inside the
+	 * payment sheet.
+	 *
+	 * @return {?TransactionInfo} The TransactionInfo object.
+	 */
+	get transactionInfo() {
+		return this.#transactionInfo;
+	}
+
+	/**
+	 * Assign the new transaction details to the payment button.
+	 *
+	 * @param {TransactionInfo} newTransactionInfo - Transaction details.
+	 */
+	set transactionInfo( newTransactionInfo ) {
+		this.#transactionInfo = newTransactionInfo;
+
+		this.refresh();
+	}
+
 	/**
 	 * The nonce for ajax requests.
 	 *
@@ -189,10 +231,12 @@ class ApplePayButton extends PaymentButton {
 	/**
 	 * Configures the button instance. Must be called before the initial `init()`.
 	 *
-	 * @param {Object} apiConfig - API configuration.
+	 * @param {Object}          apiConfig       - API configuration.
+	 * @param {TransactionInfo} transactionInfo - Transaction details.
 	 */
-	configure( apiConfig ) {
+	configure( apiConfig, transactionInfo ) {
 		this.#applePayConfig = apiConfig;
+		this.#transactionInfo = transactionInfo;
 	}
 
 	init() {

modules/ppcp-applepay/resources/js/ApplepayManager.js

@@ -8,6 +8,7 @@ class ApplePayManager {
 	#ppcpConfig = null;
 	#applePayConfig = null;
 	#contextHandler = null;
+	#transactionInfo = null;
 	#buttons = [];
 
 	constructor( namespace, buttonConfig, ppcpConfig ) {
@@ -40,7 +41,7 @@ class ApplePayManager {
 		// Ensure ApplePayConfig is loaded before proceeding.
 		await this.init();
 
-		button.configure( this.#applePayConfig );
+		button.configure( this.#applePayConfig, this.#transactionInfo );
 		button.init();
 	}
 
@@ -55,11 +56,31 @@ class ApplePayManager {
 					console.error( 'No ApplePayConfig received during init' );
 				}
 			}
+
+			if ( ! this.#transactionInfo ) {
+				this.#transactionInfo = await this.fetchTransactionInfo();
+
+				if ( ! this.#applePayConfig ) {
+					console.error( 'No transactionInfo found during init' );
+				}
+			}
 		} catch ( error ) {
 			console.error( 'Error during initialization:', error );
 		}
 	}
 
+	async fetchTransactionInfo() {
+		try {
+			if ( ! this.#contextHandler ) {
+				throw new Error( 'ContextHandler is not initialized' );
+			}
+			return await this.#contextHandler.transactionInfo();
+		} catch ( error ) {
+			console.error( 'Error fetching transaction info:', error );
+			throw error;
+		}
+	}
+
 	reinit() {
 		for ( const button of this.#buttons ) {
 			button.reinit();

modules/ppcp-applepay/resources/js/ApplepayManagerBlockEditor.js

@@ -7,6 +7,7 @@ class ApplePayManagerBlockEditor {
 	#ppcpConfig = null;
 	#applePayConfig = null;
 	#contextHandler = null;
+	#transactionInfo = null;
 
 	constructor( namespace, buttonConfig, ppcpConfig ) {
 		this.#namespace = namespace;
@@ -34,6 +35,9 @@ class ApplePayManagerBlockEditor {
 				null
 			);
 
+			// Fetch transaction information.
+			this.#transactionInfo = await this.fetchTransactionInfo();
+
 			const button = ApplePayButton.createButton(
 				this.#ppcpConfig.context,
 				null,
@@ -42,12 +46,24 @@ class ApplePayManagerBlockEditor {
 				this.#contextHandler
 			);
 
-			button.configure( this.#applePayConfig );
+			button.configure( this.#applePayConfig, this.#transactionInfo );
 			button.init();
 		} catch ( error ) {
 			console.error( 'Failed to initialize Apple Pay:', error );
 		}
 	}
+
+	async fetchTransactionInfo() {
+		try {
+			if ( ! this.#contextHandler ) {
+				throw new Error( 'ContextHandler is not initialized' );
+			}
+			return await this.#contextHandler.transactionInfo();
+		} catch ( error ) {
+			console.error( 'Error fetching transaction info:', error );
+			throw error;
+		}
+	}
 }
 
 export default ApplePayManagerBlockEditor;