Webhook なしでカード支払いを受け付ける

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

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

# Available as a gem
sudo gem install stripe

# If you use bundler, you can add this line to your Gemfile
gem 'stripe'

Stripe.js と Stripe Elements を使用して、クライアント側でカード情報を収集します。Elements は、カード番号、郵便番号、有効期限を収集して検証するための事前構築された UI コンポーネントのセットです。

Stripe Element には、HTTPS 接続を介して支払い情報を Stripe に安全に送信する iframe が含まれています。組み込みを機能させるには、決済ページのアドレスの先頭を http:// ではなく https:// にする必要があります。

HTTPS を使用せずに実装をテストできます。本番環境で決済を受け付ける準備が整ったら、HTTPS を有効化します。

<script src="https://js.stripe.com/basil/stripe.js"></script>

<form id='payment-form'>
  <label>
    Card details
    <!-- placeholder for Elements -->
    <div id="card-element"></div>
  </label>
  <button type="submit">Submit Payment</button>
</form>

const stripe = Stripe(
'pk_test_TYooMQauvdEDq54NiTphI7jx');
const elements = stripe.elements();
// Set up Stripe.js and Elements to use in checkout form
const style = {
  base: {
    color: "#32325d",
    fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
    fontSmoothing: "antialiased",
    fontSize: "16px",
    "::placeholder": {
      color: "#aab7c4"
    }
  },
  invalid: {
    color: "#fa755a",
    iconColor: "#fa755a"
  },
};
const cardElement = elements.create('card', {style});
cardElement.mount('#card-element');

const form = document.getElementById('payment-form');
form.addEventListener('submit', async (event) => {
  // We don't want to let default form submission happen here,
  // which would refresh the page.
  event.preventDefault();
  const result = await stripe.createPaymentMethod({
    type: 'card',
    card: cardElement,
    billing_details: {
      // Include any additional collected billing details.
      name: 'Jenny Rosen',
    },
  })
  stripePaymentMethodHandler(result);
});

PaymentMethod が正常に作成されたら、その ID をサーバーに送信します。

const stripePaymentMethodHandler = async (result) => {
  if (result.error) {
    // Show error in payment form
  } else {
    // Otherwise send paymentMethod.id to your server (see Step 4)
    const res = await fetch('/pay', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        payment_method_id: result.paymentMethod.id,
      }),
    })
    const paymentResponse = await res.json();
    // Handle server response (see Step 4)
    handleServerResponse(paymentResponse);
  }
}

リクエストを受信するためにサーバにエンドポイントを設定します。このエンドポイントは、後で でも、追加の認証ステップが必要なカードの処理に使用されます。

クライアント側で作成した PaymentMethod) の ID を使って新しい PaymentIntent を作成します。PaymentIntent の作成時に confirm プロパティを true に設定するか、作成後に confirm を呼び出すことにより、PaymentIntent を確定できます。カード支払いでは、オーソリとキャプチャーの分離もサポートされています。

支払いで3D セキュア認証などの追加アクションが必要な場合、PaymentIntent のステータスは requires_action に設定されます。支払いが失敗すると、ステータスは requires_payment_method に戻され、ユーザにエラーを表示する必要があります。支払いで追加認証が求められない場合は、支払いが作成され、PaymentIntent のステータスは succeeded に設定されます。

curl https://api.stripe.com/v1/payment_intents \
  -u 
sk_test_BQokikJOvBiI2HlWgH4olfQ2
: \
  -d "payment_method"="{{PAYMENT_METHOD_ID}}" \
  -d "amount"=1099 \
  -d "currency"="usd" \
  -d "confirmation_method"="manual" \
  -d "confirm"="true"

後で再利用するためにカードを保存する場合は、PaymentMethod を格納するため Customer を作成して、PaymentIntent の作成時に以下の追加パラメータを渡します。

• 顧客。Customer の ID に設定します。
• setup_future_usage。off_session に設定し、顧客が存在しない場合のオフセッションの支払いにこの PaymentMethod を再利用する予定であることを Stripe に伝えます。このプロパティを設定すると、PaymentIntent が確定され、ユーザによる必要な操作がすべて完了した後で、顧客に PaymentMethod が保存されます。詳細については、支払い後のカードの保存に関するコード例を参照してください。

顧客による操作が必要な状況を処理するためのコードを記述します。通常、ステップ 4 のサーバーでの確定後に支払いは成功しますが、3D セキュアによる認証など、PaymentIntent で顧客による追加の対応が必要になったときに、このコードが機能します。

stripe.handleCardAction を使用して、顧客のアクションを処理するための UI を起動させます。認証が成功した場合、PaymentIntent’ のステータスは requires_confirmation になります。サーバーで PaymentIntent を再度確定して支払いを完了します。

テスト中は、認証が必要なテストカード番号 (4000002760003184

など) を使用して、このフローを必ず実施するようにします。認証を必要としないカード (4242424242424242

など) を使用すると、フローのこの部分がスキップされ、ステップ 4 で完了します。

const handleServerResponse = async (response) => {
  if (response.error) {
    // Show error from server on payment form
  } else if (response.requires_action) {
    // Use Stripe.js to handle the required card action
    const { error: errorAction, paymentIntent } =
      await stripe.handleCardAction(response.payment_intent_client_secret);
    if (errorAction) {
      // Show error from Stripe.js in payment form
    } else {
      // The card action has been handled
      // The PaymentIntent can be confirmed again on the server
      const serverResponse = await fetch('/pay', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ payment_intent_id: paymentIntent.id })
      });
      handleServerResponse(await serverResponse.json());
    }
  } else {
    // Show success message
  }
}

このコードは、直前のステップでの処理と同様に、支払いに追加の認証が必要な場合にのみ実行されます。どの支払いでもこの追加ステップが必要になる場合があるため、コード自体はオプションではありません。

上記で設定したものと同じエンドポイントを使用し、PaymentIntent を再度確定することにより、支払いを完了して注文のフルフィルメントを実行します。この確定は支払い試行から 1 時間以内に実行してください。実行されない場合は、支払いが失敗して取引が requires_payment_method に戻されます。

curl https://api.stripe.com/v1/payment_intents/{{PAYMENT_INTENT_ID}}/confirm \
  -u 
sk_test_BQokikJOvBiI2HlWgH4olfQ2
: \
  -X "POST"

​​この実装の準備ができていることを確認するために、サンドボックスで使用できるテストカードがいくつかあります。任意のセキュリティコードおよび将来の有効期限を指定して使用します。

テストカードの一覧については、テストに関するガイドを参照してください。