# 埋め込み可能な購入ボタンを作成する Payment Links を使用して、ウェブサイトに埋め込み可能な購入ボタンを作成します。ウェブサイトで商品やサブスクリプションの販売と決済の受け付けを行う埋め込み可能な購入ボタンを作成します。まず、[Payment Links のリストビュー](https://dashboard.stripe.com/payment-links)から既存のリンクを選択するか、販売する商品決定して決済 UI をカスタマイズできる[新しいリンクを作成](https://dashboard.stripe.com/payment-links/create)します。リンクを作成したら、**購入ボタン**をクリックして購入ボタンのデザインを設定し、コピーしてウェブサイトに貼り付けることができるコードを生成します。 ## ボタンをカスタマイズするデフォルトでは、決済フォームへのリンクに設定されているブランディングと行動喚起が購入ボタンに適用されます。 - シンプルなボタンとカードウィジェットから選択します。 - ウェブサイトに合ったブランドカラー、形状、フォントを設定します。 - ウェブサイトの言語に合わせてボタンと決済ページの言語を設定します。 - ボタンの行動喚起をカスタマイズします。 ![購入ボタンをカスタマイズする](https://b.stripecdn.com/docs-statics-srv/assets/buy-button-card-layout.4003c3e9ffe3ce4378092dbdcd456ed9.png) 購入ボタンをカスタマイズする ## ボタンを埋め込む Stripe は、` ``` ## 決済をカスタマイズする属性 | パラメーター | 説明 | 構文 | | --- | --- | --- | | `client-reference-id` | `client-reference-id` を使用すると、任意に選択した一意の文字列を `CheckoutSession` に関連付けることができます。この文字列には、顧客 ID、カート ID、またはそれに類する値を指定でき、内部システムで `CheckoutSession` を照合する際に使用できます。このパラメーターを `` に渡すと、決済完了時に [checkout.session.completed webhook](https://docs.stripe.com/api/events/types.md#event_types-checkout.session.completed) で送信されます。 | `client-reference-id` には、英数字、ダッシュ、アンダースコアを含む、最大 200 文字までの任意の値を指定することができます。無効な値は通知なく破棄されますが、決済ページは引き続き正常に機能します。 | | `customer-email` | `customer-email` を使用すると、決済画面のメールアドレスを事前入力できます。このプロパティが設定されている場合、購入ボタンはその値を `CheckoutSession` の `customer_email` 属性に渡します。顧客は決済画面でメールアドレスを編集できません。 | `customer-email` は、有効なメールアドレスにする必要があります。無効な値は通知なく破棄されますが、決済ページは引き続き正常に機能します。 | | `customer-session-client-secret` | `customer-session-client-secret` を使用すると、[既存の顧客を渡せます](https://docs.stripe.com/payment-links/buy-button.md#pass-an-existing-customer)。 | `customer-session-client-secret` の値は、[client_secret](https://docs.stripe.com/api/customer_sessions/object.md#customer_session_object-client_secret) から生成する必要があります。 | ## 既存の顧客を渡せます > #### Accounts v2 API を使用した顧客の表現 > > Accounts v2 API では、Connect ユーザーには一般提供され、その他の Stripe ユーザーには公開プレビューで提供されます。Accounts v2 プレビューの一部である場合は、コードで[プレビューバージョン](https://docs.stripe.com/api-v2-overview.md#sdk-and-api-versioning)を指定する必要があります。 > > Accounts v2 のプレビューに参加するには、ダッシュボードの [Account previews and features](https://dashboard.stripe.com/settings/previews) に移動して、**Global Payouts の再利用可能な決済手段**を有効にします。 > > ほとんどのユースケースでは、[Customer](https://docs.stripe.com/api/customers.md) オブジェクトを使用するのではなく、[顧客を顧客設定済みの Account オブジェクトとしてモデル化する](https://docs.stripe.com/accounts-v2/use-accounts-as-customers.md)ことをお勧めします。 #### Accounts v2 購入ボタンから作成された `CheckoutSessions` に、既存の [customer-configured Account](https://docs.stripe.com/api/v2/core/accounts/object.md#v2_account_object-configuration-customer) オブジェクトを指定できます。サーバーで顧客を認証し、その顧客用の `CustomerSession` を作成して、[client_secret](https://docs.stripe.com/api/customer_sessions/object.md#customer_session_object-client_secret) をクライアントに返します。 ```curl curl https://api.stripe.com/v1/customer_sessions \ -u "<>:" \ -d "customer_account={{CUSTOMERACCOUNT_ID}}" \ -d "components[buy_button][enabled]=true" ``` #### Customer v1 購入ボタンから作成された [Customer](https://docs.stripe.com/api/customers.md) オブジェクトを既存の `CheckoutSessions` に指定できます。サーバー側で顧客を認証し、その顧客の `CustomerSession` を作成して、[client_secret](https://docs.stripe.com/api/customer_sessions/object.md#customer_session_object-client_secret) をクライアントに返します。 ```curl curl https://api.stripe.com/v1/customer_sessions \ -u "<>:" \ -d "customer={{CUSTOMER_ID}}" \ -d "components[buy_button][enabled]=true" ``` `` ウェブコンポーネントに、CustomerSession の [client_secret](https://docs.stripe.com/api/customer_sessions/object.md#customer_session_object-client_secret) を `customer-session-client-secret` 属性として設定します。 [client_secret](https://docs.stripe.com/api/customer_sessions/object.md#customer_session_object-client_secret) は 30 分以内に指定する必要があります。client secret を指定してから、`CustomerSession` の有効期限が切れるまでさらに 30 分あります。有効期限が切れると、購入ボタンは `CheckoutSessions` を作成できなくなります。 client secret はキャッシュしないでください。代わりに、購入ボタンをレンダリングするたびに新しいものを生成してください。 #### HTML ```html ``` ## コンテンツセキュリティポリシー [コンテンツセキュリティポリシー](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP)をデプロイしている場合、購入ボタンに以下のようなポリシーディレクティブが必要となります。 - frame-src、https://js.stripe.com - script-src、https://js.stripe.com ## 制限事項購入ボタンを表示するには、ウェブサイトのドメインが必要です。購入ボタンをローカルでテストするには、ローカル HTTP サーバーを実行し、localhost ドメインでウェブサイトの `index.html` ファイルをホストします。ローカル HTTP サーバーを実行するには、Python の [SimpleHTTPServer](https://developer.mozilla.org/en-US/docs/Learn/Common_questions/set_up_a_local_testing_server#running_a_simple_local_http_server) または [http-server](https://www.npmjs.com/package/http-server) npm モジュールを使用します。 ## 支払いを追跡する顧客が決済用のリンクを使用して支払いを行った後、ダッシュボードの[支払いの概要](https://dashboard.stripe.com/payments)で確認できます。 Stripe を初めて使用する場合は、最初の決済の後にメールが届きます。成功したすべての決済に関するメールを受け取るには、[Personal details](https://dashboard.stripe.com/settings/user) 設定で通知設定を更新してください。サブスクリプションを販売している場合、または将来の使用に備えて[決済手段を保存](https://docs.stripe.com/payment-links/customize.md#save-payment-details-for-future-use)していて、既存の顧客を指定していない場合、決済セッションは新しい[顧客](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-customer_creation)を作成します。1 回限りの決済の場合、決済セッションは代わりに[ゲスト顧客](https://docs.stripe.com/payments/checkout/guest-customers.md)を使用します。支払い後の、購入ボタンや決済用のリンクの動作を設定する方法などについて、[決済用の URL リンクでの支払い後](https://docs.stripe.com/payment-links/post-payment.md)の処理の詳細をご確認ください。