Kriya による支払いを受け付ける非公開プレビュー

Kriya の導入の設定方法をご紹介します。

ウェブ

Use the Payment Element to embed a custom Stripe payment form in your website or application and offer payment methods to customers. For advanced configurations and customizations, refer to the Accept a Payment integration guide.

Stripe を設定する
サーバー側

開始するには、Stripe アカウントを作成を作成します。

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

支払いの詳細を収集する
クライアント側

Payment Element を使用してクライアントで支払い詳細を収集する準備ができました。Payment Element は事前構築された UI コンポーネントであり、多様な支払い方法の支払い詳細の収集を容易にします。

Payment Element には、HTTPS 接続を介して支払い情報を Stripe に安全に送信する iframe が含まれています。決済手段によっては、支払い確認のために別のページにリダイレクトする必要があるため、Payment Element を別の iframe 内に配置しないでください。

実装を機能させるには、決済ページのアドレスの先頭を http:// ではなく https:// にする必要があります。HTTPS を使用せずに実装をテストすることはできますが、本番環境で支払いを受け付ける準備が整ったら、忘れずに有効にしてください。

Stripe.js を設定する

Payment Element は Stripe.js の機能として自動的に使用できるようになります。決済ページに Stripe.js スクリプトを含めるには、HTML ファイルの head にスクリプトを追加します。常に js.stripe.com から Stripe.js を直接読み込むことにより、PCI 準拠が維持されます。スクリプトをバンドルに含めたり、そのコピーを自身でホストしたりしないでください。

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

購入ページで次の JavaScript を使用して、Stripe のインスタンスを作成します。

checkout.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'
);

Payment Element を決済ページに追加する

The Payment Element needs a place on your checkout page. Create an empty DOM node (container) with a unique ID in your payment form:

checkout.html
<form id="payment-form">
  <div id="payment-element">
    <!-- Elements will create form elements here -->
  </div>
  <button id="submit">Submit</button>
  <div id="error-message">
    <!-- Display error message to your customers here -->
  </div>
</form>

上記のフォームが読み込まれたら、mode、amount、currency を指定して Elements インスタンスを作成します。これらの値によって、顧客に表示される決済手段が決まります。フォームで新しい決済手段を指定するには、必ずダッシュボードで有効にしてください。

checkout.js
const options = {
  mode: 'payment',
  amount: 1000,
  currency: 'gbp',
  // Fully customizable with appearance API.
  appearance: {/*...*/},
};

// Set up Stripe.js and Elements to use in checkout form
const elements = stripe.elements(options);

// Create and mount the Payment Element
const paymentElementOptions = { layout: 'accordion'};
const paymentElement = elements.create('payment', paymentElementOptions);
paymentElement.mount('#payment-element');

Elements プロバイダーを作成する際に Appearance (デザイン) オブジェクトを options に渡すことで、サイトのデザインに合わせて Payment Element をカスタマイズできます。

住所を収集

デフォルトでは、Payment Element は必要な請求先住所情報のみを収集します。(たとえば、デジタル商品およびサービスの税金を計算するなどの目的で) 顧客の詳細な請求先住所または配送先住所を収集するには、Address Element を使用します。

PaymentIntent を作成する
サーバー側

Run custom business logic immediately before payment confirmation

支払いの確定ガイドのステップ 5 に移動して、支払い確定の直前にカスタムのビジネスロジックを実行します。または、以下のステップに従って既存のシステムをシンプルにします。ここでは、クライアント側で stripe.confirmPayment を使用して、支払いの確定と次のアクションの処理の両方を行います。

顧客が支払いフォームを送信したら、PaymentIntent を使用して確認と支払いのプロセスを適切に管理します。amount と currency を指定してサーバー側で PaymentIntent を作成します。悪意のある顧客が独自の価格を選択できないように、請求金額はクライアント側ではなく、常にサーバー側 (信頼できる環境) で決定してください。

PaymentIntent には、client secret が含まれています。この値をクライアントに返し、Stripe.js がこれを使用して支払いプロセスを安全に完了できるようにします。

Stripe に支払いを送信する
クライアント側

stripe.confirmPayment を使用して、Payment Element の詳細を使って支払いを完了します。

この関数に return_url を指定して、支払い完了後に Stripe がユーザーをリダイレクトする場所を示します。ユーザーは、最初に銀行の認証ページなどの中間サイトにリダイレクトされてから、return_url にリダイレクトされる場合があります。カード支払いでは、支払いが成功するとすぐに return_url にリダイレクトされます。

支払い完了後にカード支払いのリダイレクトを行わない場合は、redirect を if_required に設定できます。これにより、リダイレクトベースの決済手段で購入した顧客のみがリダイレクトされます。

checkout.js
const form = document.getElementById('payment-form');
const submitBtn = document.getElementById('submit');

const handleError = (error) => {
  const messageContainer = document.querySelector('#error-message');
  messageContainer.textContent = error.message;
  submitBtn.disabled = false;
}

form.addEventListener('submit', async (event) => {
  // We don't want to let default form submission happen here,
  // which would refresh the page.
  event.preventDefault();

  // Prevent multiple form submissions
  if (submitBtn.disabled) {
    return;
  }

  // Disable form submission while loading
  submitBtn.disabled = true;

  // Trigger form validation and wallet collection
  const {error: submitError} = await elements.submit();
  if (submitError) {
    handleError(submitError);
    return;
  }

  // Create the PaymentIntent and obtain clientSecret
  const res = await fetch("/create-intent", {
    method: "POST",
  });

  const {client_secret: clientSecret} = await res.json();

  // Confirm the PaymentIntent using the details collected by the Payment Element
  const {error} = await stripe.confirmPayment({
    elements,
    clientSecret,
    confirmParams: {
      return_url: 'https://example.com/order/123/complete',
    },
  });

  if (error) {
    // This point is only reached if there's an immediate error when
    // confirming the payment. Show the error to your customer (for example, payment details incomplete)
    handleError(error);
  } else {
    // Your customer is redirected to your `return_url`. For some payment
    // methods like iDEAL, your customer is redirected to an intermediate
    // site first to authorize the payment, then redirected to the `return_url`.
  }
});

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

オプションオーソリとキャプチャの分離

実装内容をテストする

To test your integration, choose the payment method and tap Pay. In test mode, this redirects you to a test payment page where you can approve or decline the payment.

In live mode, tapping Pay redirects you to the Kriya website—you don’t have the option to approve or decline the payment with Kriya.

エラーコード

次の表に、一般的なエラーコードと推奨される対応の詳細を示します。

エラーコード	推奨される対応
`payment_intent_invalid_currency`	Enter a supported currency.
`missing_required_parameter`	必須パラメーターの詳細については、エラーメッセージをご確認ください。
`payment_intent_payment_attempt_failed`	このコードは、PaymentIntent の last_payment_error.code フィールドに表示されることがあります。エラーメッセージで、エラーの詳細な理由とエラー処理に関する提案を確認してください。
`payment_intent_redirect_confirmation_without_return_url`	PaymentIntent を確定する際は、`return_url` を指定します。

注