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

wustzdd2024-10-02 12:40

从 8.3 开始的 WooCommerce版本中，您可能会注意到您的自定义付款方式在结账区块中不可用。

例如，如果您尝试停用商店中除自定义付款方式之外的所有付款方式，您可能会收到如下错误消息：

这里我使用 Storefront 主题作为示例，但任何 WordPress 主题都会出现相同的错误消息。

但可以肯定的是，当您使用旧的[woocommerce_checkout]简码时，一切都运行良好。

是的，之前发布的支付网关教程似乎不再完整，但我们今天将通过这个额外的教程来更改它，我将逐步指导您应该做什么，以添加自定义的兼容性WooCommerce 购物车和结帐块的 WooCommerce 付款方式。

这就是我们在本教程结束时要实现的目标：

当然，我还会向您展示一些巧妙的额外内容，例如为您的付款方式添加自定义图标。

文章目录

服务器端集成

首先，让我们从服务器端集成开始，我很确定你们中的许多人都觉得使用 PHP 开发比 JavaScript + React 更舒服，所以让我们从简单的事情开始。

注册一个块支持 PHP 类

"区块支持PHP类"是除主要支付网关类之外的PHP类。我们将使用下面的简单代码片段来注册它，这与我们在 woocommerce_payment_gateways hook 中注册主网关类时所做的类似。

复制代码
  1. add_action( 'woocommerce_blocks_loaded', 'rudr_gateway_block_support' );
  2. function rudr_gateway_block_support() {
  4. // if( ! class_exists( 'Automattic\WooCommerce\Blocks\Payments\Integrations\AbstractPaymentMethodType' ) ) {
  5. // return;
  6. // }
  8. // 在这里引入 "gateway block support class" 文件
  9. require_once __DIR__ . '/includes/class-wc-misha-gateway-blocks-support.php';
  11. // 注册我们刚才引入的 PHP 类
  12. add_action(
  13. 'woocommerce_blocks_payment_method_type_registration',
  14. function( Automattic\WooCommerce\Blocks\Payments\PaymentMethodRegistry $payment_method_registry ) {
  15. $payment_method_registry->register( new WC_Misha_Gateway_Blocks_Support );
  16. }
  17. );
  19. }

请记住以下几点：

  • 我注销了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 类。

就我而言，我将其放入includes/class-wc-misha-gateway-blocks-support.php.

复制代码
  1. <?php
  2. use Automattic\WooCommerce\Blocks\Payments\Integrations\AbstractPaymentMethodType;
  4. final class WC_Misha_Gateway_Blocks_Support extends AbstractPaymentMethodType {
  6. private $gateway;
  8. protected $name = 'misha'; // payment gateway id
  10. public function initialize() {
  11. // get payment gateway settings
  12. $this->settings = get_option( "woocommerce_{$this->name}_settings", array() );
  14. // you can also initialize your payment gateway here
  15. // $gateways = WC()->payment_gateways->payment_gateways();
  16. // $this->gateway = $gateways[ $this->name ];
  17. }
  19. public function is_active() {
  20. return ! empty( $this->settings[ 'enabled' ] ) && 'yes' === $this->settings[ 'enabled' ];
  21. }
  23. public function get_payment_method_script_handles() {
  25. wp_register_script(
  26. 'wc-misha-blocks-integration',
  27. plugin_dir_url( __DIR__ ) . 'build/index.js',
  28. array(
  29. 'wc-blocks-registry',
  30. 'wc-settings',
  31. 'wp-element',
  32. 'wp-html-entities',
  33. ),
  34. null, // or time() or filemtime( ... ) to skip caching
  35. true
  36. );
  38. return array( 'wc-misha-blocks-integration' );
  40. }
  42. public function get_payment_method_data() {
  43. return array(
  44. 'title' => $this->get_setting( 'title' ),
  45. // almost the same way:
  46. // 'title' => isset( $this->settings[ 'title' ] ) ? $this->settings[ 'title' ] : 'Default value';
  47. 'description' => $this->get_setting( 'description' ),
  48. // if $this->gateway was initialized on line 15
  49. // 'supports' => array_filter( $this->gateway->supports, [ $this->gateway, 'supports' ] ),
  51. // example of getting a public key
  52. // 'publicKey' => $this->get_publishable_key(),
  53. );
  54. }
  56. //private function get_publishable_key() {
  57. // $test_mode = ( ! empty( $this->settings[ 'testmode' ] ) && 'yes' === $this->settings[ 'testmode' ] );
  58. // $setting_key = $test_mode ? 'test_publishable_key' : 'publishable_key';
  59. // return ! empty( $this->settings[ $setting_key ] ) ? $this->settings[ $setting_key ] : '';
  60. //}
  62. }

首先让我们看一下类的属性和方法。

属性：

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

方法：

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

您还可以使用index.asset.php来获取脚本版本和依赖项。

复制代码
  1. public function get_payment_method_script_handles() {
  3. $asset_path = plugin_dir_path( __DIR__ ) . 'build/index.asset.php';
  4. $version = null;
  5. $dependencies = array();
  6. if( file_exists( $asset_path ) ) {
  7. $asset = require $asset_path;
  8. $version = isset( $asset[ 'version' ] ) ? $asset[ 'version' ] : $version;
  9. $dependencies = isset( $asset[ 'dependencies' ] ) ? $asset[ 'dependencies' ] : $dependencies;
  10. }
  12. wp_register_script(
  13. 'wc-misha-blocks-integration',
  14. plugin_dir_url( __DIR__ ) . 'build/index.js',
  15. $dependencies,
  16. $version,
  17. true
  18. );
  20. return array( 'wc-misha-blocks-integration' );
  22. }

