集成自定义支付网关到WooCommerce结账区块的指南

在开始之前,确保你已经查看了如何创建WooCommerce支付网关的完整指南(重要的是在阅读这篇文章之前先阅读那个)。但是,如果你正在使用WooCommerce的最新版本(我认为是从8.3开始),你可能会发现你的自定义支付方式没有出现在结账区块中。

集成自定义支付网关到WooCommerce结账区块的指南

比如说,如果你试图在商店里禁用除了你自定义的支付方式以外的所有支付方式,你可能会遇到以下的错误信息:

集成自定义支付网关到WooCommerce结账区块的指南

虽然使用旧版的

短代码时一切正常,但很明显,以前的支付网关教程现在可能不够全面了。

不过别担心,我们有了一个新教程来填补这个空白。我会一步步带你了解如何为WooCommerce的购物车和结账区块添加一个自定义支付方式,以确保它与最新版本兼容。

到本教程结束时,我们的目标是:

集成自定义支付网关到WooCommerce结账区块的指南

当然,我也会教你一些额外的小技巧,比如给你的支付方式加上一个自定义图标。

服务器端集成 

首先,我们将从服务器端的集成开始。我知道你们很多人可能更喜欢使用PHP来开发,而不是JavaScript和React,所以我们就从简单的部分开始吧。

注册一个块支持 PHP 类 

区块支持PHP类”是一个PHP类,用于处理我们的支付网关,除了主要的支付网关类外。我们将用以下简单的代码片段来注册它,这个过程和我们之前在woocommerce_payment_gateways钩子中注册主网关类的方式很相似。

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

}

);

}

请记住以下几点:

  • 我去掉了class_exists()这个条件,因为我们现在不需要它了。这是因为结账区块已经成为WooCommerce的一部分,不再是一个单独的插件。
  • 我们的区块支持PHP类将被放在一个独立的文件中,我们会在接下来的步骤中详细讨论这个文件,它的名字是class-wc-misha-gateway-blocks-support.php

块支持 PHP 类 

在这一部分,我将会创建一个名为WC_Misha_Gateway_Blocks_Support的PHP类,这个类将扩展WooCommerce的AbstractPaymentMethodType类。同时,请记住我们已经有了一个名为WC_Misha_Gateway的类,它扩展了WC_Payment_Gateway

对于我自己,我会把这个新的类文件放到includes/class-wc-misha-gateway-blocks-support.php中。

<?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 ] : '';
	//}
}

让我们先来看看这个类的属性和方法:

属性:

  • $name:这是支付网关的唯一标识符。
  • $gateway:这里可以存放支付网关对象的实例,但这不是强制的,因此我在代码中没有包括这部分。

方法:

  • is_active():这个方法用来检查支付方式是否激活。
  • get_payment_method_script_handles():这里是添加JavaScript文件的地方,这些文件包含客户端部分的集成代码。
  • get_payment_method_data():这个方法提供了所有你需要在前端使用的数据,以关联数组的形式呈现。

你还可以利用index.asset.php来获取脚本的版本和依赖项。

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的结账区块时,这部分特别重要。

当用户在Gutenberg编辑器里编辑结账页面时,他们会看到一个提示信息:

集成自定义支付网关到WooCommerce结账区块的指南

方法如下:

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来完成。

在构建过程中,你当然可以进行更深入的配置,比如设置WooCommerce的混合构建,这样你就能使用import { registerPaymentMethod } from ....这样的代码。

这是我的文件夹结构看起来的样子:

集成自定义支付网关到WooCommerce结账区块的指南

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

这是/src/index.js文件的内容,以便于您更好地理解

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()会很有帮助,但我打算在我的博客的下一篇教程里更详细地讲解这些例子。

最后,恭喜你完成了这一步!

集成自定义支付网关到WooCommerce结账区块的指南

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

集成自定义支付网关到WooCommerce结账区块的指南

添加付款方式图标 

因为我承诺会给你更多的例子,而你可能不想等待下一篇教程,所以我们现在就开始吧。

我要做的是在WooCommerce结账区块的自定义支付网关旁边展示一个图标:

