diff --git a/resources/js/applepayButtonBlock.js b/resources/js/applepayButtonBlock.js index 058da50c..251dc499 100644 --- a/resources/js/applepayButtonBlock.js +++ b/resources/js/applepayButtonBlock.js @@ -1,4 +1,5 @@ import {ApplePayButtonComponent} from "./blocks/ApplePayButtonComponent"; +import {ApplePayButtonEditorComponent} from "./blocks/ApplePayButtonEditorComponent"; ( function ({mollieApplePayBlockDataCart}) { @@ -15,7 +16,7 @@ import {ApplePayButtonComponent} from "./blocks/ApplePayButtonComponent"; registerExpressPaymentMethod({ name: 'mollie_wc_gateway_applepay_express', content: < ApplePayButtonComponent/>, - edit: < ApplePayButtonComponent/>, + edit: < ApplePayButtonEditorComponent/>, ariaLabel: 'Apple Pay', canMakePayment: () => true, paymentMethodId: 'mollie_wc_gateway_applepay', diff --git a/resources/js/blocks/ApplePayButtonComponent.js b/resources/js/blocks/ApplePayButtonComponent.js index d712477c..ea202065 100644 --- a/resources/js/blocks/ApplePayButtonComponent.js +++ b/resources/js/blocks/ApplePayButtonComponent.js @@ -1,7 +1,7 @@ import {request} from "../applePayRequest"; import {createAppleErrors} from "../applePayError"; -export const ApplePayButtonComponent = ({cart, extensions}) => { +export const ApplePayButtonComponent = ({ buttonAttributes = {} }) => { const mollieApplePayBlockDataCart = window.mollieApplePayBlockDataCart || window.mollieBlockData.mollieApplePayBlockDataCart const nonce = document.getElementById("woocommerce-process-checkout-nonce").value let updatedContactInfo = [] @@ -11,6 +11,10 @@ export const ApplePayButtonComponent = ({cart, extensions}) => { shop: {countryCode, currencyCode = 'EUR', totalLabel = ''}, ajaxUrl, } = mollieApplePayBlockDataCart + const style = { + height: `${buttonAttributes.height || 48}px`, + borderRadius: `${buttonAttributes.borderRadius || 4}px` + } const findSelectedShippingMethod = (shippingRates) => { let shippingRate = shippingRates.find((shippingMethod) => shippingMethod.selected === true) @@ -177,6 +181,7 @@ export const ApplePayButtonComponent = ({cart, extensions}) => { event.preventDefault(); applePaySession(); }} + style={style} > ); diff --git a/resources/js/blocks/ApplePayButtonEditorComponent.js b/resources/js/blocks/ApplePayButtonEditorComponent.js new file mode 100644 index 00000000..d7c20cc6 --- /dev/null +++ b/resources/js/blocks/ApplePayButtonEditorComponent.js @@ -0,0 +1,16 @@ +export const ApplePayButtonEditorComponent = ({ buttonAttributes = {} }) => { + const style = { + height: `${buttonAttributes.height || 48}px`, + borderRadius: `${buttonAttributes.borderRadius || 4}px` + } + + return ( + + ); +}; +export default ApplePayButtonEditorComponent; diff --git a/resources/js/mollieBlockIndex.js b/resources/js/mollieBlockIndex.js index fdfaa014..f6b8fd47 100644 --- a/resources/js/mollieBlockIndex.js +++ b/resources/js/mollieBlockIndex.js @@ -1,5 +1,6 @@ import molliePaymentMethod from './blocks/molliePaymentMethod' import ApplePayButtonComponent from './blocks/ApplePayButtonComponent' +import ApplePayButtonEditorComponent from './blocks/ApplePayButtonEditorComponent' ( function ({ mollieBlockData, wc, _, jQuery}) { @@ -48,8 +49,8 @@ import ApplePayButtonComponent from './blocks/ApplePayButtonComponent' } gatewayData.forEach(item => { let register = () => registerPaymentMethod(molliePaymentMethod(useEffect, ajaxUrl, filters, gatewayData, availableGateways, item, jQuery, requiredFields, isCompanyFieldVisible, isPhoneFieldVisible)); - if (item.name === 'mollie_wc_gateway_applepay' && !isBlockEditor) { - const {isExpressEnabled} = item; + if (item.name === 'mollie_wc_gateway_applepay') { + const {isExpressEnabled} = item; if ((isAppleSession && window.ApplePaySession.canMakePayments())) { register(); if (isExpressEnabled !== true) { @@ -58,13 +59,17 @@ import ApplePayButtonComponent from './blocks/ApplePayButtonComponent' const {registerExpressPaymentMethod} = wc.wcBlocksRegistry; registerExpressPaymentMethod({ name: 'mollie_wc_gateway_applepay_express', + title: 'Apple Pay Express button', + description: 'Apple Pay Express button', content: , - edit: , + edit: , ariaLabel: 'Apple Pay', canMakePayment: () => true, paymentMethodId: 'mollie_wc_gateway_applepay', + gatewayId: 'mollie_wc_gateway_applepay', supports: { features: ['products'], + style: ['height', 'borderRadius'] }, }) } diff --git a/resources/scss/mollie-applepaydirect.scss b/resources/scss/mollie-applepaydirect.scss index 07e9ae8f..4ede89a7 100644 --- a/resources/scss/mollie-applepaydirect.scss +++ b/resources/scss/mollie-applepaydirect.scss @@ -8,30 +8,6 @@ -apple-pay-button-type: checkout; /* also: check-out, book, or subscribe */ } -@media (max-width: 480px) { - .apple-pay-button { - height: 41px; - min-height: 40px; - max-height: 47px; - } -} - -@media (min-width: 481px) and (max-width: 1024px) { - .apple-pay-button { - height: 48px; - min-height: 48px; - max-height: 55px; - } -} - -@media (min-width: 1025px) { - .apple-pay-button { - height: 56px; - min-height: 56px; - max-height: 64px; - } -} - .apple-pay-button-black { -apple-pay-button-style: black; } diff --git a/src/PaymentMethods/Applepay.php b/src/PaymentMethods/Applepay.php index 226993aa..9b392b5b 100644 --- a/src/PaymentMethods/Applepay.php +++ b/src/PaymentMethods/Applepay.php @@ -30,6 +30,25 @@ protected function getConfig(): array public function getFormFields($generalFormFields): array { + + $checkout_page_id = wc_get_page_id('checkout'); + $edit_checkout_page_link = get_edit_post_link($checkout_page_id); + + $notice = [ + 'notice' => [ + 'title' => sprintf( + /* translators: Placeholder 1: link url */ + __( + '

The appearance of the Apple Pay button can be controlled in the Checkout page editor.

', + 'mollie-payments-for-woocommerce' + ), + esc_url($edit_checkout_page_link) + ), + 'type' => 'title', + 'class' => 'notice notice-warning', + 'css' => 'padding:20px;', + ], + ]; $paymentMethodFormFieds = [ 'mollie_apple_pay_button_enabled_cart' => [ 'title' => __('Enable Apple Pay Button on Cart page', 'mollie-payments-for-woocommerce'), @@ -56,6 +75,6 @@ public function getFormFields($generalFormFields): array 'default' => 'no', ], ]; - return array_merge($generalFormFields, $paymentMethodFormFieds); + return array_merge($notice, $generalFormFields, $paymentMethodFormFieds); } }