Pay with Crypto を実装公開プレビュー

Pay with Crypto を連携して、仮想通貨の受け付けを開始しましょう。

Pay with Crypto は、Checkout、Elementsと連動します。また、Payment Intents API を通して直接実装することも可能です。Connect プラットフォームの場合は、Connect サポートをご覧ください。

When integrated, the option to pay with crypto appears in your checkout page, redirecting customers to a page hosted by crypto.link.com for payment completion. There, your customers can connect their wallet, and save and reuse their account using Link. You’re immediately notified if the payment succeeds or fails. Before you get started, see our Pay with Crypto demo.

仮想通貨で支払ってもらいましょう

Payment Intents API を使用して、Pay with Crypto を直接実装します。PaymentIntent を作成する前に、支払い方法の設定で 仮想通貨 を有効にします。

Stripe を設定する
サーバ側

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

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

Payment Intent を作成して client secret を取得
サーバー側

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

Command Line
curl https://api.stripe.com/v1/payment_intents \
  -u sk_test_4eC39HqLyjWDarjtT1zdp7dc
: \
  -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
})();

Pay with Crypto にリダイレクト

顧客が決済手段として 仮想通貨 を選択した場合に、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 は以下の URL クエリパラメーターを含む return_url にリダイレクトします。return_url には自社のクエリパラメーターを追加することもできます。これらのパラメーターはリダイレクトプロセス全体にわたって存続します。

`payment_intent`	`PaymentIntent` の一意の識別子。
`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.

To test the case where the user fails to authenticate:

Use your test API keys and view the redirect page.
On the redirect page, click Fail test payment.

The PaymentIntent transitions from requires_action to requires_payment_method. For manual capture PaymentIntents in test mode, the uncaptured PaymentIntent auto-expires seven days after successful authorization.

注