WooCommerceのストライプカード決済にJCBアイコンを表示させる

2019年5月5日2020年12月20日

WEB制作

ECサイト人気No1のWooCommerceで最も良く用いられるストライプカード決済。

アカウント作成と銀行口座の登録、本人確認書類のアップロードのみで即日利用可能。
そして決済利用料も安いので決済ゲートウェイとして非常に人気があり、ウチのお客さんもカード決済はほとんどストライプ決済を選択・導入されています。

そんなストライプですが標準で対応しているのはVISA,MASTER,AMEXのみ。

国内でそれなりのシェアがあるJCBを利用するには別途審査が必要になります。
JCBはシェアもそんなに高くないのでマストではありませんが、やはり決済の間口は広げたいもの。

審査には特定商取引法に基づく表記のページが必要で、禁止された商品でなければ殆どの場合約1ヶ月程度で承認がおります。

承認後は特に何もしなくてもJCBのカード決済が可能になりますが、決済時に表示されるアイコンはVISA,MASTER,AMEXのまま。

この決済画面にJCBアイコンを追加する方法。

（WooCommerce Stripe Gateway 4.1.9 で確認）

プラグインファイルをカスタマイズ

以下のプラグインファイルを直接編集します。
wp-content/plugins/woocommerce-gateway-stripe/includes/class-wc-gateway-stripe.php

編集前

/**
	 * Get_icon function.
	 *
	 * @since 1.0.0
	 * @version 4.0.0
	 * @return string
	 */
	public function get_icon() {
		$icons = $this-&gt;payment_icons();

		$icons_str = '';

		$icons_str .= $icons['visa'];
		$icons_str .= $icons['amex'];
		$icons_str .= $icons['mastercard'];

		if ( 'USD' === get_woocommerce_currency() ) {
			$icons_str .= $icons['discover'];
			$icons_str .= $icons['jcb'];
			$icons_str .= $icons['diners'];
		}

		return apply_filters( 'woocommerce_gateway_icon', $icons_str, $this-&gt;id );
	}

編集後

	/**
	 * Get_icon function.
	 *
	 * @since 1.0.0
	 * @version 4.0.0
	 * @return string
	 */
	public function get_icon() {
		$icons = $this-&gt;payment_icons();

		$icons_str = '';

		$icons_str .= $icons['discover'];
		$icons_str .= $icons['diners'];
		$icons_str .= $icons['amex'];
		$icons_str .= $icons['jcb'];
		$icons_str .= $icons['mastercard'];
		$icons_str .= $icons['visa'];

		if ( 'USD' === get_woocommerce_currency() ) {
			$icons_str .= $icons['discover'];
			$icons_str .= $icons['jcb'];
			$icons_str .= $icons['diners'];
		}

		return apply_filters( 'woocommerce_gateway_icon', $icons_str, $this-&gt;id );
	}

こんな感じになりました。

尚このカスタマイズはプラグインのアップデートで上書きされてしまいます。
アップデート後は再度同じカスタムが必要となります。

プラグインファイルを改変しないでfunctions.phpのフィルターフックを使う方法

支払い方法がクレジットカードのみのサイトは以下のコードをfunctions.phpに追記してアイコンを変更することが可能です。

function replace_icon( $icon_html, $id ) {
    $icon_html = '<img src="https://..." alt="" />'; //ここにアイコンファイルのhtml

    return $icon_html;
}
add_filter( 'woocommerce_gateway_icon', 'replace_icon', 10, 2 );

こちらの方法はプラグインのアップデートに左右されないのですが、銀行振り込みなど他の支払い方法のアイコンまで変わってしまうので、その場合は支払いゲートウェイIDを指定する（＄id）などもうひと工夫が必要といったところ。

プラグインのJCBの正式サポートまでのつなぎ＆忘備録として。