Stripe Payment LinksでGoogle PayやApple Payのボタンが表示されない問題を解決する方法

こんにちは、みなさん。オンライン決済のシステムを構築する際に、手軽に利用できるStripeはとても便利ですよね。特にStripeのPayment Links機能を使えば、複雑なコードを書くことなく、支払いページを簡単に生成できます。しかし、時々「Google Pay」や「Apple Pay」のボタンが表示されない問題に直面することがあります。今日は、その原因と解決策を具体的なコード例を交えて分かりやすく解説していきたいと思います。

では早速、なぜこの問題が発生するのかを見ていきましょう。

Google PayやApple Payが表示されない原因

Stripe Payment LinksでGoogle PayやApple Payが表示されない原因はいくつか考えられます。まず、大前提として以下の条件が満たされている必要があります。

1. Google PayとApple Payが有効になっているか

Google PayやApple Payは、Stripeダッシュボードで適切に有効化されている必要があります。

Google Payは、ブラウザがGoogle Payをサポートしている必要があります（ChromeやAndroidデバイスでの利用が一般的です）。
Apple Payは、Safariブラウザ上で動作します。また、Appleデバイス（iPhone、iPad、Mac）での利用が前提となります。

2. ドメインの認証

Apple Payは、特にセキュリティが厳しく、SSL証明書を使用したHTTPS接続が必要です。また、StripeアカウントでApple Payを使用する際、ドメインを事前に認証する必要があります。この手順をスキップしていると、Apple Payのボタンが表示されません。

3. 支払い方法の設定

StripeのPayment Linksで利用可能な支払い方法として、Google PayやApple Payが設定されているかを確認します。

4. ブラウザやデバイスの対応

Google Payは、Chromeブラウザでのみ動作し、Apple PayはSafariでのみ表示されます。これらに対応していないブラウザではボタンが表示されないことがあります。

では、これらの前提条件を確認した上で、次に実際の解決方法について見ていきます。

具体的な解決策

1. Google PayとApple Payを有効化する

StripeダッシュボードでGoogle PayとApple Payを有効化しているか確認することが最初のステップです。

Stripeダッシュボードでの設定方法:

ダッシュボードにログインします。
支払い方法の設定ページに移動し、「Apple Pay」や「Google Pay」を有効にします。
Apple Payを有効にする際は、ドメインを登録する必要があります。
Apple Payのドメイン登録手順は次のとおりです：
- ダッシュボードの「Payments」→「Apple Pay」のセクションで「新しいドメインを追加」をクリックします。
- 自分のウェブサイトのドメインを入力し、Stripeから提供される認証ファイルをダウンロードして、ウェブサーバーの指定された場所にアップロードします。

これで、Apple Payがウェブサイトで利用できるようになります。

2. Payment Linksの支払い方法を確認

次に、Google PayやApple Payが含まれている支払い方法がPayment Linksに正しく設定されているか確認しましょう。

支払い方法の確認と設定方法:

ダッシュボードでPayment Linksを作成または編集します。
支払い方法の設定画面で、Google PayとApple Payが選択されているかを確認します。

Stripeでは、デフォルトで主要なクレジットカードやGoogle Pay、Apple Payが選択されるはずですが、必要に応じて設定をカスタマイズできます。

3. ドメイン認証（Apple Payの場合）

Apple Payの特別な要件として、使用するドメインの認証が必要です。ドメイン認証を完了していない場合、Apple Payのボタンが表示されません。以下の手順でドメインを認証します。

ドメインの認証手順:

Stripeダッシュボードの「Apple Pay」のセクションで「ドメインの管理」を選択。
認証用ファイルを取得し、それを指定のURLにアップロード。
認証プロセスが完了すると、Apple Payが利用できるようになります。

これを行うことで、Apple Payが正常に機能するはずです。

サンプルコードで確認

では、次に実際のStripe Payment Linksを使用して、Google PayとApple Payのボタンを表示させるための具体的なコードを見てみましょう。

HTMLでの実装例

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Stripe Payment LinksでのGoogle Pay & Apple Pay</title>
</head>
<body>
    <h1>Stripe Payment Linksの例</h1>
    <p>以下のボタンを使ってGoogle PayやApple Payで支払いを行うことができます。</p>

    <!-- Stripe Payment Linkを埋め込む -->
    <a href="https://buy.stripe.com/test_XXXXXX" id="payment-link">Pay with Stripe</a>

    <script src="https://js.stripe.com/v3/"></script>
    <script>
        document.getElementById('payment-link').addEventListener('click', function(event) {
            event.preventDefault();
            var stripe = Stripe('pk_test_XXXXXX'); // あなたの公開可能キーに置き換えてください
            stripe.redirectToCheckout({
                sessionId: 'cs_test_XXXXXX' // セッションIDに置き換えてください
            }).then(function (result) {
                if (result.error) {
                    alert(result.error.message);
                }
            });
        });
    </script>
</body>
</html>

このコードは、Google PayやApple Payを含むPayment Linkをクリックしたときに、正しい支払いページにリダイレクトするシンプルな例です。

実行結果

実際にこのコードを適切なStripe公開キーとセッションIDで動作させると、以下のような結果が得られます。

Google Chromeブラウザでアクセスしている場合：Google Payボタンが表示され、クリックするとGoogle Payの支払い画面に進みます。
Safariブラウザでアクセスしている場合：Apple Payボタンが表示され、Apple Payの支払い画面に進みます。
その他のブラウザ：Google PayやApple Payのボタンが表示されない場合がありますが、クレジットカードによる支払いオプションは引き続き利用可能です。

まとめ

Stripe Payment LinksでGoogle PayやApple Payのボタンが表示されない問題に遭遇した場合、まずは以下のポイントを確認することが重要です。

Google PayとApple PayがStripeダッシュボードで有効化されているか。
ドメインがApple Payの認証要件を満たしているか（SSL証明書やドメインの認証が必要）。
使用しているブラウザやデバイスがGoogle PayやApple Payに対応しているか。

これらの条件を満たすことで、Google PayやApple Payのボタンが正常に表示され、顧客にシームレスな支払い体験を提供できます。Payment Linksは簡単に設定できる反面、こういった細かい設定が必要になる場合があるため、注意深く確認してみてください。

もしこの記事が役に立ったと感じたら、ぜひシェアやコメントでお知らせくださいね。次回もStripe関連のトピックについて解説していきますので、お楽しみに！