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/v3/"></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);
  }
}

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

Create a new PaymentIntent with the ID of the PaymentMethod created on your client. You can confirm the PaymentIntent by setting the confirm property to true when the PaymentIntent is created or by calling confirm after creation. Separate authorization and capture is also supported for card payments.

支払いで 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"

If you want to save the card to reuse later, create a Customer to store the PaymentMethod and pass the following additional parameters when creating the PaymentIntent:

• customer. Set to the ID of the Customer.
• setup_future_usage. Set to off_session to tell Stripe that you plan to reuse this PaymentMethod for off-session payments when your customer is not present. Setting this property saves the PaymentMethod to the Customer after the PaymentIntent is confirmed and any required actions from the user are complete. See the code sample on saving cards after a payment for more details.

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

Use stripe.handleCardAction to trigger the UI for handling customer action. If authentication succeeds, the PaymentIntent has a status of requires_confirmation. Confirm the PaymentIntent again on your server to finish the payment.

While testing, use a test card number that requires authentication (for example, 4000002760003184

) to force this flow. Using a card that doesn’t require authentication (for example, 4242424242424242

) skips this part of the flow and completes at step 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"

​​Several test cards are available for you to use in a sandbox to make sure this integration is ready. Use them with any CVC and an expiration date in the future.

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