如何将自定义支付网关与 WooCommerce Checkout 区块集成

2024-02-2312:37:22后端程序开发Comments388 views字数 5779阅读模式

最新版本的 WooCommerce（我猜是从 8.3 开始）中，您可能会注意到您的自定义付款方式在结账区块中不可用。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/61045.html

例如，如果您尝试停用商店中除自定义付款方式之外的所有付款方式，您可能会收到如下错误消息：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/61045.html

如何将自定义支付网关与 WooCommerce Checkout 区块集成 — 这里我使用 Storefront 主题作为示例，但任何 WordPress 主题都会出现相同的错误消息。

但可以肯定的是，当您使用旧的[woocommerce_checkout]简码时，一切都运行良好。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/61045.html

是的，之前发布的支付网关教程似乎不再完整，但我们今天将通过这个额外的教程来更改它，我将逐步指导您应该做什么，以添加自定义的兼容性WooCommerce 购物车和结帐块的 WooCommerce 付款方式。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/61045.html

这就是我们在本教程结束时要实现的目标：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/61045.html

当然，我还会向您展示一些巧妙的额外内容，例如为您的付款方式添加自定义图标。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/61045.html

服务器端集成

首先，让我们从服务器端集成开始，我很确定你们中的许多人都觉得使用 PHP 开发比 JavaScript + React 更舒服，所以让我们从简单的事情开始。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/61045.html

注册一个块支持 PHP 类

“区块支持PHP类”是除主要支付网关类之外的PHP类。我们将使用下面的简单代码片段来注册它，这与我们在 woocommerce_payment_gateways hook 中注册主网关类时所做的类似。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/61045.html

add_action( 'woocommerce_blocks_loaded', 'rudr_gateway_block_support' );
function rudr_gateway_block_support() {
// if( ! class_exists( 'Automattic\WooCommerce\Blocks\Payments\Integrations\AbstractPaymentMethodType' ) ) {
// return;
// }
// 在这里引入 "gateway block support class" 文件
require_once __DIR__ . '/includes/class-wc-misha-gateway-blocks-support.php';
// 注册我们刚才引入的 PHP 类
add_action(
'woocommerce_blocks_payment_method_type_registration',
function( Automattic\WooCommerce\Blocks\Payments\PaymentMethodRegistry $payment_method_registry ) {
$payment_method_registry->register( new WC_Misha_Gateway_Blocks_Support );
}
);
}

请记住以下几点：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/61045.html

我注销了class_exists()条件，因为我们不再需要它，因为结账块现在是 WooCommerce 的一部分，而不是独立的插件。
我们的块支持 PHP 类本身将位于一个单独的文件中，我们将在下一步中class-wc-misha-gateway-blocks-support.php查看它。

块支持 PHP 类

在这一部分中，我将创建一个WC_Misha_Gateway_Blocks_Support PHP 类来扩展 WooCommerce 的 AbstractPaymentMethodType 类。同时不要忘记我们已经有了扩展 WC_Payment_Gateway 的WC_Misha_Gateway 类。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/61045.html

就我而言，我将其放入includes/class-wc-misha-gateway-blocks-support.php.文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/61045.html

<?php
use Automattic\WooCommerce\Blocks\Payments\Integrations\AbstractPaymentMethodType;
final class WC_Misha_Gateway_Blocks_Support extends AbstractPaymentMethodType {
private $gateway;
protected $name = 'misha'; // payment gateway id
public function initialize() {
// get payment gateway settings
$this->settings = get_option( "woocommerce_{$this->name}_settings", array() );
// you can also initialize your payment gateway here
// $gateways = WC()->payment_gateways->payment_gateways();
// $this->gateway = $gateways[ $this->name ];
}
public function is_active() {
return ! empty( $this->settings[ 'enabled' ] ) && 'yes' === $this->settings[ 'enabled' ];
}
public function get_payment_method_script_handles() {
wp_register_script(
'wc-misha-blocks-integration',
plugin_dir_url( __DIR__ ) . 'build/index.js',
array(
'wc-blocks-registry',
'wc-settings',
'wp-element',
'wp-html-entities',
),
null, // or time() or filemtime( ... ) to skip caching
true
);
return array( 'wc-misha-blocks-integration' );
}
public function get_payment_method_data() {
return array(
'title' => $this->get_setting( 'title' ),
// almost the same way:
// 'title' => isset( $this->settings[ 'title' ] ) ? $this->settings[ 'title' ] : 'Default value';
'description' => $this->get_setting( 'description' ),
// if $this->gateway was initialized on line 15
// 'supports' => array_filter( $this->gateway->supports, [ $this->gateway, 'supports' ] ),
// example of getting a public key
// 'publicKey' => $this->get_publishable_key(),
);
}
//private function get_publishable_key() {
// $test_mode = ( ! empty( $this->settings[ 'testmode' ] ) && 'yes' === $this->settings[ 'testmode' ] );
// $setting_key = $test_mode ? 'test_publishable_key' : 'publishable_key';
// return ! empty( $this->settings[ $setting_key ] ) ? $this->settings[ $setting_key ] : '';
//}
}

