mirror of
https://github.com/woocommerce/woocommerce-paypal-payments.git
synced 2025-09-05 08:59:14 +08:00
✨ Add preview button for Apple Pay on ACDC
Note: `phpcbf` adjusted whitespace in extensions.php
This commit is contained in:
Philipp Stracker
parent
a01f1ea77f
commit
da64ffbac5
2 changed files with 171 additions and 43 deletions
|
|
@ -20,6 +20,9 @@ use WooCommerce\PayPalCommerce\WcGateway\Settings\Settings;
|
|||
return array(
|
||||
'wcgateway.settings.fields' => function ( ContainerInterface $container, array $fields ): array {
|
||||
|
||||
// Used in various places to mark fields for the preview button.
|
||||
$apm_name = 'ApplePay';
|
||||
|
||||
// Eligibility check.
|
||||
if ( ! $container->has( 'applepay.eligible' ) || ! $container->get( 'applepay.eligible' ) ) {
|
||||
return $fields;
|
||||
|
|
@ -183,6 +186,7 @@ return array(
|
|||
->action_visible( 'applepay_button_type' )
|
||||
->action_visible( 'applepay_button_language' )
|
||||
->action_visible( 'applepay_checkout_data_mode' )
|
||||
->action_visible( 'applepay_button_preview' )
|
||||
->action_class( 'applepay_button_enabled', 'active' )
|
||||
->to_array(),
|
||||
)
|
||||
|
|
@ -253,56 +257,68 @@ return array(
|
|||
'requirements' => array(),
|
||||
),
|
||||
'applepay_button_type' => array(
|
||||
'title' => __( 'Button Label', 'woocommerce-paypal-payments' ),
|
||||
'type' => 'select',
|
||||
'desc_tip' => true,
|
||||
'description' => __(
|
||||
'title' => __( 'Button Label', 'woocommerce-paypal-payments' ),
|
||||
'type' => 'select',
|
||||
'desc_tip' => true,
|
||||
'description' => __(
|
||||
'This controls the label of the Apple Pay button.',
|
||||
'woocommerce-paypal-payments'
|
||||
),
|
||||
'classes' => array( 'ppcp-field-indent' ),
|
||||
'class' => array(),
|
||||
'input_class' => array( 'wc-enhanced-select' ),
|
||||
'default' => 'pay',
|
||||
'options' => PropertiesDictionary::button_types(),
|
||||
'screens' => array( State::STATE_ONBOARDED ),
|
||||
'gateway' => 'dcc',
|
||||
'requirements' => array(),
|
||||
'classes' => array( 'ppcp-field-indent' ),
|
||||
'class' => array(),
|
||||
'input_class' => array( 'wc-enhanced-select' ),
|
||||
'default' => 'pay',
|
||||
'options' => PropertiesDictionary::button_types(),
|
||||
'screens' => array( State::STATE_ONBOARDED ),
|
||||
'gateway' => 'dcc',
|
||||
'requirements' => array(),
|
||||
'custom_attributes' => array(
|
||||
'data-ppcp-apm-name' => $apm_name,
|
||||
'data-ppcp-field-name' => 'type',
|
||||
),
|
||||
),
|
||||
'applepay_button_color' => array(
|
||||
'title' => __( 'Button Color', 'woocommerce-paypal-payments' ),
|
||||
'type' => 'select',
|
||||
'desc_tip' => true,
|
||||
'description' => __(
|
||||
'title' => __( 'Button Color', 'woocommerce-paypal-payments' ),
|
||||
'type' => 'select',
|
||||
'desc_tip' => true,
|
||||
'description' => __(
|
||||
'The Apple Pay Button may appear as a black button with white lettering, white button with black lettering, or a white button with black lettering and a black outline.',
|
||||
'woocommerce-paypal-payments'
|
||||
),
|
||||
'label' => '',
|
||||
'input_class' => array( 'wc-enhanced-select' ),
|
||||
'classes' => array( 'ppcp-field-indent' ),
|
||||
'class' => array(),
|
||||
'default' => 'black',
|
||||
'options' => PropertiesDictionary::button_colors(),
|
||||
'screens' => array( State::STATE_ONBOARDED ),
|
||||
'gateway' => 'dcc',
|
||||
'requirements' => array(),
|
||||
'label' => '',
|
||||
'input_class' => array( 'wc-enhanced-select' ),
|
||||
'classes' => array( 'ppcp-field-indent' ),
|
||||
'class' => array(),
|
||||
'default' => 'black',
|
||||
'options' => PropertiesDictionary::button_colors(),
|
||||
'screens' => array( State::STATE_ONBOARDED ),
|
||||
'gateway' => 'dcc',
|
||||
'requirements' => array(),
|
||||
'custom_attributes' => array(
|
||||
'data-ppcp-apm-name' => $apm_name,
|
||||
'data-ppcp-field-name' => 'color',
|
||||
),
|
||||
),
|
||||
'applepay_button_language' => array(
|
||||
'title' => __( 'Button Language', 'woocommerce-paypal-payments' ),
|
||||
'type' => 'select',
|
||||
'desc_tip' => true,
|
||||
'description' => __(
|
||||
'title' => __( 'Button Language', 'woocommerce-paypal-payments' ),
|
||||
'type' => 'select',
|
||||
'desc_tip' => true,
|
||||
'description' => __(
|
||||
'The language and region used for the displayed Apple Pay button. The default value is the current language and region setting in a browser.',
|
||||
'woocommerce-paypal-payments'
|
||||
),
|
||||
'classes' => array( 'ppcp-field-indent' ),
|
||||
'class' => array(),
|
||||
'input_class' => array( 'wc-enhanced-select' ),
|
||||
'default' => 'en',
|
||||
'options' => PropertiesDictionary::button_languages(),
|
||||
'screens' => array( State::STATE_ONBOARDED ),
|
||||
'gateway' => 'dcc',
|
||||
'requirements' => array(),
|
||||
'classes' => array( 'ppcp-field-indent' ),
|
||||
'class' => array(),
|
||||
'input_class' => array( 'wc-enhanced-select' ),
|
||||
'default' => 'en',
|
||||
'options' => PropertiesDictionary::button_languages(),
|
||||
'screens' => array( State::STATE_ONBOARDED ),
|
||||
'gateway' => 'dcc',
|
||||
'requirements' => array(),
|
||||
'custom_attributes' => array(
|
||||
'data-ppcp-apm-name' => $apm_name,
|
||||
'data-ppcp-field-name' => 'language',
|
||||
),
|
||||
),
|
||||
'applepay_checkout_data_mode' => array(
|
||||
'title' => __( 'Send checkout billing and shipping data to Apple Pay', 'woocommerce-paypal-payments' ),
|
||||
|
|
@ -318,6 +334,22 @@ return array(
|
|||
'gateway' => 'dcc',
|
||||
'requirements' => array(),
|
||||
),
|
||||
'applepay_button_preview' => array(
|
||||
'type' => 'ppcp-text',
|
||||
'text' => sprintf(
|
||||
'
|
||||
<div class="ppcp-preview ppcp-button-preview" data-ppcp-apm-preview="%1$s">
|
||||
<h4>' . __( 'Button Styling Preview', 'woocommerce-paypal-payments' ) . '</h4>
|
||||
<div id="ppcp%1$sButtonPreview" class="ppcp-button-preview-inner"></div>
|
||||
</div>',
|
||||
$apm_name
|
||||
),
|
||||
'screens' => array(
|
||||
State::STATE_ONBOARDED,
|
||||
),
|
||||
'requirements' => array(),
|
||||
'gateway' => 'dcc',
|
||||
),
|
||||
)
|
||||
);
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,7 +1,107 @@
|
|||
import {loadCustomScript} from "@paypal/paypal-js";
|
||||
import ApplepayButton from "./ApplepayButton";
|
||||
import widgetBuilder from "../../../ppcp-button/resources/js/modules/Renderer/WidgetBuilder";
|
||||
import PreviewButton from "../../../ppcp-button/resources/js/modules/Renderer/PreviewButton";
|
||||
import PreviewButtonManager from "../../../ppcp-button/resources/js/modules/Renderer/PreviewButtonManager";
|
||||
|
||||
/**
|
||||
* Accessor that creates and returns a single PreviewButtonManager instance.
|
||||
*/
|
||||
const buttonManager = () => {
|
||||
if (!ApplePayPreviewButtonManager.instance) {
|
||||
ApplePayPreviewButtonManager.instance = new ApplePayPreviewButtonManager();
|
||||
}
|
||||
|
||||
return ApplePayPreviewButtonManager.instance;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Manages all Apple Pay preview buttons on this page.
|
||||
*/
|
||||
class ApplePayPreviewButtonManager extends PreviewButtonManager {
|
||||
constructor() {
|
||||
const defaultButton = {
|
||||
type: 'pay',
|
||||
color: 'black',
|
||||
lang: 'en'
|
||||
};
|
||||
|
||||
const args = {
|
||||
methodName: 'ApplePay',
|
||||
buttonConfig: window.wc_ppcp_applepay_admin,
|
||||
widgetBuilder,
|
||||
defaultAttributes: {button: defaultButton}
|
||||
};
|
||||
|
||||
super(args);
|
||||
}
|
||||
|
||||
/**
|
||||
* Responsible for fetching and returning the PayPal configuration object for this payment
|
||||
* method.
|
||||
*
|
||||
* @return {Promise<{}>}
|
||||
*/
|
||||
async fetchConfig() {
|
||||
const apiMethod = this.widgetBuilder?.paypal?.Applepay()?.config
|
||||
|
||||
if (!apiMethod) {
|
||||
this.error('configuration object cannot be retrieved from PayPal');
|
||||
return {};
|
||||
}
|
||||
|
||||
return await apiMethod();
|
||||
}
|
||||
|
||||
/**
|
||||
* This method is responsible for creating a new PreviewButton instance and returning it.
|
||||
*
|
||||
* @param {string} wrapperId - CSS ID of the wrapper element.
|
||||
* @return {ApplePayPreviewButton}
|
||||
*/
|
||||
createButtonInst(wrapperId) {
|
||||
return new ApplePayPreviewButton({
|
||||
selector: wrapperId,
|
||||
configResponse: this.configResponse,
|
||||
defaultAttributes: this.defaultAttributes
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* A single Apple Pay preview button instance.
|
||||
*/
|
||||
class ApplePayPreviewButton extends PreviewButton {
|
||||
constructor(args) {
|
||||
super(args);
|
||||
|
||||
this.selector = `${args.selector}ApplePay`
|
||||
}
|
||||
|
||||
createNewWrapper() {
|
||||
const element = super.createNewWrapper();
|
||||
element.addClass('ppcp-button-applepay');
|
||||
|
||||
return element;
|
||||
}
|
||||
|
||||
createButton() {
|
||||
const button = new ApplepayButton(
|
||||
'preview',
|
||||
null,
|
||||
this.buttonConfig,
|
||||
this.ppcpConfig,
|
||||
);
|
||||
|
||||
button.init(this.configResponse);
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize the preview button manager.
|
||||
buttonManager();
|
||||
|
||||
/*
|
||||
(function ({
|
||||
buttonConfig,
|
||||
jQuery
|
||||
|
|
@ -46,11 +146,6 @@ import widgetBuilder from "../../../ppcp-button/resources/js/modules/Renderer/Wi
|
|||
}, 100);
|
||||
});
|
||||
|
||||
/**
|
||||
* Decides, whether to display the Apple Pay preview button.
|
||||
*
|
||||
* @return {boolean}
|
||||
*/
|
||||
const shouldDisplayPreviewButton = function () {
|
||||
// TODO - original condition, which is wrong.
|
||||
return jQuery('#ppcp-applepay_button_enabled').is(':checked');
|
||||
|
|
@ -156,3 +251,4 @@ import widgetBuilder from "../../../ppcp-button/resources/js/modules/Renderer/Wi
|
|||
buttonConfig: window.wc_ppcp_applepay_admin,
|
||||
jQuery: window.jQuery
|
||||
});
|
||||
*/
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue
