Set up payment

# Kakao Pay で支払いの事前設定を行う Kakao Pay を保存し、後で顧客に請求する方法をご紹介します。 # Checkout > This is a Checkout for when payment-ui is checkout. View the full page at https://docs.stripe.com/payments/kakao-pay/set-up-future-payments?payment-ui=checkout. > Kakao Pay はシンガポールでは利用できません。 Stripe が全面的にホストする決済ページである [Checkout](https://docs.stripe.com/payments/checkout.md) を使用して、Kakao Pay の支払い情報を保存します。 [Kakao Pay サブスクリプションを設定](https://docs.stripe.com/billing/subscriptions/kakao-pay.md)し、Checkout で支払い方法を保存した後に継続支払いを作成する方法をご紹介します。 ## Stripe を設定する [サーバー側] まず、Stripe アカウントが必要です。[今すぐご登録ください](https://dashboard.stripe.com/register)。アプリケーションから Stripe API にアクセスするには、Stripe の公式ライブラリを使用してください。 #### Ruby ```bash # Available as a gem sudo gem install stripe ``` ```ruby # If you use bundler, you can add this line to your Gemfile gem 'stripe' ``` ## KaKao Pay を支払い方法として保存する権限を取得 [サーバー側] 将来の使用に備えて顧客の支払い方法を保存する許可を得る必要があります。あらかじめ契約 (同意書とも呼ばれます) を作成しておくことで、顧客の支払い情報を保存し、顧客がウェブサイトやアプリを能動的に使用していないときでも請求できるようになります。顧客の支払い方法がどのように保存されるかを示す規約をウェブサイトやアプリに追加し、顧客が許可できるようにします。顧客がオフライン時に請求する予定である場合は、規約に以下の内容も含める必要があります。 - 貴社が指定された取引で顧客の代理として単独の支払いまたは一連の支払いを開始するための、顧客による許可 - 予想される支払いの頻度 (1 回限りまたは継続) とタイミング - 支払い金額の決定方法 - キャンセルに関するポリシー (サブスクリプションサービスに使用される支払い方法を設定する場合) これらの規約への顧客の書面による同意の記録を保管し、同意された規約に従ってのみ支払いを送信してください。 ## Customer を作成または取得する [サーバー側] 今後の支払いで Kakao Pay 支払い方法を再利用できるようにするには、これを *Customer* (Customer objects represent customers of your business. They let you reuse payment methods and give you the ability to track multiple payments) に関連付けます。顧客がビジネスでアカウントを作成する際に、[Customer (顧客) オブジェクト](https://docs.stripe.com/api/customers.md)を作成して、この Customer オブジェクトの ID を、顧客を表す自社の内部表記と関連付けます。あるいは、将来の支払いに備えて支払い方法を保存する前に、新しい Customer を作成することもできます。 ```curl curl https://api.stripe.com/v1/customers \ -u "<>:" \ --data-urlencode "description=My First Test Customer (created for API docs)" ``` ## Checkout セッションを作成する [サーバー側] 顧客は、Stripe Checkout を通じて、今後の決済に NICEPAY アカウントを使用することを承認する必要があります。これにより、Kakao Pay 決済を受け付けることができます。サーバーサイドエンドポイントを呼び出す Checkout ボタンをウェブサイトに追加し、[Checkout Session](https://docs.stripe.com/api/checkout/sessions.md) を作成します。 ```html Set up payment ``` `setup` モードで Checkout Session を作成して、必要な情報を収集します。Checkout Session を作成したら、レスポンスで返された [URL](https://docs.stripe.com/api/checkout/sessions/object.md#checkout_session_object-url) に顧客をリダイレクトします。 ```curl curl https://api.stripe.com/v1/checkout/sessions \ -u "<>:" \ -d "customer={{CUSTOMER_ID}}" \ -d mode=setup \ -d "payment_method_types[]=card" \ -d "payment_method_types[]=kakao_pay" \ --data-urlencode "success_url=https://example.com/success" ``` ## 実装内容をテストする Checkout の実装をテストするときは、 **Kakao Pay** を選択して **Kakao Pay で続行** をクリックします。Stripe が提供するページにリダイレクトされ、そこで決済設定をオーソリするか失敗するかを選択できます。[リダイレクトベースの決済手段のテスト](https://docs.stripe.com/testing.md#redirects)の詳細をご確認ください。 # ダイレクト API > This is a ダイレクト API for when payment-ui is direct-api. View the full page at https://docs.stripe.com/payments/kakao-pay/set-up-future-payments?payment-ui=direct-api. > Kakao Pay はシンガポールでは利用できません。 [Setup Intents API](https://docs.stripe.com/payments/setup-intents.md) を使用して、事前に支払い方法の詳細を収集し、後から最終的な金額や支払い日を決定できます。この機能の用途を紹介します。 - 支払い方法をウォレットに保存して、以降の購入を効率化する - サービスの提供後に追加料金を回収する - [サブスクリプションの無料トライアルを開始する](https://docs.stripe.com/billing/subscriptions/trials.md) 支払い方法の詳細を収集し、保存済みの支払い方法にすぐに請求するには、[Payment Intents API](https://docs.stripe.com/payments/payment-intents.md) を使用します。 [Kakao Pay サブスクリプションを設定](https://docs.stripe.com/billing/subscriptions/kakao-pay.md)し、Checkout で支払い方法を保存した後に継続支払いを作成する方法をご紹介します。 ## Customer を作成または取得する [サーバー側] 今後の支払いに備えて Kakao Pay の支払い方法を保存するには、これを *Customer* (Customer objects represent customers of your business. They let you reuse payment methods and give you the ability to track multiple payments) に関連付ける必要があります。ビジネスで顧客がアカウントを作成した後に Customer オブジェクトを作成します。Customer オブジェクトの ID を自社の顧客の内部表記に関連付けることにより、後から保存済みの支払い方法情報を取得して使用できます。顧客がアカウントを作成していない場合でも Customer オブジェクトを作成して、後で顧客のアカウントの内部表記に関連付けることができます。 ```curl curl https://api.stripe.com/v1/customers \ -u "<>:" \ --data-urlencode "description=My First Test Customer (created for API docs)" ``` #### Setup Intents API を使用して支払い方法を保存する [Setup Intents API](https://docs.stripe.com/payments/setup-intents.md) を使用して事前に支払い方法の詳細を収集し、後から最終的な金額や支払い日を決定します。この機能は、次の場合に役立ちます。 - 以降の購入時に認証せずに済むように顧客の支払い方法を保存する - *サブスクリプション* (A Subscription represents the product details associated with the plan that your customer subscribes to. Allows you to charge the customer on a recurring basis)の無料トライアルを開始する ## KaKao Pay を支払い方法として保存する権限を取得 [サーバー側] 将来の使用に備えて顧客の支払い方法を保存する許可を得る必要があります。あらかじめ契約 (同意書とも呼ばれます) を作成しておくことで、顧客の支払い情報を保存し、顧客がウェブサイトやアプリを能動的に使用していないときでも請求できるようになります。顧客の支払い方法がどのように保存されるかを示す規約をウェブサイトやアプリに追加し、顧客が許可できるようにします。顧客がオフライン時に請求する予定である場合は、規約に以下の内容も含める必要があります。 - 貴社が指定された取引で顧客の代理として単独の支払いまたは一連の支払いを開始するための、顧客による許可 - 予想される支払いの頻度 (1 回限りまたは継続) とタイミング - 支払い金額の決定方法 - キャンセルに関するポリシー (サブスクリプションサービスに使用される支払い方法を設定する場合) これらの規約への顧客の書面による同意の記録を保管し、同意された規約に従ってのみ支払いを送信してください。 ## SetupIntent を作成して Kakao Pay を支払い方法として保存 [サーバー側] [SetupIntent](https://docs.stripe.com/api/setup_intents.md) は、今後の支払いに備えて顧客の支払い方法を設定するという意図を示すオブジェクトです。SetupIntent は、この設定プロセスのステップを追跡します。サーバー側で [payment_method_types](https://docs.stripe.com/api/setup_intents/create.md#create_setup_intent-payment_method_types) を `kakao_pay` に設定して SetupIntent を作成し、Customer の ID と、[usage=off_session](https://docs.stripe.com/api/setup_intents/create.md#create_setup_intent-usage) または `usage=on_session` を指定します。 ```curl curl https://api.stripe.com/v1/setup_intents \ -u "<>:" \ -d "payment_method_types[]=kakao_pay" \ -d "payment_method_data[type]=kakao_pay" \ -d usage=off_session \ -d customer={{CUSTOMER_ID}} ``` ### client secret を取得する SetupIntent には、*client secret* (The client secret is a unique key returned from Stripe as part of a PaymentIntent. This key lets the client access important fields from the PaymentIntent (status, amount, currency) while hiding sensitive ones (metadata, customer)) が含まれています。これは、支払いプロセスを安全に完了するためにクライアント側で使用されます。client secret をクライアント側に渡す際は、いくつかの方法を使用できます。 #### 1 ページのアプリケーションブラウザーの `fetch` 関数を使用して、サーバーのエンドポイントから client secret を取得します。この方法は、クライアント側が 1 ページのアプリケーションで、特に React などの最新のフロントエンドフレームワークで構築されている場合に最適です。client secret を処理するサーバーのエンドポイントを作成します。 #### Ruby ```ruby get '/secret' do intent = # ... Create or retrieve the SetupIntent {client_secret: intent.client_secret}.to_json end ``` その後、クライアント側で JavaScript を使用して client secret を取得します。 ```javascript (async () => { const response = await fetch('/secret'); const {client_secret: clientSecret} = await response.json(); // Render the form using the clientSecret })(); ``` #### サーバ側のレンダリングサーバーからクライアントに client secret を渡します。この方法は、アプリケーションがブラウザーへの送信前に静的なコンテンツをサーバーで生成する場合に最適です。決済フォームに [client_secret](https://docs.stripe.com/api/setup_intents/object.md#setup_intent_object-client_secret) を追加します。サーバー側のコードで、SetupIntent から client secret を取得します。 #### Ruby ```erb ``` ```ruby get '/checkout' do @intent = # ... Fetch or create the SetupIntent erb :checkout end ``` 次に、[Stripe.js](https://docs.stripe.com/payments/elements.md) を使用してクライアントに Kakao Pay を保存します。 Stripe.js スクリプトを決済ページに含めるには、このスクリプトを HTML ファイルの `head` に追加します。 ```html Checkout ``` 顧客が Kakao Pay での支払いをクリックしたときに、Stripe.js を使用してその支払いを Stripe に送信します。[Stripe.js](https://docs.stripe.com/payments/elements.md) は、決済フローを構築するための基本的な JavaScript ライブラリです。このライブラリにより、以下で説明するリダイレクトなどの複雑な処理が自動的に行われ、他の決済手段にも対応できるように実装を拡張できます。Stripe.js スクリプトを決済ページに含めるには、HTML ファイルの `head` にこのスクリプトを追加します。 ```html Checkout ``` 決済ページで以下の JavaScript を使用して、Stripe.js のインスタンスを作成します。 ```javascript // Set your publishable key. Remember to change this to your live publishable key in production! // See your keys here: https://dashboard.stripe.com/apikeys const stripe = Stripe('<>'); ``` `stripe.confirmKakaoPaySetup` を使用し、[return_url](https://docs.stripe.com/api/setup_intents/create.md#create_setup_intent-return_url) と [mandate_data](https://docs.stripe.com/api/setup_intents/create.md#create_setup_intent-mandate_data) を指定して、クライアント側で SetupIntent を確定します。[return_url](https://docs.stripe.com/api/setup_intents/create.md#create_setup_intent-return_url) を使用して SetupIntent の成功後に顧客を指定のページにリダイレクトします。 ```javascript // Redirects away from the client const {error} = await stripe.confirmKakaoPaySetup( '{{SETUP_INTENT_CLIENT_SECRET}}', { return_url: 'https://example.com/setup/complete', mandate_data: { customer_acceptance: { type: 'online', online: { infer_from_client: true } } }, } ); if (error) { // Inform the customer that there was an error. } ``` ## Optional: リダイレクトを手動で処理 Stripe.js を使用すると、構築済みのシステムを他の支払い方法に拡張することができます。ただし、お客様のサーバーに顧客を手動でリダイレクトすることもできます。 1. タイプが `kakao_pay` の PaymentIntent を作成し、*確定* (Confirming an intent indicates that the customer intends to use the current or provided payment method. Upon confirmation, the intent attempts to initiate the portions of the flow that have real-world side effects)します。`payment_method_data` を指定すると、PaymentMethod が作成され、PaymentIntent ですぐに使用されます。また、顧客が支払いを完了した後にリダイレクトされる先の URL を `return_url` フィールドに指定する必要があります。独自のクエリパラメーターをこの URL に指定することもできます。これらのパラメーターは、リダイレクトフロー完了時の最終的な URL に含められます。 ```curl curl https://api.stripe.com/v1/payment_intents \ -u "<>:" \ -d amount=1000 \ -d currency=krw \ -d "payment_method_types[]=kakao_pay" \ -d "payment_method_data[type]=kakao_pay" \ --data-urlencode "return_url=https://example.com/checkout/complete" \ -d confirm=true ``` 1. `PaymentIntent` のステータスが `requires_action` であることと、`next_action` のタイプが `redirect_to_url` であることを確認します。 #### Json ```json {"status": "requires_action", "next_action": { "type": "redirect_to_url", "redirect_to_url": { "url": "https://hooks.stripe.com/...", "return_url": "https://example.com/checkout/complete" } }, "id": "pi_1G1sgdKi6xqXeNtkldRRE6HT", "object": "payment_intent", ... } ``` 1. `next_action.redirect_to_url.url` プロパティで指定された URL に顧客をリダイレクトします。ここでのコード例はおおまかなものであり、リダイレクト方法は、お客様のウェブフレームワークによって異なることがあります。 #### Ruby ```ruby if payment_intent.status == 'requires_action' && payment_intent.next_action.type == 'redirect_to_url' url = payment_intent.next_action.redirect_to_url.url redirect(url) end ``` 支払いプロセスが完了すると、顧客は `return_url` にリダイレクトされます。`payment_intent` および `payment_intent_client_secret` URL クエリパラメーターは、お客様独自のクエリパラメーターと併せて含まれています。支払いのステータスをプログラムで確認するために、[Webhook エンドポイント](https://docs.stripe.com/payments/payment-intents/verifying-status.md#webhooks)を設定することをお勧めします。 #### Payment Intents API を使用して支払い方法を保存する [Payment Intents API](https://docs.stripe.com/payments/payment-intents.md) を使用して決済時に支払い方法の詳細を収集し、それを顧客に保存します。この機能は、次の場合に役立ちます。 - 以降の購入時に認証せずに済むように顧客の支払い方法を保存する - *サブスクリプション* (A Subscription represents the product details associated with the plan that your customer subscribes to. Allows you to charge the customer on a recurring basis)の無料トライアルを開始する ## PaymentIntent を作成して支払い方法を保存する [サーバー側] [PaymentIntent](https://docs.stripe.com/api/payment_intents.md) は、顧客に請求するという意図を示すオブジェクトです。PaymentIntent のリクエストで保存済みの支払い方法を指定していない場合、新しい支払い方法が作成され、顧客に関連付けられた後に PaymentIntent が確定されます。PaymentIntent は、[payment_method_types](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_types) を `kakao_pay` に設定し、Customer の ID、`confirm=true`、[setup_future_usage=off_session](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-setup_future_usage) を指定し、[return_url](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-return_url) を設定してサーバーで作成します。必要に応じて [mandate_data](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-mandate_data) も指定してください。[return_url](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-return_url) を使用して、PaymentIntent の設定後に顧客を指定のページにリダイレクトします。 ```curl curl https://api.stripe.com/v1/payment_intents \ -u "<>:" \ -d "payment_method_types[]=kakao_pay" \ -d "mandate_data[customer_acceptance][type]=online" \ -d "mandate_data[customer_acceptance][online][ip_address]=127.0.0.0" \ -d "mandate_data[customer_acceptance][online][user_agent]=device" \ --data-urlencode "return_url=https://www.stripe.com" \ -d customer={{CUSTOMER_ID}} \ -d setup_future_usage=off_session \ -d amount=1000 \ -d currency=ngn \ -d statement_descriptor=test_statement \ -d capture_method=automatic \ -d confirm=true ``` 返される PaymentIntent には *client secret* (The client secret is a unique key returned from Stripe as part of a PaymentIntent. This key lets the client access important fields from the PaymentIntent (status, amount, currency) while hiding sensitive ones (metadata, customer)) が含まれています。これは、PaymentIntent オブジェクト全体を渡すことなく安全に決済を完了するために、クライアント側で使用されます。この client secret をクライアント側のアプリケーションに渡して、決済プロセスを続行します。 ## 保存された支払い方法を使用して PaymentIntent を作成する [サーバー側] [PaymentMethod (支払い方法)](https://docs.stripe.com/api/payment_methods.md) を作成した後、[PaymentIntent (支払いインテント)](https://docs.stripe.com/api/payment_intents.md) を作成して確定すると、それ以降の Kakao Pay による決済を受け付けられるようになります。PaymentIntent を確定する際は、以前の SetupIntent オブジェクトまたは PaymentIntent オブジェクトと同じ支払い方法 ID を使用します。顧客がこの PaymentIntent の決済フロー内にいない場合は、`off_session` 値も true に設定する必要があります。 > 継続支払いは `capture_method: "automatic"` で行う必要があります。手動キャプチャーはサポートされていません。 ```curl curl https://api.stripe.com/v1/payment_intents \ -u "<>:" \ -d "payment_method_types[]=kakao_pay" \ -d payment_method={{PAYMENT_METHOD_ID}} \ -d amount=1000 \ -d currency=krw \ -d customer={{CUSTOMER_ID}} \ -d statement_descriptor=test_statement \ -d capture_method=automatic \ -d confirm=true \ -d off_session=true ``` ## 再利用可能な決済手段の関連付けを解除する再利用可能な支払い方法を無効にする場合、サーバーから [detach PaymentMethod](https://docs.stripe.com/api/payment_methods/detach.md) を呼び出すことができます。Stripe は [mandate.updated](https://docs.stripe.com/api/events/types.md#event_types-mandate.updated) と [payment_method.detached](https://docs.stripe.com/api/events/types.md#event_types-payment_method.detached) の両方のイベントを送信します。[Webhook](https://docs.stripe.com/webhooks.md) イベントに登録することで通知を受けることができます。 ## 実装内容をテストする Checkout の導入をテストする際に、**KaKao Pay** を選択して**支払う**をクリックします。これにより、Stripe がオンラインで提供するページにリダイレクトされ、そこで支払いを承認するか失敗するかを選択できます。支払いを承認すると、PaymentIntentは `requires_action` から `succeeded` に切り替わります。テスト支払いを失敗にすると、PaymentIntent は `requires_action` から `requires_payment_method` に切り替わります。リダイレクトベースの支払い方法を[テスト](https://docs.stripe.com/testing.md#redirects)する方法についてご紹介します。