声明兼容性

当您想让用户知道您的付款方式与 WooCommerce Checkout 块不兼容时，此部分通常很有用。

当用户尝试编辑古腾堡中的结账页面时，他们将收到通知：

方法如下：

复制代码
  1. add_action( 'before_woocommerce_init', 'rudr_cart_checkout_blocks_compatibility' );
  3. function rudr_cart_checkout_blocks_compatibility() {
  5. if( class_exists( '\Automattic\WooCommerce\Utilities\FeaturesUtil' ) ) {
  6. \Automattic\WooCommerce\Utilities\FeaturesUtil::declare_compatibility(
  7. 'cart_checkout_blocks',
  8. __FILE__,
  9. false // true (compatible, default) or false (not compatible)
  10. );
  11. }
  13. }

客户端集成

设置项目

再次强调，我希望本教程中的内容保持超级简单，因此我将使用@wordpress/scripts即可。

在我们的构建中，您肯定可以进一步配置 WooCommerce 混合构建，这样您就可以使用import { registerPaymentMethod } from ....

这就是我的文件夹结构的样子：

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

以下是/src/index.js文件，以防您有疑问。

复制代码
  1. import { decodeEntities } from '@wordpress/html-entities';
  3. const { registerPaymentMethod } = window.wc.wcBlocksRegistry
  4. const { getSetting } = window.wc.wcSettings
  6. const settings = getSetting( 'misha_data', {} )
  8. const label = decodeEntities( settings.title )
  10. const Content = () => {
  11. return decodeEntities( settings.description || '' )
  12. }
  14. const Label = ( props ) => {
  15. const { PaymentMethodLabel } = props.components
  16. return <PaymentMethodLabel text={ label } />
  17. }
  19. registerPaymentMethod( {
  20. name: "misha",
  21. label: <Label />,
  22. content: <Content />,
  23. edit: <Content />,
  24. canMakePayment: () => true,
  25. ariaLabel: label,
  26. supports: {
  27. features: settings.supports,
  28. }
  29. })

也许详细讨论 registerPaymentMethod() 以及讨论 registerExpressPaymentMethod()是一个好主意，但我认为我们将在我的博客上的下一个教程中更深入地研究特定示例。

最后！恭喜你！

如果您想知道付款方式标题和说明的来源：

添加付款方式图标

由于我向您承诺了更多示例，并且您可能不想等到下一个教程，所以让我们从这个开始。

我现在的目标是在 WooCommerce Checkout 块中的自定义支付网关标题附近显示一个图标：

首先，让我们修改我们的块支持 PHP 类，特别是它的get_payment_method_data()，我们将在那里提供另一个参数：

复制代码
  1. public function get_payment_method_data() {
  2. return array(
  3. 'title' => $this->get_setting( 'title' ),
  4. 'description' => $this->get_setting( 'description' ),
  5. 'icon' => plugin_dir_url( __DIR__ ) . 'assets/icon.png',
  7. ...

然后我建议为其创建另一个 React 组件：

复制代码
  1. const Icon = () => {
  2. return settings.icon
  3. ? <img src={settings.icon} style={``{ float: 'right', marginRight: '20px' }} />
  4. : ''
  5. }
  7. const Label = () => {
  8. return (
  9. <span style={``{ width: '100%' }}>
  10. {label}
  11. <Icon />
  12. </span>
  13. );
  14. };

如果未提供图标图像 URL，则不会显示<img>标签，太棒了！

相关推荐
c***979812 小时前
PHP在内容管理中的模板引擎
开发语言·php
Q_Q51100828513 小时前
python+django/flask的情绪宣泄系统
spring boot·python·pycharm·django·flask·node.js·php
用户72278681234413 小时前
PHP Fiber 优雅协作式多任务
php
青茶36015 小时前
ThinkCMF是一个开源的内容管理框架
php·cms·thinkphp
vx_vxbs6615 小时前
【SSM电动车智能充电服务平台】（免费领源码+演示录像）|可做计算机毕设Java、Python、PHP、小程序APP、C#、爬虫大数据、单片机、文案
java·spring boot·mysql·spring cloud·小程序·php·idea
j***576816 小时前
电脑可以连接wifi，但是连接后仍然显示没有网络
网络·电脑·php
踢球的打工仔18 小时前
PHP面向对象(5)
android·java·php
t***821118 小时前
华为数据中心CE系列交换机级联M-LAG配置示例
服务器·华为·php
white-persist18 小时前
【攻防世界】reverse | Reversing-x64Elf-100 详细题解 WP
c语言·开发语言·网络·python·学习·安全·php
JaguarJack18 小时前
PHP Fiber 优雅协作式多任务
php·服务端
热门推荐
01GitHub 镜像站点02BongoCat - 跨平台键盘猫动画工具03【保姆级教程】免费使用Gemini3的5种方法！免翻墙/国内直连04UV安装并设置国内源05安娜的档案(Anna’s Archive) 镜像网站/国内最新可访问入口（持续更新）06Linux下V2Ray安装配置指南07Labelme从安装到标注：零基础完整指南08“我的电脑”图标没了怎么办 4种方法找回09Google Antigravity：无法登录？早期错误、登录修复和用户反馈指南10全球最强模型Grok4，国内已可免费使用！（附教程）