WooCommerceのStripeクレジットカード決済でブランドロゴを追加する

WooCommerceのStripe Gatewayプラグインでは、
デフォルトでVISA, Master, Amexの3種類のカードブランドしか表示されません。

というのも、基本的に通常版のアカウントでは、
この3つのブランドしか支払い対応してないからまあ当たり前ですよね。

でもじゃあ、別のブランドが追加されたとき、
このロゴも追加したいですよね。

なので追加してみました。

 

StripeアカウントにJCB, Dinersブランドの対応追加

基本的に、日本のStripeアカウントでは、
VISA, Master, Amexの3つのブランドがデフォです。

ホームページには、JCB、Diners等も対応と書いてるんですけどね。

デフォでは対応してないです。
これら以外のブランドを使用したい場合は、Stripeにベータ版として特別に招待して貰う必要があります。

EIKING
まあそのうち全部デフォになると思うけどね。アメリカみたいに。

で、今回やってもらったのは、

  • JCB
  • Diners
  • DISCOVER

上記ブランドの追加対応です。

現在うちのダンボール屋さん(danboring.com)ではすでに対応済です。

 

なぜロゴを追加しないといけないのか

もちろん対応したカードブランドは表示しておいたほうが離脱率は下がりますよね。

普通にJCBカードしか持ってない人が、
決済画面まできて、JCB使えないの知ったら離脱する確率は高いですよね。

それを防ぐために、対応してるブランドロゴは全て追加しておくことが無難です。

 

決済画面でのブランドロゴ追加方法

今回はプラグインファイルを直接いじります。

というのもfunction.phpを弄る方法もあるみたいなんですが、
php初心者というか、そもそも開発なんて全くやったことないけど、
WooCommerceはいじってますイエイ!みたいな人向けです。

僕でもできたのでまあ簡単なはずです。

 

編集するphpファイルを選択

WordPress管理画面にて、

プラグイン > プラグインの編集
から、編集する「WooCommerce Stripe Gateway」プラグインを選択し、
class-wc-gateway-stripe.phpを選択します。

 

class-wc-gateway-stripe.php内コードの書き換え

193行目あたり(これはプラグインの更新で変わるかも)から、

    /**
     * Get_icon function.
     *
     * @since 1.0.0
     * @version 4.0.0
     * @return string
     */
    public function get_icon() {
        $icons = $this->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'];
        }

        if ( $this->bitcoin && $this->stripe_checkout ) {
            $icons_str .= $icons['bitcoin'];
        }

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

こういうのがあると思います。

目印はコメントアウトの「Get_icon function」かな。
これの、

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

 

を下記のように書き換えます。

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

 

保存して完了!

 

決済画面にてカードブランドが追加されました

これで、実際の決済画面をみてみましょう。

以前がこんな感じでした。

これが、下記のようになりました。

EIKING
いい感じやん!

 

プラグインの更新時は注意

プラグインのアップデートがあった場合は、必ず編集したファイルを確認しましょう。

おそらく上書きされてるので、
編集した部分は元通りになってると思います。

そのためにも、
「編集した部分」のバックアップは保持しておきましょう。

なぜphpファイルではなく、「編集した部分」のほうがいいのか。

それは、実際プラグインのアップデートによって、
編集した部分以外のところが新しくなってることもあるからです。

そうなるとファイルごと元にもどすとバグの原因になります故に。

システム開発の無料相談受け付けています


現場を理解したシステム開発が得意技。

これまで、EC支援システムをメインに、PRIMAやlismoaの開発に携わってきました。

EC販売とシステム開発両方に精通した私たちillustriousにお任せください。
漠然とした相談でもかまいません、ご相談全て私EIKINGが対応します。

EIKING
記事に関する質問や相談は、LINE@でお気軽にどうぞやで
line

ABOUTこの記事をかいた人

1985年生まれ、愛媛県出身東京都在住。26歳で起業し、現在は商品開発及び直販・システム開発・仮想通貨(暗号通貨)関連の事業を行う会社を2社経営。 ”遊ぶために働く、働くために遊ぶ”の相乗効果がパフォーマンスの高い人生を実現できる方法と信じ、日々死ぬほど働き、死ぬほど遊んでいる。 趣味はフェス・ライブ観戦(主にBABYMETAL)、麻雀、旅行。 このブログでは、自身が経験したタメになったことや、自信の考えをビジネス・遊び関係なしで配信中。