集成自定义支付网关到WooCommerce结账区块的指南

首先,我们来调整我们的区块支持PHP类,特别是get_payment_method_data()方法,在那里我们会增加一个新的参数:

public function get_payment_method_data() {
	return array(
		'title'        => $this->get_setting( 'title' ),
		'description'  => $this->get_setting( 'description' ),
		'icon'         => plugin_dir_url( __DIR__ ) . 'assets/icon.png',
		
		...

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

const Icon = () => {
	return settings.icon 
		? <img src={settings.icon} style={{ float: 'right', marginRight: '20px' }} /> 
		: ''
}
const Label = () => {
	return (
        <span style={{ width: '100%' }}>
            {label}
            <Icon />
        </span>
    );
};

如果没有提供图标的图片链接,那么<img>标签就不会显示,这真是太好了!


联系我们
文章看不懂?联系我们为您免费解答!免费助力个人,小企站点!
电话:020-2206-9892
QQ咨询:1025174874
邮件:info@361sale.com
工作时间:周一至周五,9:30-18:30,节假日休息
发布者:光子波动,转转请注明出处:https://www.361sale.com/6209/

(0)
上一篇 2024年 3月 21日 下午6:07
下一篇 2024年 3月 21日 下午7:45

相关推荐

  • WordPress 6.5 候选版本 2

    WordPress 6.5的第二个测试版(RC2)现已发布! 请注意,这个版本还在开发中,所以不建议在正式或重要的网站上使用。我们建议在一个专门的测试环境中对这个版本进行评估。 尽管这个候选版本看起来已经准备就绪,但进行测试仍然非常重要,我们需要确保WordPress 6.5的所有功能都能正常运行。 你可以通过以下四种方式来测试WordPress 6.5 R…

    2024年 3月 27日
    0050
  • WordPress 6.5.2 维护和安全发布

    注意:由于初始包的问题,​​WordPress 6.5.1 未发布。 6.5.2 是 WordPress 6.5 的第一个小版本。 此安全和维护版本修复了2 个 Core 错误、12 个块编辑器错误修复和 1 个安全修复。同样的漏洞同时影响了WordPress的核心系统和Gutenberg插件,这两个地方都存在着问题。 现在有一个更为安全的版本可用,我们强烈…

    2024年 4月 10日 WordPress资讯
    00115
  • 如何更改WordPress用户名:三种有效方法的详细指南

    更改 WordPress 用户名的原因? 出于安全考虑,使用像“admin”这样的通用WordPress用户名可能让你的网站面临安全风险,因为这些用户名很容易被猜到,很可能会被黑客破解与攻击。不过,可能还想更改WordPress用户名的其它原因包括: 登录wordpress仪表板,转到“用户”选项卡并选择“个人资料”时,将看到一个灰色字段,其中包含一条消息,…

    2024年 4月 14日 WordPress
    0032
  • 深入解析WordPress 6.5的新特性:字体库介绍

    WordPress 6.5新增了字体库功能,使用户可以直接在编辑器里管理字体。此外,它还提供了一系列的API,这意味着开发者可以更灵活地控制和调整这项功能,甚至可以禁用它。 字体集 字体集是一系列你可以通过编辑器添加到网站的字体。在theme.json中,这些字体系列被列为fontFamily项目。默认情况下,在WordPress 6.5中,用户可以选择添加…

    2024年 3月 21日
    0042
  • 如何通过 6 个步骤创建 WordPress 联系表单

    联系表单有什么作用? 通过联系表单能有效提高 WordPress 网站用户参与度,将有助于增强互动性并加强与用户的联系,主要表现在以下方面。 如何在 WordPress 中添加联系表单 1.安装WordPress联系表单插件 WordPress 联系表单插件可让你创建和管理多个联系表单,我们使用WPForms,它是最用户友好且多功能的 WordPress 表…

    2024年 4月 13日 WordPress
    0037

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

联系我们

020-2206-9892

QQ咨询:1025174874

邮件:info@361sale.com

工作时间:周一至周五,9:30-18:30,节假日休息

客服微信