Antes de empezar, asegúrate de haber consultado la guía completa sobre cómo crear una pasarela de pago WooCommerce (es importante que la leas antes de leer este post). Sin embargo, si estás usando la última versión de WooCommerce (creo que es a partir de la 8.3), puede que te encuentres con que tu método de pago personalizado no aparece en el bloque de pago.

Por ejemplo, si intenta desactivar todos los métodos de pago de la tienda excepto el personalizado, puede encontrarse con el siguiente mensaje de error:

Mientras se utiliza la versión antigua de

Todo funciona bien con el código corto, pero está claro que el tutorial anterior sobre la pasarela de pago puede no ser lo suficientemente completo ahora.

Pero no te preocupes, tenemos un nuevo tutorial para llenar los vacíos. Te explicaré paso a paso cómo a?adir un método de pago personalizado al bloque de carrito y pago de WooCommerce para asegurarte de que es compatible con la última versión.

Al final de este tutorial, nos habremos puesto manos a la obra:

Por supuesto, también te ense?aré algunos consejos extra como a?adir un icono personalizado a tu método de pago.

Integración en el servidor 

En primer lugar, vamos a empezar con la integración del lado del servidor. Sé que muchos de ustedes probablemente prefieren desarrollar con PHP sobre JavaScript y React, así que vamos a empezar con la parte fácil.

Registrar un bloque para admitir clases PHP 

La "Block Support PHP Class" es una clase PHP utilizada para manejar nuestra pasarela de pago además de la clase principal de la pasarela de pago. La registraremos con el siguiente sencillo fragmento de código, un proceso similar al que hicimos anteriormente en la clasewoocommerce_payment_gatewaysLa forma en que la clase principal de la pasarela se registra en el gancho es muy similar.

add_action( 'woocommerce_blocks_loaded', 'rudr_gateway_block_support' );

function rudr_gateway_block_support() {

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

// return;

// }

// Introduce aquí el archivo "gateway block support class".

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

// Registra la clase PHP que acabamos de introducir

add_action(

'woocommerce_bloques_metodo_pago_tipo_registro',

function( Automattic\WooCommerce\Blocks\Payments\PaymentMethodRegistry $payment_method_registry ) {

$payment_method_registry->register( new WC_Misha_Gateway_Blocks_Support ) ;

}

);

}

Recuerde lo siguiente:

• Lo quité.class_exists()Esta condición, porque ahora no lo necesitamos. Esto se debe a que el bloque de pago se ha convertido en parte de WooCommerce y ya no es un plugin independiente.
• Nuestra clase PHP de soporte de bloque estará en un archivo separado, que discutiremos en detalle en los próximos pasos, y se llamaclass-wc-misha-gateway-bloques-soporte.php.

Soporte de bloques para clases PHP 

En esta sección, crearé un archivo llamadoWC_Misha_Gateway_Blocks_SupportClase PHP que extenderá la claseAbstractPaymentMethodTypeClase. Además, recuerda que ya tenemos una clase llamadaWC_Misha_Gatewayque amplía la clasePasarela_de_pago_WC.

Yo pondría este nuevo archivo de clase en el directorioincludes/class-wc-misha-gateway-bloques-soporte.phpMedio.

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

Empecemos por ver las propiedades y métodos de esta clase:

Atributos.

• $name: Es el identificador único de la pasarela de pago.
• $gatewayEs posible almacenar instancias del objeto pasarela de pago aquí, pero no es obligatorio, por lo que no he incluido esta parte en el código.

Métodos.

• is_active()Este método se utiliza para comprobar si el método de pago está activo.
• get_payment_method_script_handles()Aquí es donde se a?aden los archivos JavaScript que contienen la parte cliente del código de integración.
• get_payment_method_data()Este método proporciona todos los datos que necesitas utilizar en el front-end, en forma de array asociativo.

También puede aprovechar laindex.asset.phppara obtener la versión y las dependencias del 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' );
}

Declaración de compatibilidad 

Esta parte es especialmente importante cuando su método de pago no es compatible con el bloque de pago de WooCommerce.

Cuando un usuario edita una página de pago en el editor de Gutenberg, verá un mensaje de aviso:

La metodología es la siguiente:

add_action( 'before_woocommerce_init', 'rudr_cart_checkout_blocks_compatibility' );
function rudr_cart_checkout_blocks_compatibility() {
    if( class_exists( '\Automattic\WooCommerce\Utilities\FeaturesUtil' ) ) {
        \AutomatticWooCommerce_Utilities_FeaturesUtil::declare_compatibility(
'cart_checkout_blocks'.
__FILE__, false // true (compatible, por defecto)
false // true (compatible, por defecto) o false (no compatible)
);
    }

}

Integración de clientes 

Puesta en marcha del proyecto 

Quiero que este tutorial sea muy sencillo, por lo que utilizaré el método@wordpress/scriptspara terminar.

Durante el proceso de compilación, por supuesto, puede realizar una configuración más profunda, como configurar una compilación híbrida de WooCommerce para que pueda utilizar la funciónimport { registerPaymentMethod } from ....Código como este.

Así es como se ve mi estructura de carpetas:

Registrar métodos de pago personalizados para los bloques de pago de WooCommerce 

esto es/src/index.jsdel documento para ayudarle a comprender mejor la

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 Etiqueta = ( props ) => {
const { EtiquetaMétodoPago } = props.components
return 
}
registerPaymentMethod( {
nombre: "misha",
label: ,
nombre: "misha", etiqueta: , contenido: ,
editar: , canMakePayment: () => true, }
canMakePayment: () => true,
canMakePayment: () => true, ariaLabel: label, supports: {nombre_cliente
soportes: {
features: settings.supports, }
}
})

Tal vez profundizar más.registerPaymentMethod()responder cantandoregisterExpressPaymentMethod()sería útil, pero tengo previsto entrar en más detalles sobre estos ejemplos en el próximo tutorial de mi blog.

Por último, ?enhorabuena por haber completado este paso!

Si desea conocer la fuente del título y la descripción del método de pago:

Icono A?adir método de pago 

Como prometo darte más ejemplos y probablemente no quieras esperar al próximo tutorial, empecemos ya.

Lo que voy a hacer es mostrar un icono junto a la pasarela de pago personalizada en el bloque de pago de WooCommerce:

En primer lugar, vamos a modificar nuestras clases PHP compatibles con los bloques, en concreto la claseget_payment_method_data()donde a?adiremos un nuevo parámetro:

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__ ) .

...

Yo sugeriría entonces crear otro componente React para ello:

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

Si no se proporciona un enlace a una imagen del icono, el icono<img>Las etiquetas no aparecían, ?lo cual es genial!

Contacte con nosotros
?No puede leer el tutorial? Póngase en contacto con nosotros para obtener una respuesta gratuita. Ayuda gratuita para sitios personales y de peque?as empresas	Servicio de atención al cliente WeChat
① Tel: 020-2206-9892
② QQ咨詢：1025174874
(iii) Correo electrónico: info@361sale.com
④ Horario de trabajo: de lunes a viernes, de 9:30 a 18:30, días festivos libres