埋め込み可能な購入ボタンを作成する
Payment Links を使用して、ウェブサイトに埋め込み可能な購入ボタンを作成します。
ウェブサイトで商品やサブスクリプションの販売と決済の受け付けを行う埋め込み可能な購入ボタンを作成します。まず、Payment Links のリストビューから既存のリンクを選択するか、販売する商品決定して決済 UI をカスタマイズできる新しいリンクを作成します。リンクを作成したら、購入ボタンをクリックして購入ボタンのデザインを設定し、コピーしてウェブサイトに貼り付けることができるコードを生成します。
ボタンをカスタマイズする
デフォルトでは、決済フォームへのリンクに設定されているブランディングと行動喚起が購入ボタンに適用されます。
- シンプルなボタンとカードウィジェットから選択します。
- ウェブサイトに合ったブランドカラー、形状、フォントを設定します。
- ウェブサイトの言語に合わせてボタンと決済ページの言語を設定します。
- ボタンの行動喚起をカスタマイズします。
購入ボタンをカスタマイズする
ボタンを埋め込む
Stripe は、<script> タグと <stripe-buy-button> ウェブコンポーネントで構成された埋め込みコードを提供します。コードをコピーをクリックして、コードをコピーし、ウェブサイトに貼り付けます。
HTML を使用している場合は、HTML に埋め込みコードを貼り付けます。React を使用している場合は、index. ページに script タグを含めて <stripe-buy-button> コンポーネントをマウントします。
注意
購入ボタンはアカウントの公開可能な API キーを使用します。API キーを取り消す場合は、埋め込みコードを新しい公開可能な API キーで更新する必要があります。
決済をカスタマイズする属性
| パラメーター | 説明 | 構文 |
|---|---|---|
client-reference-id | client-reference-id を使用して、Checkout セッションに任意に選択した一意の文字列を関連付けます。 文字列には顧客 ID やカート ID (または同様のもの) を指定でき、お客様の内部システムでセッションの照合に使用します。このパラメーターを <stripe-buy-button> に渡すと、支払いの完了時に checkout.session.completed Webhook に含めて送信されます。 | client-reference-id には、英数字、ダッシュ、アンダースコアを含む、最大 200 文字までの任意の値を指定することができます。無効な値は通知なく破棄されますが、決済ページは引き続き正常に機能します。 |
customer-email | customer-email を使用して、決済ページでメールアドレスを事前入力します。このプロパティが設定されている場合、購入ボタンは、それを Checkout セッションの customer_属性に渡します。決済ページで顧客がメールアドレスを編集することはできません。 | customer-email は、有効なメールアドレスにする必要があります。無効な値は通知なく破棄されますが、決済ページは引き続き正常に機能します。 |
customer-session-client-secret | customer-session-client-secret を使用して、既存の Customer オブジェクトを渡します。詳細については、以下のセクションを参照してください。 | customer-session-client-secret の値は、client_secret から生成する必要があります。 |
既存の顧客を渡す
既存の Customer オブジェクトを、購入ボタンで作成された Checkout セッションに指定することができます。すでにサーバー側で認証したユーザーの Customer セッションを作成して、クライアントに client_secret を返します。
<stripe-buy-button> ウェブコンポーネントで customer-session-client-secret 属性を Customer セッションの client_secret に設定します。
注
client_secret は 30 分以内に指定する必要があります。クライアントシークレットの指定後、Customer セッションは 30 分後に有効期限が切れます。購入ボタンによって作成された Checkout セッションは失敗します。クライアントシークレットはキャッシュせず、購入ボタンを表示するたびに新しいものを生成してください。
コンテンツセキュリティポリシー
コンテンツセキュリティポリシーをデプロイしている場合、購入ボタンに以下のようなポリシーディレクティブが必要となります。
- frame-src、https://js.stripe.com
- script-src、https://js.stripe.com
制限事項
購入ボタンを表示するには、ウェブサイトのドメインが必要です。購入ボタンをローカルでテストするには、ローカル HTTP サーバーを実行し、localhost ドメインでウェブサイトの index. ファイルをホストします。ローカル HTTP サーバーを実行するには、Python の SimpleHTTPServer または http-server npm モジュールを使用します。
支払いを追跡する
顧客が決済用のリンクを使用して支払いを行った後、ダッシュボードの支払いの概要で確認できます。
Stripe を初めて利用する場合、最初の支払いの後にメールが届きます。成功した支払いに関するメールを受け取るようにするには、個人情報設定で通知設定を更新します。
Stripe は、サブスクリプションを販売する際、または将来に備えて支払い情報を保存する際には、1 回限りの支払いのための新しいゲスト顧客 と新しい Customer (顧客) を作成します。
支払い後の、購入ボタンや決済用のリンクの動作を設定する方法などについて、決済用の URL リンクでの支払い後の処理の詳細をご確認ください。