# Naira カードによる今後の支払いを設定する ナイジェリアのカードを保存し、後で顧客に請求する方法をご紹介します。 # Checkout > This is a Checkout for when payment-ui is checkout. View the full page at https://docs.stripe.com/payments/ng-card/set-up-future-payments?payment-ui=checkout. Stripe の完全オンライン決済ページである[Checkout](https://docs.stripe.com/payments/checkout.md)を使用して、Naira カード決済情報を保存します。 [Naira カードによるサブスクリプションを設定](https://docs.stripe.com/billing/subscriptions/ng-card.md)し、Checkout で決済手段を保存した後に継続支払いを作成する方法をご紹介します。 ## Stripe を設定する [サーバー側] まず、Stripe アカウントが必要です。[今すぐご登録ください](https://dashboard.stripe.com/register)。 Stripe の公式ライブラリを使用して、アプリケーションから Stripe API にアクセスします。 #### 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' ``` ## 支払い方法を保存する許可を得る [サーバー側] 将来の使用に備えて顧客の決済手段を保存する許可を顧客から得る必要があります。あらかじめ契約 (同意書とも呼ばれます) を作成しておくことで、顧客の支払い情報を保存し、顧客がウェブサイトやアプリを能動的に使用していないときでも請求できるようになります。 顧客の決済手段がどのように保存されるかを示す規約をウェブサイトやアプリに追加し、顧客が許可できるようにします。顧客のオフライン時に請求を予定している場合は、規約に以下の内容も含める必要があります。 - 貴社が指定された取引で顧客の代理として単独の支払いまたは一連の支払いを開始するための、顧客による許可 - 予想される支払いの頻度 (1 回限りまたは継続) とタイミング - 支払い金額の決定方法 - キャンセルに関するポリシー (サブスクリプションサービスに使用される支払い方法を設定する場合) これらの規約に関する顧客の書面による同意の記録を必ず保管してください。 ## Customer を作成または取得する [サーバー側] 今後の支払いのために Naira カードの決済手段を保存するには、*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 を作成することもできます。 新しい Customer を作成するか、または既存の Customer を取得して、この決済に関連付けます。サーバーに以下のコードを含め、新しい Customer を作成します。 ```curl curl https://api.stripe.com/v1/customers \ -u "<>:" \ --data-urlencode "description=My First Test Customer (created for API docs)" ``` ## Checkout セッションを作成する [サーバー側] 顧客は、今後の支払いに現地のマーチャントオブレコード・サービスプロバイダーの使用を承認する必要があります。 サーバー側のエンドポイントを呼び出す決済ボタンをウェブサイトに追加して [Checkout Session (セッション)](https://docs.stripe.com/api/checkout/sessions.md) を作成します。 ```html Checkout
``` `setup` モードで Checkout セッションを作成して、必要な情報を収集します。Checkout セッションを作成したら、レスポンスで返される [Checkout セッション URL](https://docs.stripe.com/api/checkout/sessions/object.md#checkout_session_object-url) に顧客をリダイレクトします。 #### Ruby ```ruby Stripe::Checkout::Session.create({ mode: 'setup',payment_method_types: ['card', 'ng_card'], customer: customer.id, success_url: 'https://example.com/success', }) ``` ## 実装内容をテストする 決済手段として Naira カードを選択し、**Naira カードに進む**をクリックします。リダイレクトページで SetupIntent を認証して、設定をテストします。SetupIntent が `requires_action` から `succeeded` に移行した場合、正しく設定されています。 # ダイレクト API > This is a ダイレクト API for when payment-ui is direct-api. View the full page at https://docs.stripe.com/payments/ng-card/set-up-future-payments?payment-ui=direct-api. [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) を使用します。 [Naira カードによるサブスクリプションを設定](https://docs.stripe.com/billing/subscriptions/ng-card.md)し、Checkout で決済手段を保存した後に継続支払いを作成する方法をご紹介します。 ## Customer を作成または取得する [サーバー側] 今後の支払いのために Naira カードの決済手段を保存するには、*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)の無料トライアルを開始する ## SetupIntent を作成して支払い方法を保存する [サーバー側] [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) を `ng_card` に設定して 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[]=ng_card" \ -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)を使用して、クライアント側で Naira カードの設定を確認します。 Stripe.js スクリプトを決済ページに含めるには、このスクリプトを HTML ファイルの `head` に追加します。 ```html Checkout ``` 顧客が Naira card での支払いをクリックしたときに、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.confirmNgCardSetup` を使用し、[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.confirmNgCardSetup( '{{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: Naira カードのリダイレクトを手動で処理する Stripe.js を使用すると、実装を他の決済手段に拡張することができます。ただし、お客様のサーバーに顧客を手動でリダイレクトすることも可能です。 1. タイプが `ng_card` の 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=ngn \ -d "payment_method_types[]=ng_card" \ -d "payment_method_data[type]=ng_card" \ --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) を `ng_card` に設定し、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[]=ng_card" \ -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)を作成した後、[PaymentIntents (支払いインテント)](https://docs.stripe.com/api/payment_intents.md)を作成して確定すると、それ以降の Naira カードによる決済を受け付けられるようになります。PaymentIntent を確定する際は、以前の SetupIntent オブジェクトまたは PaymentIntent オブジェクトの支払い方法 ID を使用します。顧客が現在の PaymentIntent の決済フローを実施していない場合は、`off_session` 値も true に設定する必要があります。 ```curl curl https://api.stripe.com/v1/payment_intents \ -u "<>:" \ -d "payment_method_types[]=ng_card" \ -d payment_method={{PAYMENT_METHOD_ID}} \ -d amount=1000 \ -d currency=ngn \ -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) イベントに登録することで通知を受けることができます。