# Twint 決済 スイスで広く普及している支払い方法である Twint の受け付け方法をご紹介します。 # Checkout > This is a Checkout for when payment-ui is checkout. View the full page at https://docs.stripe.com/payments/twint/accept-a-payment?payment-ui=checkout. > Stripe は、通貨、支払い方法の制限、その他のパラメーターを評価することで、適切な支払い方法を顧客に自動的に提示できます。 > > - [決済の受け付け](https://docs.stripe.com/payments/accept-a-payment.md?payment-ui=checkout&ui=stripe-hosted)ガイドに従って、[動的な決済手段](https://docs.stripe.com/payments/payment-methods/dynamic-payment-methods.md)を使用するチェックアウトの統合機能を構築します。 - 動的な決済手段を使用しない場合は、チェックアウトの導入で、決済方法を手動で設定するために以下のステップに従ってください。 TWINT はスイスで使用されている決済方法であり、顧客は承認済みの TWINT モバイルアプリを使用して決済を[認証および承認](https://docs.stripe.com/payments/payment-methods.md#customer-actions)できます。 支払いが成功したか失敗したかに関する[即時通知](https://docs.stripe.com/payments/payment-methods.md#payment-notification)を受け取ります。 ## 互換性を判断する **サポート対象のビジネスの所在地**: Europe, UK **対応可能な通貨**: `chf` **取引通貨**: `chf` **支払いモード**: Yes **セットアップモード**: No **サブスクリプションモード**: No Twilio に対応するには、Checkout セッションが次の条件をすべて満たしている必要があります。 - ラインアイテムの*価格* (Prices define how much and how often to charge for products. This includes how much the product costs, what currency to use, and the interval if the price is for subscriptions)はすべて、スイスフラン (通貨コード `chf`) で示す必要があります。 ## Twilio 支払いを受け付ける > このガイドを使用する前に、まず Checkout で[決済を受け付ける](https://docs.stripe.com/payments/accept-a-payment.md?integration=checkout)ための実装を構築します。 このガイドでは、TWINT を有効にする方法について手順を追って説明し、動的な決済手段を使用して決済を受け付ける場合と決済手段を手動で設定する場合の違いを示します。 [Checkout セッション](https://docs.stripe.com/api/checkout/sessions.md)を作成する際には、次のことを行う必要があります。 - `twint` を `payment_method_types` のリストに追加します。 - すべての `line_items` が `chf` 通貨を使用していることを確認します。 #### Stripe ホスト型ページ ```curl curl https://api.stripe.com/v1/checkout/sessions \ -u "<>:" \ -d "line_items[0][price_data][currency]=chf" \ -d "line_items[0][price_data][product_data][name]=T-shirt" \ -d "line_items[0][price_data][unit_amount]=2000" \ -d "line_items[0][quantity]=1" \ -d mode=payment \ -d "payment_method_types[0]=card" \ -d "payment_method_types[1]=twint" \ --data-urlencode "success_url=https://example.com/success" ``` #### 完全埋め込みページ ```curl curl https://api.stripe.com/v1/checkout/sessions \ -u "<>:" \ -d "line_items[0][price_data][currency]=chf" \ -d "line_items[0][price_data][product_data][name]=T-shirt" \ -d "line_items[0][price_data][unit_amount]=2000" \ -d "line_items[0][quantity]=1" \ -d mode=payment \ -d "payment_method_types[0]=card" \ -d "payment_method_types[1]=twint" \ --data-urlencode "return_url=https://example.com/return" \ -d ui_mode=embedded_page ``` ### 注文のフルフィルメント 決済受け付け後に、[注文のフルフィルメントを実行](https://docs.stripe.com/checkout/fulfillment.md)する方法を説明します。 ## 実装内容をテストする Checkout の実装内容をテストする際は、支払い方法として ‘TWINT’ を選択し、**支払う**をクリックします。 ## 返金を処理する [Twilio 返金](https://docs.stripe.com/payments/twint.md#refunds)で詳細をご覧ください。 ## See also - [Checkout のフルフィルメント](https://docs.stripe.com/checkout/fulfillment.md) - [決済フローをカスタマイズする](https://docs.stripe.com/payments/checkout/customization.md) # ダイレクト API > This is a ダイレクト API for when payment-ui is direct-api. View the full page at https://docs.stripe.com/payments/twint/accept-a-payment?payment-ui=direct-api. > このセクションには*レガシー* (Technology that's no longer recommended)プロダクトについてのコンテンツが含まれています。最新の導入パスについては、代わりに[決済を受け付ける](https://docs.stripe.com/payments/accept-a-payment.md)のガイドを使用する必要があります。Stripe はこのプロダクトを引き続きサポートしていますが、プロダクトが非推奨になった場合にはサポートが終了する可能性があります。 TWINT はスイスで使用されている決済方法であり、顧客は承認済みの TWINT モバイルアプリを使用して決済を[認証および承認](https://docs.stripe.com/payments/payment-methods.md#customer-actions)できます。 支払いが成功したか失敗したかに関する[即時通知](https://docs.stripe.com/payments/payment-methods.md#payment-notification)を受け取ります。 ## 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' ``` ## PaymentIntent を作成する [サーバー側] [PaymentIntent (支払いインテント)](https://docs.stripe.com/api/payment_intents/object.md) は、顧客から支払いを回収する意図を表すオブジェクトであり、支払いプロセスを追跡します。TWINT 支払い方法を受け付ける `PaymentIntent` を作成するには、回収する金額、通貨として `chf`、[payment_method_types](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_types) リストで `twint` を指定します。`PaymentIntent` の作成時に渡す支払い方法タイプのリストを保持している場合は、それに `twint` を追加します。 ```curl curl https://api.stripe.com/v1/payment_intents \ -u "<>:" \ -d amount=1000 \ -d currency=chf \ -d "payment_method_types[]=twint" ``` ### client secret を取得する 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)) が含まれています。これは、支払いプロセスを安全に完了するためにクライアント側で使用されます。client secret をクライアント側に渡す際は、いくつかの方法を使用できます。 #### 1 ページのアプリケーション ブラウザーの `fetch` 関数を使用して、サーバーのエンドポイントから client secret を取得します。この方法は、クライアント側が 1 ページのアプリケーションで、特に React などの最新のフロントエンドフレームワークで構築されている場合に最適です。client secret を処理するサーバーのエンドポイントを作成します。 #### Ruby ```ruby get '/secret' do intent = # ... Create or retrieve the PaymentIntent {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/payment_intents/object.md#payment_intent_object-client_secret) を追加します。サーバー側のコードで、PaymentIntent から client secret を取得します。 #### Ruby ```erb
``` ```ruby get '/checkout' do @intent = # ... Fetch or create the PaymentIntent erb :checkout end ``` ## 支払い方法の詳細を収集して支払いを送信する [クライアント側] 顧客が TWINT での支払いをクリックしたときに、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('<>'); ``` 支払いを確定するときに、Client Secret を渡します。 > Client Secret は PaymentIntent へのアクセスを許可するため、慎重に取り扱ってください。メモしたり、URL に埋め込んだり、当該の顧客以外に公開したりしないようにしてください。 [stripe.confirmTwintPayment](https://docs.stripe.com/js/payment_intents/confirm_twint_payment) を使用して、お客様のページから現地の決済ページへのリダイレクトを処理します。ユーザーが支払いを完了した後にリダイレクトするために、`return_url` を指定する必要があります。 顧客は現地の代行業者のページで具体的な支払い方法を選択します。 ```javascript // Redirects from the client to the payment processor stripe.confirmTwintPayment( '{{PAYMENT_INTENT_CLIENT_SECRET}}', { payment_method: { // Billing details is optional. billing_details: { name: 'Jenny Rosen', email: 'jenny@example.com' }, }, // Return URL where the customer should be redirected after the authorization. return_url: 'https://example.com/checkout/complete', } ).then(function(result) { if (result.error) { // Inform the customer that there was an error. console.log(result.error.message); } }); ``` PaymentIntent の[ステータスを確認](https://docs.stripe.com/payments/payment-intents/verifying-status.md)して支払いステータスを提供するページを、`return_url` に指定します。Stripe は顧客をこのページにリダイレクトするときに、確認コールで使用するために `return_url` に次の URL クエリパラメーターを追加します。`return_url` を指定するときに自社のクエリパラメーターを追加することもできます。これらのパラメーターはリダイレクトプロセス全体にわたって存続します。 | パラメーター | 説明 | | ------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------- | | `payment_intent` | `PaymentIntent` の一意の識別子 | | `payment_intent_client_secret` | `PaymentIntent` オブジェクトの [client secret](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret) | ## Twint の実装をテストする テスト API キーを使用し、リダイレクトページを表示することで、Twint の実装をテストします。決済に成功したケースをテストするには、リダイレクトページで決済を認証します。PaymentIntent は、`requires_action` から `succeeded` に遷移します。ユーザーが認証に失敗するケースをテストするには、テスト API キーを使用し、リダイレクトページを表示します。リダイレクトページで **Fail test payment (テスト支払い失敗)** をクリックします。PaymentIntent は、`requires_action` から `requires_payment_method` に遷移します。 ## Optional: Twint のリダイレクトを手動で処理する クライアント側で `confirmTwintPayment` を使用して Twint のリダイレクトおよび決済を処理するには、Stripe.js を使用することをお勧めします。Stripe.js を使用すると、実装を他の支払い方法に拡張できるようになります。ただし、次の手順に従って、お客様のサーバーに顧客を手動でリダイレクトすることもできます。 - タイプが `twint` の `payment_method_data` を指定して [PaymentIntent (支払いインテント)](https://docs.stripe.com/api/payment_intents/object.md) を作成し、確定します。`payment_method_data` を指定することで、*PaymentMethod* (PaymentMethods represent your customer's payment instruments, used with the Payment Intents or Setup Intents APIs) を作成し、この PaymentIntent ですぐに使用します。 支払いの完了後にユーザーをリダイレクトする `return_url` も指定する必要があります。自社のクエリパラメーターをこの URL に指定できます。リダイレクトフローの最後に、最終的な URL にこれらのパラメーターが含められます。 ```curl curl https://api.stripe.com/v1/payment_intents \ -u "<>:" \ -d amount=1000 \ -d currency=chf \ -d "payment_method_types[]=twint" \ -d confirm=true \ -d "payment_method_data[type]=twint" \ --data-urlencode "return_url=https://example.com/checkout/complete" ``` 作成される `PaymentIntent` のステータスは `requires_action` であり、`next_action` のタイプは `redirect_to_url` になります。 ```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_xxx", "object": "payment_intent", "amount": 1000, "client_secret": "pi_xxx_secret_xxx", "confirm": "true", "confirmation_method": "automatic", "created": 1687432192, "currency": "chf", "livemode": true, "charges": { "data": [], "object": "list", "has_more": false, "url": "/v1/charges?payment_intent=pi_xxx" }, "payment_method_types": [ "twint" ] } ``` - `next_action.redirect_to_url.url` プロパティーで指定した URL に顧客をリダイレクトします。ここに示すコード例はおおまかなものであり、ご使用のウェブフレームワークでは異なる場合があります。 決済プロセスを完了した顧客は、PaymentIntent の作成時に指定した `return_url` にリダイレクトされます。この URL には、URL クエリパラメーターである `payment_intent` と `payment_intent_client_secret` が含まれます。`return_url` の指定時に他のパラメーターを含めていた場合は、それらも追加されます。 支払いのステータスを確認するには、[Webhook を利用](https://docs.stripe.com/payments/payment-intents/verifying-status.md#webhooks)することをお勧めします。 ## Optional: 支払い後のイベントを処理する 支払いが完了すると、Stripe は [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.succeeded) イベントを送信します。ダッシュボード、カスタム *Webhook* (A webhook is a real-time push notification sent to your application as a JSON payload through HTTPS requests)、またはパートナーソリューションを使用してこれらのイベントを受信し、また、顧客への注文確認メールの送信、データベースでの売上の記録、配送ワークフローの開始などのアクションを実行します。 クライアントからのコールバックを待つのではなく、これらのイベントをリッスンします。クライアント側では、コールバックが実行される前に顧客がブラウザーのウィンドウを閉じたり、アプリを終了したりする可能性があります。また、悪意を持つクライアントがレスポンスを不正操作する恐れもあります。非同期型のイベントをリッスンするよう構築済みのシステムを設定することで、これ以降はより多くの決済手段を簡単に受け付けられるようになります。[サポートされているすべての決済手段の違い](https://stripe.com/payments/payment-methods-guide)をご確認ください。 - **ダッシュボードでイベントを手動で処理する** ダッシュボードを使用して、テスト決済を[ダッシュボードで表示](https://dashboard.stripe.com/test/payments)したり、メール領収書を送信したり、入金を処理したり、失敗した決済を再試行したりできます。 - **Custom Webhook を構築する** [カスタム webhook](https://docs.stripe.com/webhooks/handling-payment-events.md#build-your-own-webhook) ハンドラを構築して、イベントをリッスンし、カスタムの非同期決済フローを構築できます。Stripe CLI を使用すると、ローカルで webhook 連携をテストしてデバッグできます。 - **構築済みアプリを導入する** パートナーアプリケーションを統合することで、[自動化](https://stripe.partners/?f_category=automation)や[マーケティング/セールス](https://stripe.partners/?f_category=marketing-and-sales)などの一般的なビジネスイベントを処理します。