Avant de commencer, assurez-vous d'avoir consulté le guide complet sur la création d'une passerelle de paiement WooCommerce (il est important de le lire avant de lire cet article). Cependant, si vous utilisez la dernière version de WooCommerce (je pense que c'est à partir de la version 8.3), il se peut que votre méthode de paiement personnalisée n'apparaisse pas dans le bloc de paiement.

Par exemple, si vous essayez de désactiver toutes les méthodes de paiement de la boutique, à l'exception de votre méthode personnalisée, vous risquez d'obtenir le message d'erreur suivant :

En utilisant l'ancienne version de

Tout fonctionne bien avec le code court, mais il est clair que le tutoriel précédent sur la passerelle de paiement n'est peut-être pas assez complet aujourd'hui.

Mais ne vous inquiétez pas, nous avons un nouveau tutoriel pour combler les lacunes. Je vais vous expliquer pas à pas comment ajouter une méthode de paiement personnalisée au bloc panier et caisse de WooCommerce pour vous assurer qu'il est compatible avec la dernière version.

à la fin de ce tutoriel, nous sommes sur la bonne voie :

Bien s?r, je vous apprendrai aussi quelques astuces supplémentaires, comme l'ajout d'une ic?ne personnalisée à votre méthode de paiement.

Intégration c?té serveur 

Tout d'abord, nous allons commencer par l'intégration c?té serveur. Je sais que beaucoup d'entre vous préfèrent probablement développer avec PHP plut?t qu'avec JavaScript et React, alors commen?ons par la partie la plus facile.

Enregistrer un bloc pour prendre en charge les classes PHP 

La "Block Support PHP Class" est une classe PHP utilisée pour gérer notre passerelle de paiement en plus de la classe principale de la passerelle de paiement. Nous allons l'enregistrer avec le simple extrait de code suivant, un processus similaire à ce que nous avons fait plus t?t dans la sectionwoocommerce_payment_gatewaysLa fa?on dont la classe de la passerelle principale est enregistrée dans le crochet est très similaire.

add_action('woocommerce_blocks_loaded', 'rudr_gateway_block_support' ) ;

function rudr_gateway_block_support() {

// if( ! class_exists('Automattic\WooCommerce\Blocks\Payments\Integrations\AbstractPaymentMethodType') {

// return ;

// }

// Introduisez ici le fichier "gateway block support class".

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

// Enregistrer la classe PHP que nous venons d'introduire

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

}

) ;

}

N'oubliez pas les points suivants :

• Je l'ai enlevé.class_exists()Cette condition, parce que nous n'en avons plus besoin maintenant. En effet, le bloc de caisse fait désormais partie de WooCommerce et n'est plus un plugin séparé.
• Notre classe PHP de support de bloc se trouve dans un fichier séparé, dont nous parlerons en détail dans les prochaines étapes, et qui s'appelleclass-wc-misha-gateway-blocks-support.php.

Prise en charge des blocs pour les classes PHP 

Dans cette section, je vais créer un fichier appeléWC_Misha_Gateway_Blocks_SupportClasse PHP qui étend la classe de WooCommerceType de méthode de paiement abstraitClasse. N'oubliez pas non plus que nous avons déjà une classe nomméeWC_Misha_Gatewayqui étend la classeWC_Payment_Gateway.

Pour ma part, je placerais ce nouveau fichier de classe dans le répertoireincludes/class-wc-misha-gateway-blocks-support.phpAu milieu.

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

Commen?ons par examiner les propriétés et les méthodes de cette classe :

Attributs.

• 1TP4NomIdentifiant unique de la passerelle de paiement.
• $gatewayIl est possible de stocker des instances de l'objet de la passerelle de paiement ici, mais ce n'est pas obligatoire, c'est pourquoi je n'ai pas inclus cette partie dans le code.

Méthodes.

• is_active(): Cette méthode est utilisée pour vérifier si le mode de paiement est actif.
• get_payment_method_script_handles(): C'est ici que vous ajoutez les fichiers JavaScript qui contiennent la partie du code d'intégration c?té client.
• get_payment_method_data(): Cette méthode fournit toutes les données dont vous avez besoin pour utiliser le front-end, sous la forme d'un tableau associatif.

Vous pouvez également profiter de laindex.asset.phppour obtenir la version et les dépendances du script.

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 = $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") ;
}

Déclaration de compatibilité 

Cette partie est particulièrement importante lorsque votre méthode de paiement ne prend pas en charge le bloc de paiement de WooCommerce.

Lorsqu'un utilisateur modifie une page de paiement dans l'éditeur Gutenberg, il voit appara?tre un message d'invite :

La méthodologie est la suivante :

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, par défaut)
false // true (compatible, par défaut) ou false (non compatible)
) ;
    }

}

Intégration du client 

Mise en place du projet 

Je souhaite que ce tutoriel reste très simple, c'est pourquoi j'utiliserai la fonction@wordpress/scriptspour terminer.

Au cours du processus de construction, vous pouvez bien s?r effectuer des configurations plus approfondies, telles que la mise en place d'une construction hybride de WooCommerce afin que vous puissiez utiliser l'optionimport { registerPaymentMethod } from ....Un code comme celui-ci.

Voici à quoi ressemble la structure de mes dossiers :

Enregistrer des méthodes de paiement personnalisées pour les blocs de caisse de WooCommerce 

ceci est/src/index.jsdu document pour vous aider à mieux comprendre les

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 
}
registerPaymentMethod( {
name : "misha",
label : ,
name : "misha", label : , content : ,
edit : , canMakePayment : () => true, }
canMakePayment : () => true,
canMakePayment : () => true, ariaLabel : label, supports : {customer_name
supports : {
features : settings.supports, }
}
})

Peut-être aller plus loin.registerPaymentMethod()répondre en chantantregisterExpressPaymentMethod()serait utile, mais j'ai l'intention d'approfondir ces exemples dans le prochain tutoriel sur mon blog.

Enfin, nous vous félicitons d'avoir franchi cette étape !

Si vous souhaitez conna?tre la source du titre et de la description de la méthode de paiement :

Ajouter une ic?ne de mode de paiement 

Comme je promets de vous donner d'autres exemples et que vous ne voulez probablement pas attendre le prochain tutoriel, commen?ons dès maintenant.

Ce que je vais faire, c'est afficher une ic?ne à c?té de la passerelle de paiement personnalisée dans le bloc de paiement de WooCommerce :

Tout d'abord, nous allons modifier nos classes PHP supportant les blocs, en particulier la classeget_payment_method_data()où nous ajouterons un nouveau paramètre :

public function get_payment_method_data() {
return array(

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

...

Je suggérerais alors de créer un autre composant React pour cela :

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

Si un lien vers une image de l'ic?ne n'est pas fourni, l'ic?ne<img>Les étiquettes n'apparaissaient pas, ce qui est très bien !

Contactez nous
Vous n'arrivez pas à lire le tutoriel ? Contactez-nous pour une réponse gratuite ! Aide gratuite pour les sites personnels et les sites de petites entreprises !	Service clientèle WeChat
① Tel : 020-2206-9892
② QQ咨詢：1025174874
(iii) Courriel : info@361sale.com
④ Horaires de travail : du lundi au vendredi, de 9h30 à 18h30, jours fériés.