首先让我们看一下类的属性和方法。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/61045.html

属性：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/61045.html

$name– 这是此步骤中的支付网关 ID 。
$gateway– 我们可以在这里存储支付网关对象的实例，但这不是必需的，所以我在代码中注释了这部分。

方法：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/61045.html

is_active(),
get_payment_method_script_handles()– 这是我们包含 JavaScript 文件的地方，其中包含集成的客户端部分。
get_payment_method_data()– 提供您将在前端作为关联数组使用的所有必要数据。

您还可以使用index.asset.php来获取脚本版本和依赖项。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/61045.html

public function get_payment_method_script_handles() {
$asset_path = plugin_dir_path( __DIR__ ) . 'build/index.asset.php';
$version = null;
$dependencies = array();
if( file_exists( $asset_path ) ) {
$asset = require $asset_path;
$version = isset( $asset[ 'version' ] ) ? $asset[ 'version' ] : $version;
$dependencies = isset( $asset[ 'dependencies' ] ) ? $asset[ 'dependencies' ] : $dependencies;
}
wp_register_script(
'wc-misha-blocks-integration',
plugin_dir_url( __DIR__ ) . 'build/index.js',
$dependencies,
$version,
true
);
return array( 'wc-misha-blocks-integration' );
}

声明兼容性

当您想让用户知道您的付款方式与 WooCommerce Checkout 块不兼容时，此部分通常很有用。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/61045.html

当用户尝试编辑古腾堡中的结账页面时，他们将收到通知：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/61045.html

方法如下：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/61045.html

add_action( 'before_woocommerce_init', 'rudr_cart_checkout_blocks_compatibility' );
function rudr_cart_checkout_blocks_compatibility() {
if( class_exists( '\Automattic\WooCommerce\Utilities\FeaturesUtil' ) ) {
\Automattic\WooCommerce\Utilities\FeaturesUtil::declare_compatibility(
'cart_checkout_blocks',
__FILE__,
false // true (compatible, default) or false (not compatible)
);
}
}

客户端集成

设置项目

再次强调，我希望本教程中的内容保持超级简单，因此我将使用@wordpress/scripts即可。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/61045.html

在我们的构建中，您肯定可以进一步配置 WooCommerce 混合构建，这样您就可以使用import { registerPaymentMethod } from ....文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/61045.html

这就是我的文件夹结构的样子：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/61045.html

为 WooCommerce Checkout 区块注册自定义付款方式

以下是/src/index.js文件，以防您有疑问。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/61045.html

import { decodeEntities } from '@wordpress/html-entities';
const { registerPaymentMethod } = window.wc.wcBlocksRegistry
const { getSetting } = window.wc.wcSettings
const settings = getSetting( 'misha_data', {} )
const label = decodeEntities( settings.title )
const Content = () => {
return decodeEntities( settings.description || '' )
}
const Label = ( props ) => {
const { PaymentMethodLabel } = props.components
return <PaymentMethodLabel text={ label } />
}
registerPaymentMethod( {
name: "misha",
label: <Label />,
content: <Content />,
edit: <Content />,
canMakePayment: () => true,
ariaLabel: label,
supports: {
features: settings.supports,
}
})

也许详细讨论 registerPaymentMethod() 以及讨论 registerExpressPaymentMethod()是一个好主意，但我认为我们将在我的博客上的下一个教程中更深入地研究特定示例。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/61045.html

最后！恭喜你！文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/61045.html

如果您想知道付款方式标题和说明的来源：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/61045.html