【Stripe限定】ワードプレスのEC決済プラグイン（WooCommerce）でJCBのアイコンを追加する方法

ワードプレスにネットショップ機能を盛り込めるプラグイン「WooCommerce（ウーコマース）」。現在運営中のウェブサイト内へ導入できるかどうかは適用しているテーマ側がWooCommerceに対応しているかどうかによって異なります。ネットショップ運営を想定しているテーマであれば対応しています。

ワードプレスのEC決済プラグイン（WooCommerce）でJCBのアイコンを追加する方法

クレジットカード決済時のアイコン表記は「/wp-content/plugins/woocommerce-gateway-stripe/includes」で管理されています。該当ファイルは「class-wc-gateway-stripe.php」です。

各クレジットカード会社のアイコンも上記のphpファイルのなかで指定されています。元々の状態ではビザとマスターとアメックスのアイコンしか表示されません。記述ソースが下記（200行目あたり）です。

public function get_icon() {
	$icons = $this->payment_icons();

	$icons_str = '';

	$icons_str .= isset( $icons['visa'] ) ? $icons['visa'] : '';
	$icons_str .= isset( $icons['mastercard'] ) ? $icons['mastercard'] : '';
	$icons_str .= isset( $icons['amex'] ) ? $icons['amex'] : '';

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

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

手を加える前のアイコン表示は以下です。

関数の中身を見ると「条件分岐」でドル（USD）決済の場合のみ「JCB」が表示される仕様になっていますね。ちなみに最新のStripeではアカウント開設直後から「JCBに対応」しています。もしアカウントを開設した時期が最近でなければJCBには非対応です。状況に合わせて臨機応変に対応していきましょう。

JCBアイコンを追加するカスタマイズ

マスターとアメックスの間にJCBを追加いたしました。

public function get_icon() {
	$icons = $this->payment_icons();

	$icons_str = '';

	$icons_str .= isset( $icons['visa'] ) ? $icons['visa'] : '';
	$icons_str .= isset( $icons['mastercard'] ) ? $icons['mastercard'] : '';
	$icons_str .= isset( $icons['jcb'] ) ? $icons['jcb'] : '';
	$icons_str .= isset( $icons['amex'] ) ? $icons['amex'] : '';

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

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

実際にアイコンを追加した状態が下記です。

表示させるクレジットカード銘柄（アイコン）のカスタマイズはどうしても後回しになってしまいますが、どのカードが使えるかを明記しておくことで利用ユーザーを迷わせる可能性も少し低くなりますね。

なお、JCBにはDicoverとダイナースも含まれるのでアイコンを６つにしてもOKです。このあたりはどこまで連携できているか等の裏側の設定と好みも絡んできます。どこまで表示するかのカスタマイズは自由です。

public function get_icon() {
	$icons = $this->payment_icons();

	$icons_str = '';

	$icons_str .= isset( $icons['visa'] ) ? $icons['visa'] : '';
	$icons_str .= isset( $icons['mastercard'] ) ? $icons['mastercard'] : '';
	$icons_str .= isset( $icons['jcb'] ) ? $icons['jcb'] : '';
	$icons_str .= isset( $icons['discover'] ) ? $icons['discover'] : '';
	$icons_str .= isset( $icons['diners'] ) ? $icons['diners'] : '';
	$icons_str .= isset( $icons['amex'] ) ? $icons['amex'] : '';

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

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

以下が６つ表示させた例です。順番を入れ替える場合は差し込むソースの順番を入れ替えるだけです。

まとめ

本日はクレジットカードの銘柄表示を追加するカスタマイズを解説いたしました。お支払い方法という面では他にもApple Pay（アップルペイ）やAlipay（アリペイ）などさまざまな方法がありますので対応先を増やすのであれば随時対策を行なっていきましょう。当たり前ですが、ただアイコンを追加するだけで決済会社との連携が完了するわけではありません。VISAとMasterで大体は事足りるので無理して対応幅を広げる必要もないですがサイト運営を充実させていく場合は随時対応していきましょう。対応後はアイコンの追加も忘れずに。