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:
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); } }