WooCommerce支付方式块支持

011913

在之前的文章中，我写过如何开发一个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文件以及所需数据。

学会上面的代码，你可以轻松完成每个支付方式的块支持。

© 版权声明
文章版权声明 1、本网站名称：KEKC博客
2、本站网址：https://www.kekc.cn
3、本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长QQ2551654928进行删除处理。
4、本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报

THE END
WooCommerce
喜欢就支持一下吧
点赞13 分享
KEKC的头像-KEKC博客
解决deepl不给白嫖-KEKC博客
解决deepl不给白嫖
解决deepl不给白嫖
2年前 8681
子比主题附加组件-KEKC博客
子比主题附加组件
子比主题附加组件
2年前 7102
子比主题附加组件重构版插件-KEKC博客
子比主题附加组件重构版插件
子比主题附加组件重构版插件
2年前 5758
收集的15个QQ机器人框架源码-KEKC博客
收集的15个QQ机器人框架源码
收集的15个QQ机器人框架源码
2年前 4907
子比主题美化插件全开源版-KEKC博客
子比主题美化插件全开源版
子比主题美化插件全开源版
1年前 3646
学习通自动签到&极速抢答神器下载-KEKC博客
学习通自动签到&极速抢答神器下载
学习通自动签到&极速抢答神器下载
4年前 3573
相关推荐
WooCommerce产品页浮动“添加到购物车（Add to cart）”按钮-KEKC博客
WooCommerce产品页浮动“添加到购物车（Add to cart）”按钮
WooCommerce产品页浮动“添加到购物车（Add to cart）”按钮
11个月前 207
WooCommerce支付方式（支付网关）开发-KEKC博客
WooCommerce支付方式（支付网关）开发
WooCommerce支付方式（支付网关）开发
11个月前 179
woocommerce通过钩子更改产品目录中的默认排序方式-KEKC博客
woocommerce通过钩子更改产品目录中的默认排序方式
woocommerce通过钩子更改产品目录中的默认排序方式
8个月前 178
将《清除购物车按钮》添加到购物车页面和迷你购物车-KEKC博客
将《清除购物车按钮》添加到购物车页面和迷你购物车
将《清除购物车按钮》添加到购物车页面和迷你购物车
11个月前 175
woocommerce自定义产品的选项卡-KEKC博客
woocommerce自定义产品的选项卡
woocommerce自定义产品的选项卡
11个月前 168
WooCommerce根据用户是登录还是注销来显示/隐藏产品。-KEKC博客
WooCommerce根据用户是登录还是注销来显示/隐藏产品。
WooCommerce根据用户是登录还是注销来显示/隐藏产品。
11个月前 166
评论 抢沙发
头像
欢迎您留下宝贵的见解！
提交
头像

昵称

取消
昵称

请填写用户信息：

  • 昵称(必填)
  • 邮箱(必填)
常用语
请选择评论常用语：
  • 1、谢谢博主分享！
  • 2、博主NB，666
  • 3、感谢楼主分享！
  • 4、感谢大佬分享！
  • 5、教程很好用，谢谢！
 夸夸
夸夸
还有吗！没看够！
表情
[aoman][baiyan][bishi][bizui][cahan][ciya][dabing][daku][deyi][doge][fadai][fanu][fendou][ganga][guzhang][haixiu][hanxiao][zuohengheng][zhuakuang][zhouma][zhemo][zhayanjian][zaijian][yun][youhengheng][yiwen][yinxian][xu][xieyanxiao][xiaoku][xiaojiujie][xia][wunai][wozuimei][weixiao][weiqu][tuosai][tu][touxiao][tiaopi][shui][se][saorao][qiudale][qinqin][qiaoda][piezui][penxue][nanguo][liulei][liuhan][lenghan][leiben][kun][kuaikule][ku][koubi][kelian][keai][jingya][jingxi][jingkong][jie][huaixiao][haqian][aini][OK][qiang][quantou][shengli][woshou][gouyin][baoquan][aixin][bangbangtang][xiaoyanger][xigua][hexie][pijiu][lanqiu][juhua][hecai][haobang][caidao][baojin][chi][dan][kulou][shuai][shouqiang][yangtuo][youling]
代码

请输入代码：

确认
图片

    暂无评论内容

随机文章

1自己写的域名停靠页面

2WooCommerce根据Tag实现增加运费

3【投稿】微软Azure,奸商,Azure微软Azure奸商开号教程

4【投稿】2020最新联通扫号软件，可扫各类套餐手机靓号

5新版微博热搜api

6中国地图省份板块超链接