# カードの基本的な組み込みを移行する

カード認証時に発生する銀行からのリクエストを処理できる実装に移行します。

[銀行認証なしのカード支払い](https://docs.stripe.com/payments/without-card-authentication.md)のガイドに沿って作成された支払いは、銀行が顧客に購入の認証を求めると拒否されます。

以下のダッシュボードのように、支払いの失敗が多く表示されるようになったり、または API で `requires_action_not_handled` エラーコードが確認されるようになった場合、これらの支払いを拒否するのではなく、支払いを処理するために基本の組み込みをアップグレードします。
![この支払いについて銀行が認証を要求していることを示す、失敗した決済を表示するダッシュボード](https://b.stripecdn.com/docs-statics-srv/assets/failed-payment-dashboard.9e22ec31f3c7063665911e26e389c5dc.png)

このガイドを使用して、以前のガイドに沿って構築された実装のアップグレード方法をご紹介します。ここでは、モーダルを表示して顧客に支払いの認証を促すサーバーとクライアントのコードを追加します。

> この組み込みの[完全なサンプル](https://github.com/stripe-samples/accept-a-payment/tree/master/custom-payment-flow)は、GitHub でご覧ください。

## 支払いに認証が必要かどうか確認する [サーバー側]

PaymentIntent を作成するサーバー上のエンドポイントに 2 つの変更を加えます。

1. [error_on_requires_action](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-error_on_requires_action) パラメーターを**削除**して、認証を必要とする支払いが再び失敗しないようにします。代わりに、PaymentIntent のステータスが `requires_action` に変化します。
1. `confirmation_method` パラメーターを**追加**して、認証リクエストを処理した後に、支払いを再度 (手動で) 明示的に確定することを示します。

#### curl

```bash
curl https://api.stripe.com/v1/payment_intents \
  -u <<YOUR_SECRET_KEY>>: \
  -d amount=1099 \
  -d currency=usd \
  -d payment_method_types[]=card \
  -d confirm=true \-d payment_method="{{PAYMENT_METHOD_ID}}" \
  -d confirmation_method=manual
```

次に、「レスポンス生成」関数を更新して、エラーを返すのではなく、`requires_action` 状態を処理します。

#### curl

```bash
# If the request succeeds, check the
# PaymentIntent's `status` and handle
# its `next_action`.
```

## 顧客に認証を行うように依頼します。 [クライアント側]

次に、クライアント側のコードを更新し、Stripe に対して、顧客の認証が必要な場合にモーダルを表示するように指示します。

PaymentIntent のステータスが `requires_action` になったら、[stripe.handleCardAction](https://docs.stripe.com/js.md#stripe-handle-card-action) を使用します。成功すると、PaymentIntent のステータスが `requires_confirmation` になります。次にサーバーで PaymentIntent を再度確認して支払いを完了する必要があります。

```javascript
const handleServerResponse = async (responseJson) => {
  if (responseJson.error) {
    // Show error from server on payment form} else if (responseJson.requiresAction) {
    // Use Stripe.js to handle the required card action
    const { error: errorAction, paymentIntent } =
      await stripe.handleCardAction(responseJson.clientSecret);

    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 を再度確定する [サーバ側]

前回使用したものと同じエンドポイントを使用し、PaymentIntent を再度*確定* (Confirming an intent indicates that the customer intends to use the current or provided payment method. Upon confirmation, the intent attempts to initiate the portions of the flow that have real-world side effects)して支払いを完了し、注文を処理します。1 時間以内に再度確定しないと、支払いの試行は失敗し、取引は `requires_payment_method` に戻ります。

#### curl

```bash
curl https://api.stripe.com/v1/payment_intents/{{PAYMENT_INTENT_ID}}/confirm \
  -u <<YOUR_SECRET_KEY>>: \
  -X "POST"
```

## 組み込みをテストする

サンドボックスでテストカードを使用し、お客様の組み込みが正しくアップグレードされているかどうか確認してください。Stripe は、サンドボックスのモーダル内でテスト用の偽の認証ページを表示しますので、ここで認証の成功や失敗をシミュレーションできます。本番環境では、モーダルに表示される UI は銀行によってコントロールされます。

| 番号               | 説明                                                              |
| ---------------- | --------------------------------------------------------------- |
| 4242424242424242 | 成功し、支払いがすぐに処理されます。                                              |
| 4000000000009995 | 常に支払い拒否コード `insufficient_funds` で失敗します。                         |
| 4000002500003155 | 認証を必要とします。この組み込みでは、`authentication_not_handled` という拒否コードで失敗します。 |