在之前的文章中，我写过如何开发一个WooCommerce的支付方式，文章地址：https://www.kekc.cn/3989.html
我们来简单回顾一下，其实开发支付方式主要就两步：1、通过过滤钩子新添加支付方式的class函数名称（woocommerce_payment_gateways）；2、新建支付方式程序，做法是新建一个与前面钩子添加的class函数名称一致的class函数，以供WooCommerce调用，不应使用plugins_loaded之后的钩子，plugins_loaded的排序也不能大于999。
公司有个支付项目，要求在点击支付后显示一些信息，订单自动保存到后台。我的做法是开发个支付方式，点击支付后将订单状态改为On-hlod，然后调用thank_you_{payment_id}这个action钩子来显示相应内容，之前是想跳转到相应链接，但是他们要展示是订单号，所以文中出现了一些paytourl的字眼，别误解了，KEKC博客原创非转载。
但是当我们做完这些，发现个问题，我在blocksy主题中，提示支付方式不支持块，可以切换为经典模式，但是这失去了一些样式。我的代码：
<?php
/*
Plugin Name: 支付跳转页面
Plugin URI: https://www.kekc.cn/
Description: 支付后显示消息，同时将订单信息保存为On Hold
Version: 1.0.0
Author: 殷江碧
Author URI: https://www.kekc.cn/
*/
// 定义支付地址
// 支付处理
class WC_paytourl_Payments {
public static function init() {
// 载入支付类
add_action( 'plugins_loaded', array( __CLASS__, 'includes' ), 0 );
// 添加支付
add_filter( 'woocommerce_payment_gateways', array( __CLASS__, 'add_gateway' ) );
}
//添加支付
public static function add_gateway( $gateways ) {
$options = get_option( 'woocommerce_WC_Gateway_Paytourl_Venmo_settings', array() );
if ( isset( $options['hide_for_non_admin_users'] ) ) {
$hide_for_non_admin_users = $options['hide_for_non_admin_users'];
} else {
$hide_for_non_admin_users = 'no';
}
if ( ( 'yes' === $hide_for_non_admin_users && current_user_can( 'manage_options' ) ) || 'no' === $hide_for_non_admin_users ) {
$gateways[] = 'WC_Gateway_Paytourl_Venmo';
}
return $gateways;
}
//支付类
public static function includes() {
if ( class_exists( 'WC_Payment_Gateway' ) ) {
require_once 'payment/Venmo.php';
}
}
//插件链接
public static function plugin_url() {
return untrailingslashit( plugins_url( '/', __FILE__ ) );
}
//插件路径
public static function plugin_abspath() {
return trailingslashit( plugin_dir_path( __FILE__ ) );
}
}
WC_paytourl_Payments::init();payment/Venmo.php代码：
<?php
if ( ! defined( 'ABSPATH' ) ) {
exit;
}
if (!class_exists('WC_Payment_Gateway')) {
return;
}
class WC_Gateway_Paytourl_Venmo extends WC_Payment_Gateway {
public function __construct() {
$this->id = 'WC_Gateway_Paytourl_Venmo';
$this->icon = WC_paytourl_Payments::plugin_url()."/iconimg/".$this->id.".png";
$this->has_fields = false;
$this->method_title = 'Paytourl Venmo';
$this->method_description = '这个支付方式是Venmo，结账页点击支付后跳转到固定的页面链接';
$this->init_form_fields();
$this->init_settings();
$this->title = $this->get_option( 'title' );
$this->description = $this->get_option( 'description' );
add_action( 'woocommerce_update_options_payment_gateways_' . $this->id, array( $this, 'process_admin_options' ) );
add_action( 'woocommerce_thankyou_'.$this->id, array( $this, 'thankyou_page' ) );
}
public function get_icon() {
$icon = $this->icon ? '<img src="' . WC_HTTPS::force_https_url( $this->icon ) . '" alt="' . esc_attr( $this->get_title() ) . '" />' : '';
return apply_filters( 'WC_Gateway_Paytourl_Venmo_icon', $icon, $this->id );
}
public function init_form_fields() {
$this->form_fields = array(
'enabled' => array(
'title' => '开启/关闭',
'type' => 'checkbox',
'label' => '开启这个支付方式',
'default' => 'no',
),
'hide_for_non_admin_users' => array(
'type' => 'checkbox',
'label' => '非管理结账页隐藏',
'default' => 'no',
),
'title' => array(
'title' => '标题',
'type' => 'safe_text',
'description' => '填写前台展示的支付名称.',
'default' => 'Venmo',
'desc_tip' => true,
),
'shortcode' => array(
'title' => '短代码',
'type' => 'text',
'description' => '填写支付完成后显示的短代码的内容。',
'default' => '',
'desc_tip' => true,
),
'description' => array(
'title' => '描述',
'type' => 'textarea',
'description' => '在前台展示的描述.',
'default' => 'Please send a check to Store Name, Store Street, Store Town, Store State / County, Store Postcode.',
'desc_tip' => true,
),
);
}
public function process_payment( $order_id ) {
$order = wc_get_order( $order_id );
if ( $order->get_total() > 0 ) {
$order->update_status( 'on-hold' );
} else {
$order->payment_complete();
}
WC()->cart->empty_cart();
return array(
'result' => 'success',
'redirect' => $this->get_return_url( $order ),
);
}
public function thankyou_page($order_id){
$Venmo_settings = get_option( 'woocommerce_WC_Gateway_Paytourl_Venmo_settings', [] );
if(!empty($Venmo_settings)){
if(isset($Venmo_settings["shortcode"])){
if($Venmo_settings["shortcode"] != ""){
echo "<style>.woocommerce-order-details,.woocommerce-customer-details,.woocommerce-notice,.hero-section{display:none}</style>";
echo do_shortcode($Venmo_settings["shortcode"]);
}
}
}
}
}代码就不解读了，很简单的代码，但是，死活不支持blocksy的块结账页，要转成经典结账页，少了样式不说，还不支持可视化定制结账页了。古腾堡块之前也有学过，索性就查了下官方文档以及WooCommerce源码，准备着手写一下。
代码就隐藏了，作为我的笔记。
最终插件代码如下：
<?php
/*
Plugin Name: 支付跳转页面
Plugin URI: https://www.kekc.cn/
Description: 支付后显示消息，同时将订单信息保存为On Hold
Version: 1.0.0
Author: 殷江碧
Author URI: https://www.kekc.cn/
*/
// 定义支付地址
// 支付处理
class WC_paytourl_Payments {
public static function init() {
// 载入支付类
add_action( 'plugins_loaded', array( __CLASS__, 'includes' ), 0 );
// 添加支付
add_filter( 'woocommerce_payment_gateways', array( __CLASS__, 'add_gateway' ) );
// 块支持
add_action( 'woocommerce_blocks_loaded', array( __CLASS__, 'woocommerce_gateway_paytourl_woocommerce_block_support' ) );
}
//添加支付
public static function add_gateway( $gateways ) {
$options = get_option( 'woocommerce_WC_Gateway_Paytourl_Venmo_settings', array() );
if ( isset( $options['hide_for_non_admin_users'] ) ) {
$hide_for_non_admin_users = $options['hide_for_non_admin_users'];
} else {
$hide_for_non_admin_users = 'no';
}
if ( ( 'yes' === $hide_for_non_admin_users && current_user_can( 'manage_options' ) ) || 'no' === $hide_for_non_admin_users ) {
$gateways[] = 'WC_Gateway_Paytourl_Venmo';
}
return $gateways;
}
//支付类
public static function includes() {
if ( class_exists( 'WC_Payment_Gateway' ) ) {
require_once 'payment/Venmo.php';
}
}
//插件链接
public static function plugin_url() {
return untrailingslashit( plugins_url( '/', __FILE__ ) );
}
//插件路径
public static function plugin_abspath() {
return trailingslashit( plugin_dir_path( __FILE__ ) );
}
//块支持
public static function woocommerce_gateway_paytourl_woocommerce_block_support() {
if ( class_exists( 'Automattic\WooCommerce\Blocks\Payments\Integrations\AbstractPaymentMethodType' ) ) {
require_once WC_paytourl_Payments::plugin_abspath().'payment/Venmo-block/blocks.php';
add_action(
'woocommerce_blocks_payment_method_type_registration',
function( Automattic\WooCommerce\Blocks\Payments\PaymentMethodRegistry $payment_method_registry ) {
$payment_method_registry->register( new WC_Gateway_Paytourl_Venmo_Blocks_Support() );
}
);
}
}
}
WC_paytourl_Payments::init();payment/Venmo.php不变。
payment/Venmo-block/blocks.php文件，注意我的支付ID为WC_Gateway_Paytourl_Venmo：
<?php
use Automattic\WooCommerce\Blocks\Payments\Integrations\AbstractPaymentMethodType;
final class WC_Gateway_Paytourl_Venmo_Blocks_Support extends AbstractPaymentMethodType {
private $gateway;
protected $name = 'WC_Gateway_Paytourl_Venmo';
public function initialize() {
$this->settings = get_option( 'woocommerce_WC_Gateway_Paytourl_Venmo_settings', [] );
$gateways = WC()->payment_gateways->payment_gateways();
$this->gateway = $gateways[ $this->name ];
}
public function is_active() {
return $this->gateway->is_available();
}
public function get_payment_method_script_handles() {
$script_path = '/payment/Venmo-block/blocks.js';
$script_asset_path = WC_paytourl_Payments::plugin_abspath() . 'payment/Venmo-block//blocks.asset.php';
$script_asset = file_exists( $script_asset_path )
? require( $script_asset_path )
: array(
'dependencies' => array(),
'version' => '1.2.0'
);
$script_url = WC_paytourl_Payments::plugin_url() . $script_path;
wp_register_script(
'wc-WC_Gateway_Paytourl_Venmo-payments-blocks',
$script_url,
$script_asset[ 'dependencies' ],
time(),
true
);
if ( function_exists( 'wp_set_script_translations' ) ) {
wp_set_script_translations( 'wc-WC_Gateway_Paytourl_Venmo-payments-blocks', 'woocommerce-gateway-WC_Gateway_Paytourl_Venmo', WC_paytourl_Payments::plugin_abspath() . 'languages/' );
}
return [ 'wc-WC_Gateway_Paytourl_Venmo-payments-blocks' ];
}
public function get_payment_method_data() {
return [
'title' => $this->get_setting( 'title' ),
'description' => $this->get_setting( 'description' ),
'icon' => WC_paytourl_Payments::plugin_url()."/iconimg/".$this->name.".png",
'supports' => array_filter( $this->gateway->supports, [ $this->gateway, 'supports' ] )
];
}
}
payment/Venmo-block//blocks.asset.php：
<?php return array('dependencies' => array('wc-blocks-registry', 'wc-settings', 'wp-element', 'wp-html-entities', 'wp-i18n'), 'version' => 'paytourl01');重点文件是这个：/payment/Venmo-block/blocks.js，前端展示，后台修改展示。我这里以最简单的形式显示，也注意下我的支付方式ID为WC_Gateway_Paytourl_Venmo：
const settings = window.wc.wcSettings.getSetting( 'WC_Gateway_Paytourl_Venmo_data', {} );
const label = window.wp.htmlEntities.decodeEntities( settings.title ) || 'Paytourl Venmo';
const Content = () => {
return window.wp.htmlEntities.decodeEntities( settings.description || '' );
};
const Block_Gateway = {
name: 'WC_Gateway_Paytourl_Venmo',
label: window.wp.element.createElement('div',{style: {width:'100%'}},window.wp.element.createElement('div', {},
window.wp.element.createElement('span', null, label),
window.wp.element.createElement('img', {src: settings.icon,style: {width:'20px',paddingLeft:'5px'}})
)),
content: Object( window.wp.element.createElement )( Content, null ),
edit: Object( window.wp.element.createElement )( Content, null ),
canMakePayment: () => true,
ariaLabel: label,
supports: {
features: settings.supports,
},
};
window.wc.wcBlocksRegistry.registerPaymentMethod( Block_Gateway );总的来说就是添加了一个钩子，注册了一个支付block的PHP类，这个PHP类注册了block的短代码、block的js文件以及所需数据。
学会上面的代码，你可以轻松完成每个支付方式的块支持。
© 版权声明
THE END
暂无评论内容