カスタム決済ゲートウェイをWooCommerceチェックアウトブロックに統合するガイド

始める前に、WooCommerce支払いゲートウェイの作成方法に関する完全なガイドをチェックしたことを確認してください（この記事を読む前に読むことが重要です）。ただし、WooCommerceの最新バージョン（8.3以降だと思います）を使用している場合、カスタム支払い方法がチェックアウトブロックに表示されないことがあります。

例えば、ショップでカスタム以外の支払い方法を無効にしようとすると、次のようなエラーメッセージが表示されることがあります：

旧バージョンの

短いコードですべてうまくいきますが、以前の支払いゲートウェイのチュートリアルが今ひとつ包括的でないことは明らかです。

しかしご心配なく、そのギャップを埋める新しいチュートリアルをご用意しました。WooCommerceのカートとチェックアウトブロックにカスタム支払い方法を追加し、最新バージョンとの互換性を確認する方法を順を追って説明します。

このチュートリアルが終わるころには、目標に到達している：

もちろん、支払い方法にカスタムアイコンを追加するなどの特別なヒントもお教えします。

サーバーサイドの統合 

まずはサーバーサイドの統合から。JavaScriptやReactよりもPHPでの開発を好む人が多いだろうから、簡単なところから始めよう。

PHPクラスをサポートするブロックを登録する 

ブロックサポートPHPクラス」は、メインのペイメントゲートウェイクラスに加えて、ペイメントゲートウェイを処理するために使用するPHPクラスです。以下の簡単なコード・スニペットで登録します。woocommerce_payment_gatewaysメインのゲートウェイ・クラスがフックに登録される方法はよく似ている。

add_action( 'woocommerce_blocks_loaded', 'rudr_gateway_block_support' )；

関数rudr_gateway_block_support() {

// if( ！ class_exists( 'AutomatticWooCommerceBlocks↩Payments︓Integrations︓AbstractPaymentMethodType' ) { // if( !

// return；

// }

// ここで「ゲートウェイ・ブロック・サポート・クラス」ファイルを導入する。

require_once __DIR__ . '/includes/class-wc-misha-gateway-blocks-support.php' ；

// 先ほど紹介したPHPクラスを登録する

add_action(

'woocommerce_blocks_payment_method_type_registration'、

function( AutomatticWooCommerceのPayPaymentMethodRegistry $payment_method_registry ) { { { { $payment_method_registry

$payment_method_registry->register( new WC_Misha_Gateway_Blocks_Support ) ；

}

);

}

次のことを忘れないでください：

• 私はそれを外した。class_exists()この条件、今は必要ないからです。これはチェックアウトブロックがWooCommerceの一部となり、独立したプラグインではなくなったからです。
• 私たちのブロックサポートPHPクラスは、次のステップで詳しく説明する別のファイルになります。クラス-wc-misha-gateway-blocks-support.php.

PHPクラスのブロックサポート 

このセクションでは、以下のファイルを作成する。WC_ミーシャ_ゲートウェイ_ブロック_サポートWooCommerceのAbstractPaymentMethodTypeクラスである。また、すでにWC_ミーシャ_ゲートウェイクラスを継承する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 ] : '';
	//}
}

まず、このクラスのプロパティとメソッドを見てみよう：

属性。

• $名ペイメントゲートウェイの一意の識別子です。
• $ゲートウェイここにペイメントゲートウェイオブジェクトのインスタンスを格納することも可能ですが、必須ではありませんので、この部分はコードに含めていません。

方法。

• is_active()このメソッドは、支払い方法が有効かどうかをチェックするために使用されます。
• get_payment_method_script_handles()ここでは、統合コードのクライアントサイド部分を含むJavaScriptファイルを追加します。
• get_payment_method_data()このメソッドは、フロントエンドで使用するために必要なすべてのデータを連想配列の形で提供します。

を利用することもできる。index.asset.phpでスクリプトのバージョンと依存関係を取得する。

public関数 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 = require $asset_path；
$version = isset( $asset[ 'version' ] ) ? $asset[ 'version' ] : $version; $dependencies = $asset_path; $dependencies = require
$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エディタでチェックアウトページを編集すると、プロンプトメッセージが表示されます：

方法論は以下の通りである：

add_action( 'before_woocommerce_init', 'rudr_cart_checkout_blocks_compatibility' )；
function rudr_cart_checkout_blocks_compatibility() { 以下のようにします。
    if( class_exists( '꒰AutomatticWooCommerce꒱Utilities꒱FeaturesUtil' ) ) { { {
        \'cart_checkout_blocks_compatibility' { declare_compatibility(
'cart_checkout_blocks'.
false // true (互換性、デフォルト)
false // true (互換性あり、デフォルト) または false (互換性なし)
);
    }

}

顧客統合 

プロジェクトの設定 

このチュートリアルは非常にシンプルにしたいので、ここではワードプレス/スクリプトを終了する。

ビルドプロセスの間に、WooCommerceのハイブリッドビルドを設定するなど、より詳細な設定を行うことができます。import { registerPaymentMethod } from ....こんなコードだ。

私のフォルダ構造はこんな感じだ：

WooCommerceのチェックアウトブロックにカスタム支払い方法を登録する 

これは/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 コンテンツ = () => {
return decodeEntities( settings.description || '' )
}
const Label = ( props ) => { 支払方法ラベル
const { PaymentMethodLabel } = props.components
return .
}
registerPaymentMethod( {
name: "misha"、
label: 、
name: "misha", label: , content: 、
edit: , canMakePayment: () => true, }.
canMakePayment: () => true, } canMakePayment: () => true、
canMakePayment: () => true, } canMakePayment: () => true, ariaLabel: label, supports: {customer_name
supports: {
features: settings.supports, }.
}
})

もっと深いところに行くかもしれない。registerPaymentMethod()歌で応える登録ExpressPaymentMethod()が役に立つだろうが、これらの例については、私のブログの次のチュートリアルで詳しく説明するつもりだ。

最後に、このステップの完了おめでとう！

支払い方法のタイトルと説明の出所を知りたい場合：

支払い方法の追加アイコン 

次のチュートリアルを待ちたくないだろうから、今すぐ始めよう。

これから行うのは、WooCommerceチェックアウトブロックのカスタム支払いゲートウェイの横にアイコンを表示することです：

まず、ブロックをサポートするPHPクラス、特にget_payment_method_data()メソッドに新しいパラメーターを追加する：

パブリック関数 get_payment_method_data() {
return array(

'description' => $this->get_setting( 'description' )、
'icon' => plugin_dir_url( __DIR__ ) . 'assets/icon.png', 'icon' => plugin_dir_url( __DIR__ ) .

...

それなら、別のReactコンポーネントを作ることをお勧めする：

アイコン = () => {
return settings.icon
return settings.icon <img src="{settings.icon}" style="{{" float: 'right', marginright: '20px' }} /> 
		: ''
}
コンストラベル = () =&gt; {
return (
        <span style="{{" width: '100%' }}>
            {ラベル｝
            <icon />
        </span>
    );
};

アイコンの画像へのリンクが提供されていない場合は<img>ラベルが表示されないのは素晴らしいことだ！

お問い合わせ
チュートリアルが読めない？無料でお答えします！個人サイト、中小企業サイトのための無料ヘルプ！	カスタマーサービス WeChat
① 電話：020-2206-9892
② QQ咨询：1025174874
三 Eメール：info@361sale.com
④ 勤務時間: 月～金、9:30～18:30、祝日休み