ステーブルコインでの支払いを受け付ける公開プレビュー

仮想通貨の決済手段を実装して、ステーブルコインを受け付けられるようにします。

ステーブルコインの支払いの受け付けは、Checkout、Elements を使用するか、Payment Intents API で直接実装できます。Connect プラットフォームを使用する場合は、Connect サポートを参照してください。

実装後、決済ページに仮想通貨で支払うオプションが表示され、顧客は支払いを完了するために crypto.link.com がホストするページにリダイレクトされます。そこで、顧客はウォレットを接続し、Link を使用してアカウントを保存し再利用できます。支払いが成功または失敗すると、すぐに通知が届きます。始める前に、デモをご覧ください。

ユーザーが仮想通貨で支払えるようにする

ウェブ

モバイル

Payment Intents API を使用して、Pay with Crypto を直接実装します。PaymentIntent を作成する前に、決済手段の設定で仮想通貨をオンにしてください。

Stripe を設定する
サーバ側

まず、Stripe アカウントを作成するかサインインします。

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

PaymentIntent を作成し、client secret を取得する
サーバー側

PaymentIntent は、顧客から支払いを回収する意図を表すオブジェクトであり、支払いプロセスのライフサイクルを追跡します。サーバーで PaymentIntent を作成し、回収する金額とサポートされている通貨を指定します。すでに支払いインテントが実装されている場合は、payment_method_types のリストに crypto を追加します。

Command Line
curl https://api.stripe.com/v1/payment_intents \
  -u sk_test_BQokikJOvBiI2HlWgH4olfQ2
: \
  -d "payment_method_types[]"=crypto \
  -d amount=1099 \
  -d currency=usd

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
})();

ステーブルコインの支払いページへのリダイレクト

顧客が仮想通貨を決済手段として選択したときに、Stripe.js を使用して Stripe に支払いを送信します。Stripe.js は、決済フローの構築の基盤となる JavaScript ライブラリです。以下に説明するリダイレクトのような複雑な処理を自動的に行い、他の決済手段にもシステムを拡張させることができます。Stripe.js スクリプトを決済ページに含めるには、スクリプトを HTML ファイルの <head> に追加します。

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

決済ページで次の JavaScript を使用して Stripe.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'
);

PaymentIntent の client secret を使用して stripe.confirmPayment を呼び出し、Pay with Crypto のリダイレクトを処理します。return_url を追加して、決済完了後に顧客をリダイレクトする場所を指定します。

const form = document.getElementById('payment-form');

form.addEventListener('submit', async function(event) {
  event.preventDefault();

  // Set the clientSecret of the PaymentIntent
  const { error } = await stripe.confirmPayment({
    clientSecret: clientSecret,
    confirmParams: {
      payment_method_data: {
        type: 'crypto',
      },
      // Return URL where the customer should be redirected after the authorization
      return_url: `${window.location.href}`,
    },
  });

  if (error) {
    // Inform the customer that there was an error.
    const errorElement = document.getElementById('error-message');
    errorElement.textContent = result.error.message;
  }
});

return_url は、支払いの結果を表示する、お客様のウェブサイトのページに相当します。PaymentIntent のステータスを確認して、表示する内容を決定します。ステータス確認のために Stripe がリダイレクトする return_url には、次の URL クエリパラメーターが含まれています。また、独自のクエリパラメーターを return_url に追加することもできます。設定したパラメーターは、リダイレクトプロセス全体にわたって保持されます。

`payment_intent`	`PaymentIntent` の一意の ID。
`payment_intent_client_secret`	`PaymentIntent` オブジェクトの Client Secret。

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

実装内容をテストする

Test your Pay with Crypto integration with your test API keys by viewing the redirect page. You can test the successful payment case by authenticating the payment on the redirect page. The PaymentIntent transitions from requires_action to succeeded.

In sandbox, pay with testnet crypto assets on the payment page you’re redirected to.
Configure your wallet to the test network you intend to pay over. For example, if you want to pay with USDC on Ethereum, make sure your wallet is set to Ethereum’s Sepolia test network.

テスト用通貨でウォレットに資金を追加する

テストネットの「フォーセット」を使用して、ウォレットに資金を追加できます。以下はその例です。

注