Twint 決済

スイスで広く普及している支払い方法である Twint の受け付け方法をご紹介します。

ウェブ

注意

このセクションにはレガシープロダクトについてのコンテンツが含まれています。最新の導入パスについては、代わりに決済を受け付けるのガイドを使用する必要があります。Stripe はこのプロダクトを引き続きサポートしていますが、プロダクトが非推奨になった場合にはサポートが終了する可能性があります。

Twint は、スイスで使用されている 1 回限りの使用の支払い方法です。顧客は承認された Twint モバイルアプリを使用して、支払いの認証と承認を行うことができます。

支払いが成功したか失敗したかに関する即時通知を受け取ります。

Stripe を設定する
サーバー側

まず、Stripe アカウントが必要です。今すぐご登録ください。

アプリケーションから Stripe API にアクセスするには、Stripe の公式ライブラリを使用します。

PaymentIntent を作成する
サーバー側

PaymentIntent (支払いインテント) は、顧客から支払いを回収する意図を表すオブジェクトであり、支払いプロセスを追跡します。TWINT 支払い方法を受け付ける PaymentIntent を作成するには、回収する金額、通貨として chf、payment_method_types リストで twint を指定します。PaymentIntent の作成時に渡す支払い方法タイプのリストを保持している場合は、それに twint を追加します。

client secret を取得する

PaymentIntent には、client secret が含まれています。これは、支払いプロセスを安全に完了するためにクライアント側で使用されます。client secret をクライアント側に渡す際は、いくつかの方法を使用できます。

ブラウザーの fetch 関数を使用して、サーバーのエンドポイントから client secret を取得します。この方法は、クライアント側が 1 ページのアプリケーションで、特に React などの最新のフロントエンドフレームワークで構築されている場合に最適です。client secret を処理するサーバーのエンドポイントを作成します。

その後、クライアント側で JavaScript を使用して client secret を取得します。

(async () => {
  const response = await fetch('/secret');
  const {client_secret: clientSecret} = await response.json();
  // Render the form using the clientSecret
})();

支払い方法の詳細を収集して支払いを送信する
クライアント側

顧客が TWINT での支払いをクリックしたときに、Stripe.js を使用してその支払いを Stripe に送信します。Stripe.js は、決済フローを構築するための基本的な JavaScript ライブラリです。このライブラリにより、以下で説明するリダイレクトなどの複雑な処理が自動的に行われ、他の決済手段にも対応できるように実装を拡張できます。Stripe.js スクリプトを決済ページに含めるには、HTML ファイルの head にこのスクリプトを追加します。

checkout.html
<head>
  <title>Checkout</title>
  <script src="https://js.stripe.com/basil/stripe.js"></script>
</head>

決済ページで以下の JavaScript を使用して、Stripe.js のインスタンスを作成します。

client.js
// 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('pk_test_TYooMQauvdEDq54NiTphI7jx'
);

支払いを確定するときに、Client Secret を渡します。

注意

Client Secret は PaymentIntent へのアクセスを許可するため、慎重に取り扱ってください。メモしたり、URL に埋め込んだり、当該の顧客以外に公開したりしないようにしてください。

stripe.confirmTwintPayment を使用して、お客様のページから現地の決済ページへのリダイレクトを処理します。ユーザーが支払いを完了した後にリダイレクトするために、return_url を指定する必要があります。

顧客は現地の代行業者のページで具体的な支払い方法を選択します。

script.js
// 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 のステータスを確認して支払いステータスを提供するページを、return_url に指定します。Stripe は顧客をこのページにリダイレクトするときに、確認コールで使用するために return_url に次の URL クエリパラメーターを追加します。return_url を指定するときに自社のクエリパラメーターを追加することもできます。これらのパラメーターはリダイレクトプロセス全体にわたって存続します。

パラメーター	説明
`payment_intent`	`PaymentIntent` の一意の識別子
`payment_intent_client_secret`	`PaymentIntent` オブジェクトの client secret

Twint の実装をテストする

テスト API キーを使用し、リダイレクトページを表示することで、Twint の実装をテストします。決済に成功したケースをテストするには、リダイレクトページで決済を認証します。PaymentIntent は、requires_action から succeeded に遷移します。ユーザーが認証に失敗するケースをテストするには、テスト API キーを使用し、リダイレクトページを表示します。リダイレクトページで Fail test payment (テスト支払い失敗) をクリックします。PaymentIntent は、requires_action から requires_payment_method に遷移します。

注

Twint 決済

スイスで広く普及している支払い方法である Twint の受け付け方法をご紹介します。

注意

Stripe を設定する
サーバー側

PaymentIntent を作成する
サーバー側

client secret を取得する

支払い方法の詳細を収集して支払いを送信する
クライアント側

注意

Twint の実装をテストする

オプションTwint のリダイレクトを手動で処理する

オプション支払い後のイベントを処理する

注

Twint 決済

スイスで広く普及している支払い方法である Twint の受け付け方法をご紹介します。

注意

Stripe を設定するサーバー側

PaymentIntent を作成するサーバー側

client secret を取得する

支払い方法の詳細を収集して支払いを送信するクライアント側

注意

Twint の実装をテストする

オプションTwint のリダイレクトを手動で処理する

オプション支払い後のイベントを処理する

Stripe を設定する
サーバー側

PaymentIntent を作成する
サーバー側

支払い方法の詳細を収集して支払いを送信する
クライアント側