1クリックで一気に決済ページに行く

例えばこんなケースがある！

WooCommerceで商品購入は1クリックで一気に決済ページに行きたい

ここで問題なのは「チェックアウトページにリダイレクト」？

＜解説＞

PayPay決済をするにはWooCommerce

1クリックで一気に決済ページに行くには、支払いリンク型のStripeなどを使えば簡単なのだが、 PayPay決済をするには開発当時「KOMOJU」を使うしかなく、 WooCommerceを導入するしかなかった。
「KOMOJU」以外にでもPayPayオンライン決済用プラグインが登場したようだが。結局WooCommerceが必要である。

＜実装方法＞

購入するボタンのリンク

購入するボタンのリンクには（?add-to-cart=20）のようにパラメータを追加する。
IDの「20」の部分は予めWooCommerceで商品登録をしたIDにする。

<a href="/shop/?add-to-cart=20" class="but1">注文する（¥12,000）</a>

クリックで一気に決済ページに行く

「商品が追加されたらカートを空にする」「カートに入れたらチェックアウトページにリダイレクト」などのコードをfunctions.phpまたはCode Snippetsに追加する。

//商品が追加されたらカートを空にする
add_filter('woocommerce_add_to_cart_validation', 'remove_cart_item_before_add_to_cart', 1, 3);
function remove_cart_item_before_add_to_cart($passed, $product_id, $quantity) {
	if (!WC()->cart->is_empty()) {
		WC()->cart->empty_cart();
	}
	return $passed;
}

//カートに入れたらチェックアウトページにリダイレクト
function tofu_add_to_cart_redirect( $url ) {
	$url = WC()->cart->get_checkout_url();
	return $url;
}
add_filter( 'woocommerce_add_to_cart_redirect', 'tofu_add_to_cart_redirect' );

//Added to cartメッセージ非表示
add_filter( 'wc_add_to_cart_message_html', '__return_false' );

//Thank You page by creating a Redirect
add_action( 'template_redirect', 'woo_custom_redirect_after_purchase' );
function woo_custom_redirect_after_purchase() {
	global $wp;
	if ( is_checkout() && !empty( $wp->query_vars['order-received'] ) ) {
		wp_redirect( '/thankyou/' );
		exit;
	}
}

【参照】
●カートをスキップ！クリック一つで一気に決済ページに行く方法 – WooCommerce
https://www.youtube.com/watch?v=_uQCajGiN5Q
https://drive.google.com/file/d/1iOrq21J97kyoxrZe4Df0u7WFrpxa9zwV/view

＜応用：決済ページのカスタマイズ＞

①入力項目の編集

決済（支払い）ページで不要や追加したい項目がある場合はプラグイン「Checkout Field Editor」を使ってカスタマイズすると大変便利である。
「Checkout Field Editor」はこちら

②注文するボタンの名称を変更する

決済ページの注文するボタンの名称は下記JSコードで変更できる。

//checkout.js
jQuery(function(){
	let target = document.getElementById('payment');
	const observer = new MutationObserver(records => {
		if (jQuery('#place_order')[0]) {
			let place_order = jQuery('#place_order').text();
			console.log("place_order="+place_order);
			if (place_order == "注文する") {
				jQuery('#place_order').addClass('ch');
			}
		}
	})
	observer.observe(target, {
		attributes: true,
		subtree: true,
	})
});

＜まとめ＞

WooCommerceだと「通常のカート経由決済」と「1クリック決済」の併用も可能なので導入して損はないだろう。