diff --git a/package.json b/package.json
index d5429a333..a97339a4a 100644
--- a/package.json
+++ b/package.json
@@ -53,7 +53,7 @@
"webpack": "^5.89.0"
},
"scripts": {
- "watch": "webpack --watch",
+ "watch": "BASE_PATH=. node_modules/.bin/encore dev --watch",
"build": "BASE_PATH=. node_modules/.bin/encore dev",
"setup": "gulp setup",
"e2e-activation": "npx playwright test --project=activation",
diff --git a/resources/js/applepayButtonBlock.js b/resources/js/applepayButtonBlock.js
new file mode 100644
index 000000000..058da50c7
--- /dev/null
+++ b/resources/js/applepayButtonBlock.js
@@ -0,0 +1,30 @@
+import {ApplePayButtonComponent} from "./blocks/ApplePayButtonComponent";
+
+(
+ function ({mollieApplePayBlockDataCart}) {
+ if (mollieApplePayBlockDataCart.length === 0) {
+ return
+ }
+ const {ApplePaySession} = window;
+ if (!(ApplePaySession && ApplePaySession.canMakePayments())) {
+ return null;
+ }
+
+ const {registerExpressPaymentMethod} = wc.wcBlocksRegistry;
+
+ registerExpressPaymentMethod({
+ name: 'mollie_wc_gateway_applepay_express',
+ content: < ApplePayButtonComponent/>,
+ edit: < ApplePayButtonComponent/>,
+ ariaLabel: 'Apple Pay',
+ canMakePayment: () => true,
+ paymentMethodId: 'mollie_wc_gateway_applepay',
+ supports: {
+ features: ['products'],
+ },
+ });
+ }
+)
+(
+ window
+)
diff --git a/resources/js/applepayButtonBlockComponent.js b/resources/js/applepayButtonBlockComponent.js
deleted file mode 100644
index 7c0215c6e..000000000
--- a/resources/js/applepayButtonBlockComponent.js
+++ /dev/null
@@ -1,194 +0,0 @@
-import {maybeShowButton} from './maybeShowApplePayButton.js';
-import {request} from "./applePayRequest";
-import {createAppleErrors} from "./applePayError";
-
-(
- function ({mollieApplePayBlockDataCart})
- {
- if (mollieApplePayBlockDataCart.length === 0 ) {
- return
- }
- const {product: {needShipping = true, subtotal}, shop: {countryCode, currencyCode = 'EUR', totalLabel = ''}, buttonMarkup, ajaxUrl} = mollieApplePayBlockDataCart
-
- const { registerPlugin } = wp.plugins;
- const { ExperimentalOrderMeta } = wc.blocksCheckout;
- const ApplePayButtonComponent = ( { cart, extensions } ) => {
- return
- }
- const MollieApplePayButtonCart = () => {
- return
-
-
- };
-
- registerPlugin( 'mollie-applepay-block-button', {
- render: () => {
- return ;
- },
- scope: 'woocommerce-checkout'
- } );
-
- setTimeout(function(){
- if(!maybeShowButton()){
- return
- }
- const nonce = document.getElementById("woocommerce-process-checkout-nonce").value
- let updatedContactInfo = []
- let selectedShippingMethod = []
- let redirectionUrl = ''
- let applePaySession = () => {
- const session = new ApplePaySession(3, request(countryCode, currencyCode, totalLabel, subtotal))
- session.begin()
- session.onshippingmethodselected = function (event) {
- jQuery.ajax({
- url: ajaxUrl,
- method: 'POST',
- data: {
- action: 'mollie_apple_pay_update_shipping_method',
- shippingMethod: event.shippingMethod,
- callerPage: 'cart',
- simplifiedContact: updatedContactInfo,
- 'woocommerce-process-checkout-nonce': nonce,
- },
- complete: (jqXHR, textStatus) => {
- },
- success: (applePayShippingMethodUpdate, textStatus, jqXHR) => {
- let response = applePayShippingMethodUpdate.data
- selectedShippingMethod = event.shippingMethod
- if (applePayShippingMethodUpdate.success === false) {
- response.errors = createAppleErrors(response.errors)
- }
- this.completeShippingMethodSelection(response)
- },
- error: (jqXHR, textStatus, errorThrown) => {
- console.warn(textStatus, errorThrown)
- session.abort()
- },
- })
- }
- session.onshippingcontactselected = function (event) {
- jQuery.ajax({
- url: ajaxUrl,
- method: 'POST',
- data: {
- action: 'mollie_apple_pay_update_shipping_contact',
- simplifiedContact: event.shippingContact,
- callerPage: 'cart',
- needShipping: needShipping,
- 'woocommerce-process-checkout-nonce': nonce,
- },
- complete: (jqXHR, textStatus) => {
- },
- success: (applePayShippingContactUpdate, textStatus, jqXHR) => {
- let response = applePayShippingContactUpdate.data
- updatedContactInfo = event.shippingContact
- if (applePayShippingContactUpdate.success === false) {
- response.errors = createAppleErrors(response.errors)
- }
- if (response.newShippingMethods) {
- selectedShippingMethod = response.newShippingMethods[0]
- }
- this.completeShippingContactSelection(response)
- },
- error: (jqXHR, textStatus, errorThrown) => {
- console.warn(textStatus, errorThrown)
- session.abort()
- },
- })
- }
- session.onvalidatemerchant = (applePayValidateMerchantEvent) => {
- jQuery.ajax({
- url: ajaxUrl,
- method: 'POST',
- data: {
- action: 'mollie_apple_pay_validation',
- validationUrl: applePayValidateMerchantEvent.validationURL,
- 'woocommerce-process-checkout-nonce': nonce,
- },
- complete: (jqXHR, textStatus) => {
- },
- success: (merchantSession, textStatus, jqXHR) => {
- if (merchantSession.success === true) {
- session.completeMerchantValidation(JSON.parse(merchantSession.data))
- } else {
- console.warn(merchantSession.data)
- session.abort()
- }
- },
- error: (jqXHR, textStatus, errorThrown) => {
- console.warn(textStatus, errorThrown)
- session.abort()
- },
- })
- }
- session.onpaymentauthorized = (ApplePayPayment) => {
- const {billingContact, shippingContact } = ApplePayPayment.payment
-
- jQuery.ajax({
- url: ajaxUrl,
- method: 'POST',
- data: {
- action: 'mollie_apple_pay_create_order_cart',
- shippingContact: ApplePayPayment.payment.shippingContact,
- billingContact: ApplePayPayment.payment.billingContact,
- token: ApplePayPayment.payment.token,
- shippingMethod: selectedShippingMethod,
- 'mollie-payments-for-woocommerce_issuer_applepay': 'applepay',
- 'woocommerce-process-checkout-nonce': nonce,
- 'billing_first_name': billingContact.givenName || '',
- 'billing_last_name': billingContact.familyName || '',
- 'billing_company': '',
- 'billing_country': billingContact.countryCode || '',
- 'billing_address_1': billingContact.addressLines[0] || '',
- 'billing_address_2': billingContact.addressLines[1] || '',
- 'billing_postcode': billingContact.postalCode || '',
- 'billing_city': billingContact.locality || '',
- 'billing_state': billingContact.administrativeArea || '',
- 'billing_phone': billingContact.phoneNumber || '000000000000',
- 'billing_email': shippingContact.emailAddress || '',
- 'shipping_first_name': shippingContact.givenName || '',
- 'shipping_last_name': shippingContact.familyName || '',
- 'shipping_company': '',
- 'shipping_country': shippingContact.countryCode || '',
- 'shipping_address_1': shippingContact.addressLines[0] || '',
- 'shipping_address_2': shippingContact.addressLines[1] || '',
- 'shipping_postcode': shippingContact.postalCode || '',
- 'shipping_city': shippingContact.locality || '',
- 'shipping_state': shippingContact.administrativeArea || '',
- 'shipping_phone': shippingContact.phoneNumber || '000000000000',
- 'shipping_email': shippingContact.emailAddress || '',
- 'order_comments' : '',
- 'payment_method' : 'mollie_wc_gateway_applepay',
- '_wp_http_referer' : '/?wc-ajax=update_order_review'
- },
- complete: (jqXHR, textStatus) => {
-
- },
- success: (authorizationResult, textStatus, jqXHR) => {
- let result = authorizationResult.data
- if (authorizationResult.success === true) {
- redirectionUrl = result['returnUrl'];
- session.completePayment(result['responseToApple'])
- window.location.href = redirectionUrl
- } else {
- result.errors = createAppleErrors(result.errors)
- session.completePayment(result)
- }
- },
- error: (jqXHR, textStatus, errorThrown) => {
- console.warn(textStatus, errorThrown)
- session.abort()
- },
- })
- }
- }
- document.querySelector('#mollie_applepay_button').addEventListener('click', (evt) => {
- applePaySession()
- })
- },2000);
-
- }
-)
-(
- window
-)
diff --git a/resources/js/blocks/ApplePayButtonComponent.js b/resources/js/blocks/ApplePayButtonComponent.js
new file mode 100644
index 000000000..47d481fa0
--- /dev/null
+++ b/resources/js/blocks/ApplePayButtonComponent.js
@@ -0,0 +1,174 @@
+import {request} from "../applePayRequest";
+import {createAppleErrors} from "../applePayError";
+
+export const ApplePayButtonComponent = ({cart, extensions}) => {
+ const mollieApplePayBlockDataCart = window.mollieApplePayBlockDataCart || window.mollieBlockData.mollieApplePayBlockDataCart
+ const nonce = document.getElementById("woocommerce-process-checkout-nonce").value
+ let updatedContactInfo = []
+ let selectedShippingMethod = []
+ let redirectionUrl = ''
+ const {
+ product: {needShipping = true, subtotal},
+ shop: {countryCode, currencyCode = 'EUR', totalLabel = ''},
+ ajaxUrl,
+ } = mollieApplePayBlockDataCart
+
+ let applePaySession = () => {
+ const session = new ApplePaySession(3, request(countryCode, currencyCode, totalLabel, subtotal))
+ console.log('ApplePaySession', session)
+ session.onshippingmethodselected = function (event) {
+ jQuery.ajax({
+ url: ajaxUrl,
+ method: 'POST',
+ data: {
+ action: 'mollie_apple_pay_update_shipping_method',
+ shippingMethod: event.shippingMethod,
+ callerPage: 'cart',
+ simplifiedContact: updatedContactInfo,
+ 'woocommerce-process-checkout-nonce': nonce,
+ },
+ complete: (jqXHR, textStatus) => {
+ },
+ success: (applePayShippingMethodUpdate, textStatus, jqXHR) => {
+ let response = applePayShippingMethodUpdate.data
+ selectedShippingMethod = event.shippingMethod
+ if (applePayShippingMethodUpdate.success === false) {
+ response.errors = createAppleErrors(response.errors)
+ }
+ this.completeShippingMethodSelection(response)
+ },
+ error: (jqXHR, textStatus, errorThrown) => {
+ console.warn(textStatus, errorThrown)
+ session.abort()
+ },
+ })
+ }
+ session.onshippingcontactselected = function (event) {
+ jQuery.ajax({
+ url: ajaxUrl,
+ method: 'POST',
+ data: {
+ action: 'mollie_apple_pay_update_shipping_contact',
+ simplifiedContact: event.shippingContact,
+ callerPage: 'cart',
+ needShipping: needShipping,
+ 'woocommerce-process-checkout-nonce': nonce,
+ },
+ complete: (jqXHR, textStatus) => {
+ },
+ success: (applePayShippingContactUpdate, textStatus, jqXHR) => {
+ let response = applePayShippingContactUpdate.data
+ updatedContactInfo = event.shippingContact
+ if (applePayShippingContactUpdate.success === false) {
+ response.errors = createAppleErrors(response.errors)
+ }
+ if (response.newShippingMethods) {
+ selectedShippingMethod = response.newShippingMethods[0]
+ }
+ this.completeShippingContactSelection(response)
+ },
+ error: (jqXHR, textStatus, errorThrown) => {
+ console.warn(textStatus, errorThrown)
+ session.abort()
+ },
+ })
+ }
+ session.onvalidatemerchant = (applePayValidateMerchantEvent) => {
+ jQuery.ajax({
+ url: ajaxUrl,
+ method: 'POST',
+ data: {
+ action: 'mollie_apple_pay_validation',
+ validationUrl: applePayValidateMerchantEvent.validationURL,
+ 'woocommerce-process-checkout-nonce': nonce,
+ },
+ complete: (jqXHR, textStatus) => {
+ },
+ success: (merchantSession, textStatus, jqXHR) => {
+ if (merchantSession.success === true) {
+ session.completeMerchantValidation(JSON.parse(merchantSession.data))
+ } else {
+ console.warn(merchantSession.data)
+ session.abort()
+ }
+ },
+ error: (jqXHR, textStatus, errorThrown) => {
+ console.warn(textStatus, errorThrown)
+ session.abort()
+ },
+ })
+ }
+ session.onpaymentauthorized = (ApplePayPayment) => {
+ const {billingContact, shippingContact} = ApplePayPayment.payment
+
+ jQuery.ajax({
+ url: ajaxUrl,
+ method: 'POST',
+ data: {
+ action: 'mollie_apple_pay_create_order_cart',
+ shippingContact: ApplePayPayment.payment.shippingContact,
+ billingContact: ApplePayPayment.payment.billingContact,
+ token: ApplePayPayment.payment.token,
+ shippingMethod: selectedShippingMethod,
+ 'mollie-payments-for-woocommerce_issuer_applepay': 'applepay',
+ 'woocommerce-process-checkout-nonce': nonce,
+ 'billing_first_name': billingContact.givenName || '',
+ 'billing_last_name': billingContact.familyName || '',
+ 'billing_company': '',
+ 'billing_country': billingContact.countryCode || '',
+ 'billing_address_1': billingContact.addressLines[0] || '',
+ 'billing_address_2': billingContact.addressLines[1] || '',
+ 'billing_postcode': billingContact.postalCode || '',
+ 'billing_city': billingContact.locality || '',
+ 'billing_state': billingContact.administrativeArea || '',
+ 'billing_phone': billingContact.phoneNumber || '000000000000',
+ 'billing_email': shippingContact.emailAddress || '',
+ 'shipping_first_name': shippingContact.givenName || '',
+ 'shipping_last_name': shippingContact.familyName || '',
+ 'shipping_company': '',
+ 'shipping_country': shippingContact.countryCode || '',
+ 'shipping_address_1': shippingContact.addressLines[0] || '',
+ 'shipping_address_2': shippingContact.addressLines[1] || '',
+ 'shipping_postcode': shippingContact.postalCode || '',
+ 'shipping_city': shippingContact.locality || '',
+ 'shipping_state': shippingContact.administrativeArea || '',
+ 'shipping_phone': shippingContact.phoneNumber || '000000000000',
+ 'shipping_email': shippingContact.emailAddress || '',
+ 'order_comments': '',
+ 'payment_method': 'mollie_wc_gateway_applepay',
+ '_wp_http_referer': '/?wc-ajax=update_order_review'
+ },
+ complete: (jqXHR, textStatus) => {
+
+ },
+ success: (authorizationResult, textStatus, jqXHR) => {
+ let result = authorizationResult.data
+ if (authorizationResult.success === true) {
+ redirectionUrl = result['returnUrl'];
+ session.completePayment(result['responseToApple'])
+ window.location.href = redirectionUrl
+ } else {
+ result.errors = createAppleErrors(result.errors)
+ session.completePayment(result)
+ }
+ },
+ error: (jqXHR, textStatus, errorThrown) => {
+ console.warn(textStatus, errorThrown)
+ session.abort()
+ },
+ })
+ }
+ session.begin()
+ }
+
+ return (
+
+ );
+}
+
+export default ApplePayButtonComponent;
diff --git a/resources/js/mollieBlockIndex.js b/resources/js/mollieBlockIndex.js
index 04c6d367b..3109b690b 100644
--- a/resources/js/mollieBlockIndex.js
+++ b/resources/js/mollieBlockIndex.js
@@ -1,10 +1,12 @@
import molliePaymentMethod from './blocks/molliePaymentMethod'
+import ApplePayButtonComponent from './blocks/ApplePayButtonComponent'
(
function ({ mollieBlockData, wc, _, jQuery}) {
if (_.isEmpty(mollieBlockData)) {
return;
}
+
window.onload = (event) => {
const { registerPaymentMethod } = wc.wcBlocksRegistry;
const { checkoutData, defaultFields } = wc.wcSettings.allSettings;
@@ -49,6 +51,19 @@ import molliePaymentMethod from './blocks/molliePaymentMethod'
if (item.name === 'mollie_wc_gateway_applepay' && !isBlockEditor) {
if ((isAppleSession && window.ApplePaySession.canMakePayments())) {
register();
+ const {registerExpressPaymentMethod} = wc.wcBlocksRegistry;
+ registerExpressPaymentMethod({
+ name: 'mollie_wc_gateway_applepay_express',
+ content: ,
+ edit: ,
+ ariaLabel: 'Apple Pay',
+ canMakePayment: () => true,
+ paymentMethodId: 'mollie_wc_gateway_applepay',
+ supports: {
+ features: ['products'],
+ },
+ })
+
}
return;
}
diff --git a/resources/scss/mollie-applepaydirect.scss b/resources/scss/mollie-applepaydirect.scss
index 0cb757d88..3e76c6900 100644
--- a/resources/scss/mollie-applepaydirect.scss
+++ b/resources/scss/mollie-applepaydirect.scss
@@ -3,6 +3,8 @@
}
.apple-pay-button {
display: inline-block;
+ width: 100%;
+ height: 41px;
-webkit-appearance: -apple-pay-button;
-apple-pay-button-type: checkout; /* also: check-out, book, or subscribe */
}
diff --git a/src/Assets/AssetsModule.php b/src/Assets/AssetsModule.php
index eeb8cd882..7ef945631 100644
--- a/src/Assets/AssetsModule.php
+++ b/src/Assets/AssetsModule.php
@@ -74,13 +74,13 @@ public function registerButtonsBlockScripts(string $pluginUrl, string $pluginPat
'mollie_applepayButtonBlock',
$this->getPluginUrl(
$pluginUrl,
- '/public/js/applepayButtonBlockComponent.min.js'
+ '/public/js/applepayButtonBlock.min.js'
),
[],
(string) filemtime(
$this->getPluginPath(
$pluginPath,
- '/public/js/applepayButtonBlockComponent.min.js'
+ '/public/js/applepayButtonBlock.min.js'
)
),
true
diff --git a/src/Assets/MollieCheckoutBlocksSupport.php b/src/Assets/MollieCheckoutBlocksSupport.php
index 450f6b76f..33ace20de 100644
--- a/src/Assets/MollieCheckoutBlocksSupport.php
+++ b/src/Assets/MollieCheckoutBlocksSupport.php
@@ -64,12 +64,13 @@ public function get_payment_method_script_handles(): array
public static function localizeWCBlocksData($dataService, $gatewayInstances)
{
-
+ wp_enqueue_style('mollie-applepaydirect');
wp_localize_script(
self::$scriptHandle,
'mollieBlockData',
[
'gatewayData' => self::gatewayDataForWCBlocks($dataService, $gatewayInstances),
+ 'mollieApplePayBlockDataCart' => $dataService->mollieApplePayBlockDataCart(),
]
);
}
diff --git a/src/Buttons/ApplePayButton/DataToAppleButtonScripts.php b/src/Buttons/ApplePayButton/DataToAppleButtonScripts.php
index b6e551b25..fd10bf22f 100644
--- a/src/Buttons/ApplePayButton/DataToAppleButtonScripts.php
+++ b/src/Buttons/ApplePayButton/DataToAppleButtonScripts.php
@@ -14,6 +14,9 @@ class DataToAppleButtonScripts
*/
public function applePayScriptData(bool $isBlock = false): array
{
+ if(is_admin()) {
+ return [];
+ }
$base_location = wc_get_base_location();
$shopCountryCode = $base_location['country'];
$currencyCode = get_woocommerce_currency();
diff --git a/src/Shared/Data.php b/src/Shared/Data.php
index 54230c6db..34daa67a1 100644
--- a/src/Shared/Data.php
+++ b/src/Shared/Data.php
@@ -7,6 +7,7 @@
use Exception;
use InvalidArgumentException;
use Mollie\Api\Resources\Method;
+use Mollie\WooCommerce\Buttons\ApplePayButton\DataToAppleButtonScripts;
use Mollie\WooCommerce\SDK\Api;
use Mollie\WooCommerce\Settings\Settings;
use Psr\Log\LoggerInterface as Logger;
@@ -786,4 +787,9 @@ protected function addRecurringPaymentMethods($apiKey, bool $testMode, bool $use
}
return $result;
}
+
+ public function mollieApplePayBlockDataCart() {
+ $dataToScripts = new DataToAppleButtonScripts();
+ return $dataToScripts->applePayScriptData(true);
+ }
}
diff --git a/webpack.config.js b/webpack.config.js
index fbd545086..08b7b5714 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -29,7 +29,7 @@ function configJavaScript ({ basePath })
.addEntry('mollie-components-blocks.min', './resources/js/mollie-components-blocks.js')
.addEntry('mollieBlockIndex.min', './resources/js/mollieBlockIndex.js')
.addEntry('paypalButtonBlockComponent.min', './resources/js/paypalButtonBlockComponent.js')
- .addEntry('applepayButtonBlockComponent.min', './resources/js/applepayButtonBlockComponent.js')
+ .addEntry('applepayButtonBlock.min', './resources/js/applepayButtonBlock.js')
.addEntry('rivertyCountryPlaceholder.min', './resources/js/rivertyCountryPlaceholder.js')
.enableSourceMaps(!Encore.isProduction())