在開始之前，確保你已經(jīng)查看了如何創(chuàng)建WooCommerce支付網(wǎng)關(guān)的完整指南（重要的是在閱讀這篇文章之前先閱讀那個）。但是，如果你正在使用WooCommerce的最新版本（我認為是從8.3開始），你可能會發(fā)現(xiàn)你的自定義支付方式?jīng)]有出現(xiàn)在結(jié)賬區(qū)塊中。

比如說，如果你試圖在商店里禁用除了你自定義的支付方式以外的所有支付方式，你可能會遇到以下的錯誤信息：

雖然使用舊版的

短代碼時一切正常，但很明顯，以前的支付網(wǎng)關(guān)教程現(xiàn)在可能不夠全面了。

不過別擔(dān)心，我們有了一個新教程來填補這個空白。我會一步步帶你了解如何為WooCommerce的購物車和結(jié)賬區(qū)塊添加一個自定義支付方式，以確保它與最新版本兼容。

到本教程結(jié)束時，我們的目標是：

當(dāng)然，我也會教你一些額外的小技巧，比如給你的支付方式加上一個自定義圖標。

服務(wù)器端集成 

首先，我們將從服務(wù)器端的集成開始。我知道你們很多人可能更喜歡使用PHP來開發(fā)，而不是JavaScript和React，所以我們就從簡單的部分開始吧。

注冊一個塊支持 PHP 類 

區(qū)塊支持PHP類”是一個PHP類，用于處理我們的支付網(wǎng)關(guān)，除了主要的支付網(wǎng)關(guān)類外。我們將用以下簡單的代碼片段來注冊它，這個過程和我們之前在woocommerce_payment_gateways鉤子中注冊主網(wǎng)關(guān)類的方式很相似。

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()這個條件，因為我們現(xiàn)在不需要它了。這是因為結(jié)賬區(qū)塊已經(jīng)成為WooCommerce的一部分，不再是一個單獨的插件。
• 我們的區(qū)塊支持PHP類將被放在一個獨立的文件中，我們會在接下來的步驟中詳細討論這個文件，它的名字是class-wc-misha-gateway-blocks-support.php。

塊支持 PHP 類 

在這一部分，我將會創(chuàng)建一個名為WC_Misha_Gateway_Blocks_Support的PHP類，這個類將擴展WooCommerce的AbstractPaymentMethodType類。同時，請記住我們已經(jīng)有了一個名為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：這是支付網(wǎng)關(guān)的唯一標識符。
• $gateway：這里可以存放支付網(wǎng)關(guān)對象的實例，但這不是強制的，因此我在代碼中沒有包括這部分。

方法:

• is_active()：這個方法用來檢查支付方式是否激活。
• get_payment_method_script_handles()：這里是添加JavaScript文件的地方，這些文件包含客戶端部分的集成代碼。
• get_payment_method_data()：這個方法提供了所有你需要在前端使用的數(shù)據(jù)，以關(guān)聯(lián)數(shù)組的形式呈現(xiàn)。

你還可以利用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' );
}

聲明兼容性 

當(dāng)你的支付方式不支持WooCommerce的結(jié)賬區(qū)塊時，這部分特別重要。

當(dāng)用戶在Gutenberg編輯器里編輯結(jié)賬頁面時，他們會看到一個提示信息：

方法如下：

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

客戶端集成 

設(shè)置項目 

我想讓這個教程保持非常簡單，所以我會使用@wordpress/scripts來完成。

在構(gòu)建過程中，你當(dāng)然可以進行更深入的配置，比如設(shè)置WooCommerce的混合構(gòu)建，這樣你就能使用import { registerPaymentMethod } from ....這樣的代碼。

這是我的文件夾結(jié)構(gòu)看起來的樣子：

為 WooCommerce Checkout 區(qū)塊注冊自定義付款方式 

這是/src/index.js文件的內(nèi)容，以便于您更好地理解

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()會很有幫助，但我打算在我的博客的下一篇教程里更詳細地講解這些例子。

最后，恭喜你完成了這一步！

如果您想知道付款方式標題和說明的來源：

添加付款方式圖標 

因為我承諾會給你更多的例子，而你可能不想等待下一篇教程，所以我們現(xiàn)在就開始吧。

我要做的是在WooCommerce結(jié)賬區(qū)塊的自定義支付網(wǎng)關(guān)旁邊展示一個圖標：

首先，我們來調(diào)整我們的區(qū)塊支持PHP類，特別是get_payment_method_data()方法，在那里我們會增加一個新的參數(shù)：

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',
		
		...

然后我建議為其創(chuàng)建另一個 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>標簽就不會顯示，這真是太好了！

聯(lián)系我們
教程看不懂？聯(lián)系我們?yōu)槟赓M解答！免費助力個人，小企站點！	客服微信
① 電話：020-2206-9892
② QQ咨詢：1025174874
③ 郵件：info@361sale.com
④ 工作時間：周一至周五，9:30-18:30，節(jié)假日休息