# 顧客が支払いに使用した、その決済手段を保存する

顧客の決済時に、将来の購入に備えて顧客の決済詳細を保存する方法をご紹介します。

# Checkout Sessions API

> This is a Checkout Sessions API for when payment-ui is embedded-components. View the full page at https://docs.stripe.com/payments/save-during-payment?payment-ui=embedded-components.

[Checkout Sessions API](https://docs.stripe.com/api/checkout/sessions.md) を使用して、購入時の決済詳細を保存します。これは、次のような場合に便利です。

- 顧客にコマース注文の請求を行い、以降の購入に備えて決済情報を保存します。
- 継続課金の初回の支払いを開始します。
- 後で全額を決済するために、デポジットを請求し、決済詳細を保存する。

## 法令遵守

顧客の決済情報を将来の利用に備えて保存する際（将来の購入に向けた決済フローでの決済手段の表示、または顧客がウェブサイトやアプリを積極的に使用していないときの請求など）は、適用されるすべての法令、規制、ネットワーク規則を遵守する責任があります。顧客の決済手段を保存または請求する前に、以下を確認してください。

- 決済手段の詳細を保存する方法を示す、次のような規約をウェブサイトまたはアプリに追加します。
  - 指定された取引において顧客に代わって決済または一連の決済を開始することに対する顧客の同意。
  - 予期される決済時期と決済頻度 (たとえば、請求が予定されている分割払いなのか、サブスクリプションの決済なのか、あるいは予定されていないトップアップなのか)。
  - 決済金額の決定方法。
  - 決済手段をサブスクリプションサービスに使用する場合は、キャンセルに関するポリシー。
- 規約に記載されている目的にのみ、保存された決済手段を使用してください。
- この特定の使用について顧客から明示的な同意を取得します。たとえば、「将来の使用に備えて決済手段を保存する」チェックボックスを含めます。
- 顧客の規約への書面による同意を記録します。

> Checkout Sessions API で Elements を使用する場合、保存された決済手段はカードと ACH Direct Debit のみがサポートされます。銀行口座など、他の決済手段は保存できません。

## 前提条件

1. 決済ガイドに従って[決済を受け付け](https://docs.stripe.com/payments/accept-a-payment.md?payment-ui=checkout&ui=stripe-hosted)ます。
1. このガイドに従って、決済中に使用された決済手段を保存し、同じ顧客による今後の決済で使用できるようにします。

## 保存済みの決済手段を有効にする

> 世界のプライバシー法は複雑で、分かりにくいものです。顧客の決済手段の詳細を保存する機能を実装する前に、法務チームと協力して、プライバシーと法令遵守のフレームワークに準拠していることを確認しましょう。

顧客が将来の使用に備えて決済手段を保存できるようにするには、Checkout Session の作成時に [saved_payment_method_options.payment_method_save](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-saved_payment_method_options-payment_method_save) パラメーターを指定します。

決済手段を保存するには [Customer](https://docs.stripe.com/api/customers/object.md) が必要です。既存の顧客を渡すか、[customer_creation](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-customer_creation) を Checkout Session で `always` に設定して新しい顧客を作成します。

```curl
curl https://api.stripe.com/v1/checkout/sessions \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d "line_items[0][price]={{PRICE_ID}}" \
  -d "line_items[0][quantity]=2" \
  -d mode=payment \
  -d ui_mode=custom \
  -d customer_creation=always \
  -d "saved_payment_method_options[payment_method_save]=enabled"
```

Checkout Session の作成後、レスポンスで返される [client secret](https://docs.stripe.com/api/checkout/sessions/object.md#checkout_session_object-client_secret) を使用して、[決済ページを構築](https://docs.stripe.com/payments/quickstart-checkout-sessions.md) します。

> 最新バージョンの Stripe.js では、Checkout Session で保存済みの決済手段が有効になっている場合、`enableSave` を `auto` に指定することはオプションです。これはデフォルト値であるためです。

#### HTML + JS

Checkout Session で決済手段の保存が有効になっている場合、Payment Element は自動的に同意収集チェックボックスを表示します。この動作は、`initCheckout` で [elementsOptions](https://docs.stripe.com/js/custom_checkout/init#custom_checkout_init-options-elementsOptions) を使用して明示的に設定できます。

```javascript
const checkout = stripe.initCheckout({
  clientSecret,
  elementsOptions: {savedPaymentMethod: {
      // Default is 'auto' in the latest version of Stripe.js - this configuration is optional
      enableSave: 'auto',
    }
  }
});
```

#### React

Checkout Session で保存済みの決済手段が有効になっている場合、Payment Element は自動的に同意収集用チェックボックスを表示します。この動作は、`CheckoutProvider` の [elementsOptions](https://docs.stripe.com/js/react_stripe_js/checkout/checkout_provider#react_checkout_provider-options-elementsOptions) を使用して明示的に設定できます。

```jsx
import React from 'react';
import {CheckoutProvider} from '@stripe/react-stripe-js/checkout';
import CheckoutForm from './CheckoutForm';

const App = () => {
  const clientSecret = fetch('/create-checkout-session', {method: 'POST'})
    .then((response) => response.json())
    .then((json) => json.checkoutSessionClientSecret)

  return (
    <CheckoutProvider
      stripe={stripe}
      options={{
        clientSecret,
        elementsOptions: {savedPaymentMethod: {
            // Default is 'auto' in the latest version of Stripe.js - this configuration is optional
            enableSave: 'auto',
          }
        },
      }}
    >
      <CheckoutForm />
    </CheckoutProvider>
  );
};

export default App;
```

## 以前に保存した決済手段を再利用する

保存済みの各決済手段は、[Customer](https://docs.stripe.com/api/customers/object.md) オブジェクトにリンクされます。決済セッションを作成する前に、顧客を認証し、対応する [Customer ID](https://docs.stripe.com/api/customers/object.md#customer_object-id) を決済セッションに渡します。

> 最新バージョンの Stripe.js では、Checkout Session で保存済みの決済手段が有効になっている場合、`enableRedisplay` のデフォルトは `auto` です。

Checkout Session で決済手段の保存が有効になっている場合、Payment Element は顧客が決済時に使用できるよう、以前に保存された決済手段を自動的に再表示します。

```curl
curl https://api.stripe.com/v1/checkout/sessions \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d "line_items[0][price]={{PRICE_ID}}" \
  -d "line_items[0][quantity]=2" \
  -d mode=payment \
  -d ui_mode=custom \
  -d "customer={{CUSTOMER_ID}}"
```

#### HTML + JS

`initCheckout` で [elementsOptions](https://docs.stripe.com/js/custom_checkout/init#custom_checkout_init-options-elementsOptions) を使用して、再表示の動作を明示的に設定できます。

```javascript
const checkout = stripe.initCheckout({
  clientSecret,
  elementsOptions: {
    savedPaymentMethod: {
      // Default is 'auto' in the latest version of Stripe.js - this configuration is optional
      enableSave: 'auto',// Default is 'auto' in the latest version of Stripe.js - this configuration is optional
      enableRedisplay: 'auto',
    }
  }
});
```

#### React

`CheckoutProvider` で [elementsOptions](https://docs.stripe.com/js/react_stripe_js/checkout/checkout_provider#react_checkout_provider-options-elementsOptions) を使用して、再表示の動作を明示的に設定できます。

```jsx
import React from 'react';
import {CheckoutProvider} from '@stripe/react-stripe-js/checkout';
import CheckoutForm from './CheckoutForm';

const App = () => {
  const clientSecret = fetch('/create-checkout-session', {method: 'POST'})
    .then((response) => response.json())
    .then((json) => json.checkoutSessionClientSecret)

  return (
    <CheckoutProvider
      stripe={stripe}
      options={{
        clientSecret,
        elementsOptions: {
          savedPaymentMethod: {
            // Default is 'auto' in the latest version of Stripe.js - this configuration is optional
            enableSave: 'auto',// Default is 'auto' in the latest version of Stripe.js - this configuration is optional
            enableRedisplay: 'auto',
          }
        },
      }}
    >
      <CheckoutForm />
    </CheckoutProvider>
  );
};

export default App;
```

## Optional: 保存済みの決済手段 UI を構築する

#### HTML + JS

Payment Element の組み込み UI を使用する代わりに、独自の保存決済手段 UI を構築できます。

Payment Element が同意収集を処理し、以前に保存した決済手段が表示されないようにするには、`initCheckout` で追加の [elementsOptions](https://docs.stripe.com/js/custom_checkout/init#custom_checkout_init-options-elementsOptions) を渡します。

```javascript
const checkout = stripe.initCheckout({
  clientSecret,
  elementsOptions: {savedPaymentMethod: {
      enableSave: 'never',
      enableRedisplay: 'never',
    }
  }
});
```

#### React

Payment Element の組み込み UI を使用する代わりに、独自の保存決済手段 UI を構築できます。

Payment Element が同意収集を処理し、以前に保存した決済手段が表示されないようにするには、`CheckoutProvider` で追加の [elementsOptions](https://docs.stripe.com/js/react_stripe_js/checkout/checkout_provider#react_checkout_provider-options-elementsOptions) を渡します。

```jsx
import React from 'react';
import {CheckoutProvider} from '@stripe/react-stripe-js/checkout';
import CheckoutForm from './CheckoutForm';

const App = () => {
  const clientSecret = fetch('/create-checkout-session', {method: 'POST'})
    .then((response) => response.json())
    .then((json) => json.checkoutSessionClientSecret)

  return (
    <CheckoutProvider
      stripe={stripe}
      options={{
        clientSecret,
        elementsOptions: {savedPaymentMethod: {
            enableSave: 'never',
            enableRedisplay: 'never',
          }
        },
      }}
    >
      <CheckoutForm />
    </CheckoutProvider>
  );
};

export default App;
```

### 同意を収集する

> 世界のプライバシー法は複雑で、分かりにくいものです。顧客の決済手段の詳細を保存する機能を実装する前に、法務チームと協力して、プライバシーと法令遵守のフレームワークに準拠していることを確認しましょう。

ほとんどの場合、決済手段の詳細を保存する前に顧客の同意を収集する必要があります。以下は、チェックボックスを使用して同意を取得する方法の例です。

#### HTML + JS

```html
<label>
  <input type="checkbox" id="save-payment-method-checkbox" />
  Save my payment information for future purchases
</label>
<button id="pay-button">Pay</button>
<div id="confirm-errors"></div>
```

#### React

```jsx
import React from 'react';

type Props = {
  savePaymentMethod: boolean;
  onSavePaymentMethodChange: (save: boolean) => void;
}
const ConsentCollection = (props: Props) => {
  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    props.onSavePaymentMethodChange(e.target.checked);
  };
  return (
    <label>
      <input
        type="checkbox"
        checked={props.savePaymentMethod}
        onChange={handleChange}
      />
      Save my payment information for future purchases
    </label>
  );
};

export default ConsentCollection;
```

[confirm](https://docs.stripe.com/js/custom_checkout/confirm) を呼び出す際に、`savePaymentMethod` パラメーターを渡して、顧客が同意したかどうかを Stripe に示します。顧客の決済の詳細を保存する場合、適用されるすべての法律、規制、ネットワークの規則に準拠する責任があります。

#### HTML + JS

```js
const checkout = stripe.initCheckout({clientSecret});
const button = document.getElementById('pay-button');
const errors = document.getElementById('confirm-errors');
const checkbox = document.getElementById('save-payment-method-checkbox');
const loadActionsResult = await checkout.loadActions();
if (loadActionsResult.type === 'success') {
  const {actions} = loadActionsResult;
  button.addEventListener('click', () => {
    // Clear any validation errors
    errors.textContent = '';
const savePaymentMethod = checkbox.checked;
    actions.confirm({savePaymentMethod}).then((result) => {
      if (result.type === 'error') {
        errors.textContent = result.error.message;
      }
    });
  });
}
```

#### React

```jsx
import React from 'react';
import {useCheckout} from '@stripe/react-stripe-js/checkout';

type Props = {
  savePaymentMethod: boolean;
}
const PayButton = (props: Props) => {
  const checkoutState = useCheckout();
  const [loading, setLoading] = React.useState(false);
  const [error, setError] = React.useState(null);

  if (checkoutState.type === 'loading') {
    return (
      <div>Loading...</div>
    );
  } else if (checkoutState.type === 'error') {
    return (
      <div>Error: {checkoutState.error.message}</div>
    );
  }
  const {confirm} = checkoutState.checkout;
  const handleClick = () => {
    setLoading(true);confirm({savePaymentMethod: props.savePaymentMethod}).then((result) => {
      if (result.type === 'error') {
        setError(result.error)
      }
      setLoading(false);
    })
  };

  return (
    <div>
      <button disabled={!loading} onClick={handleClick}>
        Pay
      </button>
      {error && <div>{error.message}</div>}
    </div>
  )
};

export default PayButton;
```

### 保存された決済手段を表示する

フロントエンドで [savedPaymentMethods](https://docs.stripe.com/js/custom_checkout/session_object#custom_checkout_session_object-savedPaymentMethods) 配列を使用して、顧客の利用可能な決済手段を表示します。

> `savedPaymentMethods` 配列には、[allow_redisplay](https://docs.stripe.com/api/payment_methods/object.md#payment_method_object-allow_redisplay) が `always` に設定された決済手段のみが含まれます。顧客から [同意を収集](https://docs.stripe.com/payments/save-during-payment.md#collect-consent) する手順に従い、`allow_redisplay` パラメーターを正しく設定してください。

#### HTML + JS

```html
<div id="saved-payment-methods"></div>
```

```js
const checkout = stripe.initCheckout({clientSecret});
const loadActionsResult = await checkout.loadActions();
if (loadActionsResult.type === 'success') {
  const container = document.getElementById('saved-payment-methods');
  const {actions} = loadActionsResult;
  actions.getSession().savedPaymentMethods.forEach((pm) => {
    const label = document.createElement('label');
    const radio = document.createElement('input');

    radio.type = 'radio';
    radio.value = pm.id;

    label.appendChild(radio);
    label.appendChild(document.createTextNode(`Card ending in ${pm.card.last4}`));
    container.appendChild(label);
  });
}
```

#### React

```jsx
import React from 'react';
import {useCheckout} from '@stripe/react-stripe-js/checkout';

type Props = {
  selectedPaymentMethod: string | null;
  onSelectPaymentMethod: (paymentMethod: string) => void;
};
const PaymentMethods = (props: Props) => {const checkoutState = useCheckout();

  if (checkoutState.type === 'loading') {
    return (
      <div>Loading...</div>
    );
  } else if (checkoutState.type === 'error') {
    return (
      <div>Error: {checkoutState.error.message}</div>
    );
  }const {savedPaymentMethods} = checkoutState.checkout;

  const handleOptionChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    props.onSelectPaymentMethod(e.target.value);
  };

  return (
    <div>
      {savedPaymentMethods.map((pm) => (
        <label key={pm.id}>
          <input
            type="radio"
            value={pm.id}
            checked={props.selectedPaymentMethod === pm.id}
            onChange={handleOptionChange}
          />
          Card ending in {pm.card.last4}
        </label>
      ))}
    </div>
  );
};

export default PaymentMethods;
```

### 保存された決済手段で確定する

顧客が保存済みの決済手段を選択し、決済を実行する準備ができたら、[confirm](https://docs.stripe.com/js/custom_checkout/confirm) を呼び出して [paymentMethod](https://docs.stripe.com/js/custom_checkout/confirm#custom_checkout_session_confirm-options-paymentMethod) ID を渡します。

#### HTML + JS

```html
<button id="pay-button">Pay</button>
```

```js
const checkout = stripe.initCheckout({clientSecret});

const loadActionsResult = await checkout.loadActions();
if (loadActionsResult.type === 'success') {
  const container = document.getElementById('saved-payment-methods');
  const {actions} = loadActionsResult;
  actions.getSession().savedPaymentMethods.forEach((pm) => {
    const label = document.createElement('label');
    const radio = document.createElement('input');

    radio.type = 'radio';
    radio.value = pm.id;

    label.appendChild(radio);
    label.appendChild(document.createTextNode(`Card ending in ${pm.card.last4}`));
    container.appendChild(label);
  });
}
```

#### React

```jsx
import React from 'react';
import {useCheckout} from '@stripe/react-stripe-js/checkout';

type Props = {
  selectedPaymentMethod: string | null;
}
const PayButton = (props: Props) => {
  const checkoutState = useCheckout();
  const [loading, setLoading] = React.useState(false);

  if (checkoutState.type === 'loading') {
    return (
      <div>Loading...</div>
    );
  } else if (checkoutState.type === 'error') {
    return (
      <div>Error: {checkoutState.error.message}</div>
    );
  }
  const {confirm} = checkoutState.checkout;

  const handleClick = () => {
    setLoading(true);confirm({paymentMethod: props.selectedPaymentMethod}).then((result) => {
      if (result.error) {
        // Confirmation failed. Display the error message.
      }
      setLoading(false);
    })
  };

  return (
    <button disabled={loading} onClick={handleClick}>
      Pay
    </button>
  )
};

export default PayButton;
```


# Payment Intents API

> This is a Payment Intents API for when payment-ui is elements. View the full page at https://docs.stripe.com/payments/save-during-payment?payment-ui=elements.

[Payment Intents API](https://docs.stripe.com/api/payment_intents.md) を使用して、購入から支払い詳細を保存します。以下のようなユースケースがあります。

- 顧客に EC ストアの注文の請求を行い、以降の購入に備えて情報を保存します。
- 継続支払いの初回の支払いを開始します。
- 頭金を請求し、情報を保存して後から全額を請求できるようにします。

> #### カード提示取引
> 
> Stripe Terminal を介した支払いなどのカード提示取引では、別のプロセスを使用して決済手段を保存します。詳細については、[Terminal のドキュメント](https://docs.stripe.com/terminal/features/saving-payment-details/save-after-payment.md)をご覧ください。

## 法令遵守

顧客の決済情報を将来の利用に備えて保存する際（将来の購入に向けた決済フローでの決済手段の表示、または顧客がウェブサイトやアプリを積極的に使用していないときの請求など）は、適用されるすべての法令、規制、ネットワーク規則を遵守する責任があります。顧客の決済手段を保存または請求する前に、以下を確認してください。

- 決済手段の詳細を保存する方法を示す、次のような規約をウェブサイトまたはアプリに追加します。
  - 指定された取引において顧客に代わって決済または一連の決済を開始することに対する顧客の同意。
  - 予期される支払い時期と支払い頻度 (たとえば、請求が予定されている分割払いなのか、サブスクリプションの決済なのか、あるいは予定されていないトップアップなのか)。
  - 支払い金額の決定方法
  - 支払い方法をサブスクリプションサービスに使用する場合は、キャンセルに関するポリシー
- 規約に記載されている目的にのみ、保存された決済手段を使用してください。
- この特定の使用について顧客から明示的な同意を取得します。たとえば、「将来の使用に備えて決済手段を保存する」チェックボックスを含めます。
- 顧客の規約への書面による同意を記録します。

## 前提条件

1. Payment Intents API ガイドに従って[決済を受け付け](https://docs.stripe.com/payments/accept-a-payment.md?payment-ui=elements&api-integration=paymentintents)ます。
1. このガイドに従って、決済中に使用された決済手段を保存し、同じ顧客による今後の決済で使用できるようにします。

## 決済中の決済手段の保存 [サーバ側]

将来の利用に備えて顧客の決済手段を保存するように Payment Element を設定できます。このセクションでは、[決済手段の保存機能](https://docs.stripe.com/payments/save-customer-payment-methods.md)を導入する方法を説明しています。Payment Element で以下を実行できます。

- 買い手に支払い方法を保存することの同意を求める
- 買い手が同意した場合に支払い方法を保存する
- 将来の購入時に保存した支払い方法を買い手に表示する
- 買い手が紛失したカードまたは期限切れのカードを交換するときに[それらのカードを自動的に更新する](https://docs.stripe.com/payments/cards/overview.md#automatic-card-updates)
![Payment Element と保存した決済手段のチェックボックス](https://b.stripecdn.com/docs-statics-srv/assets/spm-save.fe0b24afd0f0a06e0cf4eecb0ce2403a.png)

決済手段を保存します。
![保存された支払い方法が選択された Payment Element](https://b.stripecdn.com/docs-statics-srv/assets/spm-saved.5dba5a8a190a9a0e9f1a99271bed3f4b.png)

以前に保存した支払い方法を再利用します。

### Payment Element で支払い方法の保存機能を有効にする

サーバー側で [PaymentIntent](https://docs.stripe.com/api/payment_intents/.md) を作成するときに、[CustomerSession](https://docs.stripe.com/api/customer_sessions/.md) も作成します。その際、[Customer ID](https://docs.stripe.com/api/customers/object.md#customer_object-id) を指定して、セッションの [payment_element](https://docs.stripe.com/api/customer_sessions/object.md#customer_session_object-components-payment_element) コンポーネントを有効にします。有効にする保存済みの決済手段[機能](https://docs.stripe.com/api/customer_sessions/create.md#create_customer_session-components-payment_element-features)を設定します。たとえば、[payment_method_save](https://docs.stripe.com/api/customer_sessions/create.md#create_customer_session-components-payment_element-features-payment_method_save) を有効にすると、将来使用できるように支払いの詳細を保存するためのチェックボックスが、顧客に表示されます。

PaymentIntent または Checkout セッションで `setup_future_usage` を指定して、決済手段を保存するためのデフォルトの動作を上書きできます。これにより、顧客が明示的に保存を選択しなくても、将来の使用に備えて決済手段を自動的に保存できます。

> [payment_method_remove](https://docs.stripe.com/api/customer_sessions/create.md#create_customer_session-components-payment_element-features-payment_method_remove) を有効にして、保存済みの決済手段を買い手が削除できるようにすると、その決済手段を利用しているサブスクリプションに影響します。決済手段を削除すると、[PaymentMethod](https://docs.stripe.com/api/payment_methods.md) とその [Customer](https://docs.stripe.com/api/customers.md) の関連付けが解除されます。

#### Ruby

```ruby

# Don't put any keys in code. See https://docs.stripe.com/keys-best-practices.
# Find your keys at https://dashboard.stripe.com/apikeys.
Stripe.api_key = '<<YOUR_SECRET_KEY>>'

post '/create-intent-and-customer-session' do
  intent = Stripe::PaymentIntent.create({
    amount: 1099,
    currency: 'usd',
    # In the latest version of the API, specifying the `automatic_payment_methods` parameter
    # is optional because Stripe enables its functionality by default.
    automatic_payment_methods: {enabled: true},
    customer: {{CUSTOMER_ID}},
  })
  customer_session = Stripe::CustomerSession.create({
    customer: {{CUSTOMER_ID}},
    components: {
      payment_element: {
          enabled: true,
          features: {
            payment_method_redisplay: 'enabled',
            payment_method_save: 'enabled',
            payment_method_save_usage: 'off_session',
            payment_method_remove: 'enabled',
          },
        },
    },
  })
  {
    client_secret: intent.client_secret,
    customer_session_client_secret: customer_session.client_secret
  }.to_json
end
```

Elements インスタンスはその CustomerSession の *client secret* (A client secret is used with your publishable key to authenticate a request for a single object. Each client secret is unique to the object it's associated with) を使用して、顧客が保存した支払い方法にアクセスします。CustomerSession の作成時に適切に[エラーを処理](https://docs.stripe.com/error-handling.md)します。エラーが発生した場合、CustomerSession の client secret はオプションなので、Elements インスタンスに指定する必要はありません。

PaymentIntent と CustomerSession の両方の client secret を使用して、Elements インスタンスを作成します。次に、この Elements インスタンスを使用して Payment Element を作成します。

```javascript
// Create the CustomerSession and obtain its clientSecret
const res = await fetch("/create-intent-and-customer-session", {
  method: "POST"
});

const {
  customer_session_client_secret: customerSessionClientSecret
} = await res.json();

const elementsOptions = {
  clientSecret: '{{CLIENT_SECRET}}',customerSessionClientSecret,
  // Fully customizable with appearance API.
  appearance: {/*...*/},
};

// Set up Stripe.js and Elements to use in checkout form, passing the client secret
// and CustomerSession's client secret obtained in a previous step
const elements = stripe.elements(elementsOptions);

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

PaymentIntent の確定時に、顧客が支払いの詳細を保存するためのボックスにチェックマークを付けたかどうかに応じて、Stripe.js が PaymentIntent の [setup_future_usage](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-setup_future_usage) および [allow_redisplay](https://docs.stripe.com/api/payment_methods/object.md#payment_method_object-allow_redisplay) の設定をコントロールします。

### セキュリティコードの再収集を実行する

オプションとして、[PaymentIntent の作成時](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_options-card-require_cvc_recollection)に `require_cvc_recollection` を指定して、顧客がカードで支払う場合にセキュリティコードの再収集を実行します。

### 保存した支払い方法の選択内容を検出する

保存した支払い方法を選択したときにコンテンツを動的に制御するには、Payment Element の `change` イベントをリッスンします。このイベントには、選択した支払い方法の情報が入力されています。

```javascript
paymentElement.on('change', function(event) {
  if (event.value.payment_method) {
    // Control dynamic content if a saved payment method is selected
  }
})
```

## 再利用をサポートする決済手段のみを保存する [サーバ側]

Payment Intent で `setup_future_usage` を有効にしても、すべての決済手段を[再利用可能](https://docs.stripe.com/payments/accept-a-payment.md#save-payment-method-details)にすることはできません。`setup_future_usage` と互換性のある決済手段の詳細については、[決済手段のサポート](https://docs.stripe.com/payments/payment-methods/payment-method-support.md#additional-api-supportability)をご覧ください。

代わりに、決済手段の詳細は、顧客が再利用をサポートする決済手段を選択した場合にのみ保存できます。たとえば、カード決済と Giropay (再利用不可) の両方を受け付ける場合は、`payment_method_options[card]` オブジェクトで `setup_future_usage=off_session` を設定します。

顧客が支払い情報の保存を拒否した場合は、サーバー側で PaymentIntent の `setup_future_usage` を無効にします。クライアント側でのこの調整はサポートされていません。

#### ダッシュボードで支払い方法を管理する

支払い方法は[ダッシュボード](https://dashboard.stripe.com/settings/payment_methods)で管理できます。Stripe は取引額、通貨、決済フローなどの要素に基づいて、適切な支払い方法が返されるように処理します。

#### curl

```bash
curl https://api.stripe.com/v1/payment_intents \
  -u <<YOUR_SECRET_KEY>>: \
  -d "amount"=1099 \
  -d "currency"="usd" \
  -d "automatic_payment_methods[enabled]"="true" \
  -d "payment_method_options[card][setup_future_usage]"="off_session"
```

#### 支払い方法を手動でリストする

また、以下の例のように[支払い方法のタイプ](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_types)を使用して、`card` と `giropay` を一覧表示することもできます。

#### 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 "payment_method_types[]"="giropay" \
  -d "payment_method_options[card][setup_future_usage]"="off_session"
```

## 保存された支払い方法に後で請求する [サーバ側]

> `bancontact`、`ideal`、`sofort` は、デフォルトでは 1 回限りの支払い方法です。将来も使用できるように設定すると、再利用可能な支払い方法タイプ `sepa_debit` が生成されます。このため、保存された支払い方法をクエリーで照会するには `sepa_debit` を使用する必要があります。

> #### 法令遵守
> 
> 顧客の支払いの詳細を保存する際、お客様は適用されるすべての法律、規制、ネットワークの規則に準拠する責任があります。将来の購入に備えて顧客に過去の決済手段を提供する際は、必ず、特定の将来の使用に備えて決済手段の詳細を保存することについての同意を顧客から収集した決済手段をリストアップします。顧客に関連付けられた決済手段のうち、将来の購入用の保存済みの決済手段として顧客に提示できるものと提示できないものを区別するには、[allow_redisplay](https://docs.stripe.com/api/payment_methods/object.md#payment_method_object-allow_redisplay) パラメーターを使用します。

購入者に*オフセッション* (A payment is described as off-session if it occurs without the direct involvement of the customer, using previously-collected payment information)で請求する準備ができたら、Customer ID と PaymentMethod ID を使用して、PaymentIntent を作成します。請求する決済手段を見つけるには、顧客に関連付けられた決済手段を一覧表示します。この例ではカードが一覧表示されますが、サポートされているすべての[タイプ](https://docs.stripe.com/api/payment_methods/object.md#payment_method_object-type)を一覧表示できます。

```curl
curl -G https://api.stripe.com/v1/payment_methods \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d "customer={{CUSTOMER_ID}}" \
  -d type=card
```

Customer ID と PaymentMethod ID を取得したら、支払いの金額と通貨を使用して PaymentIntent を作成します。その他のいくつかのパラメーターを設定して、オフセッションの支払いを行います。

- [off_session](https://docs.stripe.com/api/payment_intents/confirm.md#confirm_payment_intent-off_session) を `true` に設定して、支払いの試行時に購入者が決済フローを実行中でないことと、カード発行会社、銀行、その他の決済機関などのパートナーからの認証リクエストに対応できないことを示します。決済フローの実行時にパートナーが認証をリクエストした場合、Stripe は前回の*オンセッション* (A payment is described as on-session if it occurs while the customer is actively in your checkout flow and able to authenticate the payment method)取引の顧客情報を使用して免除をリクエストします。免除の条件を満していない場合は PaymentIntent からエラーが返されることがあります。
- PaymentIntent の [confirm](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-confirm) プロパティの値を `true` に設定します。これにより、PaymentIntent が作成されると直ちに確定されます。
- [payment_method](https://docs.stripe.com/api.md#create_payment_intent-payment_method) を PaymentMethod の ID に設定し、[customer](https://docs.stripe.com/api.md#create_payment_intent-customer) を Customer の ID に設定します。

#### curl

```bash
curl https://api.stripe.com/v1/payment_intents \
  -u <<YOUR_SECRET_KEY>>: \
  -d amount=1099 \
  -d currency=usd \
  # In the latest version of the API, specifying the `automatic_payment_methods` parameter is optional because Stripe enables its functionality by default.
  -d "automatic_payment_methods[enabled]"=true \-d customer="{{CUSTOMER_ID}}" \
  -d payment_method="{{PAYMENT_METHOD_ID}}" \
  -d return_url="https://example.com/order/123/complete" \
  -d off_session=true \
  -d confirm=true
```

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

テスト用の支払いの詳細とテスト用リダイレクトページを使用して、組み込みを確認できます。以下のタブをクリックすると、各支払い方法の詳細を表示できます。

#### カード

| 決済手段     | シナリオ                                                                                                                                                                                                                                                                       | テスト方法                                                                              |
| -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------- |
| クレジットカード | カードの設定は成功し、*認証* (Strong Customer Authentication (SCA) is a regulatory requirement in effect as of September 14, 2019, that impacts many European online payments. It requires customers to use two-factor authentication like 3D Secure to verify their purchase)は必要ありません。 | クレジットカード番号 `4242 4242 4242 4242` と、任意の有効期限、セキュリティーコード、郵便番号を使用してクレジットカードフォームに入力します。 |
| クレジットカード | このカードは初期設定時に認証が必要であり、それ以降は支払いに成功します。                                                                                                                                                                                                                                       | クレジットカード番号 `4000 0025 0000 3155` と、任意の有効期限、セキュリティーコード、郵便番号を使用してクレジットカードフォームに入力します。 |
| クレジットカード | このカードは、初期設定時も、以降の支払いでも認証が必要です。                                                                                                                                                                                                                                             | クレジットカード番号 `4000 0027 6000 3184` と、任意の有効期限、セキュリティーコード、郵便番号を使用してクレジットカードフォームに入力します。 |
| クレジットカード | 設定中にカードは拒否されます。                                                                                                                                                                                                                                                            | クレジットカード番号 `4000 0000 0000 9995` と、任意の有効期限、セキュリティーコード、郵便番号を使用してクレジットカードフォームに入力します。 |

#### 銀行へのリダイレクト

| 決済手段           | シナリオ                                                                                                         | テスト方法                                                                                                             |
| -------------- | ------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------- |
| Bancontact     | 顧客は、Bancontact を使用して、今後の使用に備えた SEPA ダイレクトデビットによる支払い方法の設定を完了しました。                                             | Bancontact フォームで任意の氏名を使用して、リダイレクトページで **Authorize test setup (テスト設定承認)** をクリックします。                                |
| Bancontact     | 顧客は Bancontact リダイレクトページで認証に失敗します。                                                                           | Bancontact フォームで任意の氏名を使用して、リダイレクトページで **Fail test setup (テスト設定失敗)** をクリックします。                                     |
| BECS ダイレクトデビット | 顧客が BECS ダイレクトデビットによる支払いに成功しました。                                                                             | 口座番号 `900123456` を使用して、フォームに入力します。確定された PaymentIntent のステータスは、まず `processing` に移行し、3 分後に `succeeded` ステータスに移行します。 |
| BECS ダイレクトデビット | 顧客の支払いが `account_closed` エラーコードで失敗します。                                                                       | 口座番号 `111111113` を使用して、フォームに入力します。                                                                                |
| iDEAL          | 顧客は iDEAL を使用して、今後の使用に備えて [SEPA ダイレクトデビット](https://docs.stripe.com/payments/sepa-debit.md)による決済手段の設定を完了しました。 | iDEAL フォームで任意の氏名と銀行を使用し、リダイレクトページで **Authorize test setup (テスト設定承認)** をクリックします。                                   |
| iDEAL          | 顧客は iDEAL リダイレクトページで認証に失敗します。                                                                                | iDEAL フォームで任意の銀行を選択し、任意の氏名を指定して、リダイレクトページで **Fail test setup (テスト設定失敗)** をクリックします。                                |

#### 口座引き落とし

| 決済手段           | シナリオ                                                                         | テスト方法                                                                                                                   |
| -------------- | ---------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------- |
| SEPA ダイレクトデビット | 顧客が SEPA ダイレクトデビットによる支払いに成功しました。                                             | 口座番号 `AT321904300235473204` を使用して、フォームに入力します。確定された PaymentIntent のステータスはまず、processing に移行し、3 分後に succeeded ステータスに移行します。 |
| SEPA ダイレクトデビット | 顧客の Payment Intent のステータスは、`processing` から `requires_payment_method` に移行します。 | 口座番号 `AT861904300235473202` を使用して、フォームに入力します。                                                                           |

### 保存された SEPA デビット PaymentMethod への請求をテストする

iDEAL、Bancontact または Sofort を使用して PaymentIntent  が確定されると、[SEPA ダイレクトデビット](https://docs.stripe.com/payments/sepa-debit.md) の *PaymentMethod* (PaymentMethods represent your customer's payment instruments, used with the Payment Intents or Setup Intents APIs) が生成されます。SEPA ダイレクトデビットは、[通知遅延型](https://docs.stripe.com/payments/payment-methods.md#payment-notification)の決済手段であり、中間の `processing` 状態に移行してから、数日後に `succeeded` または `requires_payment_method` の状態に移行します。

#### メール

`payment_method.billing_details.email` を以下のいずれかの値に設定して、`PaymentIntent` のステータス遷移をテストしてください。任意のテキストとアンダースコアをメールアドレスの前に追加することもできます。例えば、`test_1_generatedSepaDebitIntentsFail@example.com` を使用すると、`PaymentIntent` で使用した際に必ず失敗する SEPA ダイレクトデビットの PaymentMethodになります。

| メールアドレス                                                            | 説明                                                                                                         |
| ------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------- |
| `generatedSepaDebitIntentsSucceed@example.com`                     | `PaymentIntent` のステータスが `processing` から `succeeded` に遷移します。                                                |
| `generatedSepaDebitIntentsSucceedDelayed@example.com`              | `PaymentIntent` のステータスが 3 分後に `processing` から `succeeded` に遷移します。                                          |
| `generatedSepaDebitIntentsFail@example.com`                        | `PaymentIntent` のステータスが `processing` から `requires_payment_method` に遷移します。                                  |
| `generatedSepaDebitIntentsFailDelayed@example.com`                 | `PaymentIntent` のステータスが 3 分後に `processing` から `requires_payment_method` に遷移します。                            |
| `generatedSepaDebitIntentsSucceedDisputed@example.com`             | `PaymentIntent` のステータスが `processing` から `succeeded` に遷移しますが、不審請求の申し立てがすぐに作成されます。                           |
| `generatedSepaDebitIntentsFailsDueToInsufficientFunds@example.com` | `PaymentIntent` のステータスが `processing` から `requires_payment_method` に遷移し、`insufficient_funds` のエラーコードが返されます。 |

#### PaymentMethod

これらの PaymentMethods を使用して `PaymentIntent` のステータスの遷移をテストしてください。これらのトークンは、自動化されたテストで PaymentMethod がサーバー上の SetupIntent にすぐに関連付けられる際に役に立ちます。

| 決済手段                                                                 | 説明                                                                                                         |
| -------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------- |
| `pm_bancontact_generatedSepaDebitIntentsSucceed`                     | `PaymentIntent` のステータスが `processing` から `succeeded` に遷移します。                                                |
| `pm_bancontact_generatedSepaDebitIntentsSucceedDelayed`              | `PaymentIntent` のステータスが 3 分後に `processing` から `succeeded` に遷移します。                                          |
| `pm_bancontact_generatedSepaDebitIntentsFail`                        | `PaymentIntent` のステータスが `processing` から `requires_payment_method` に遷移します。                                  |
| `pm_bancontact_generatedSepaDebitIntentsFailDelayed`                 | `PaymentIntent` のステータスが 3 分後に `processing` から `requires_payment_method` に遷移します。                            |
| `pm_bancontact_generatedSepaDebitIntentsSucceedDisputed`             | `PaymentIntent` のステータスが `processing` から `succeeded` に遷移しますが、不審請求の申し立てがすぐに作成されます。                           |
| `pm_bancontact_generatedSepaDebitIntentsFailsDueToInsufficientFunds` | `PaymentIntent` のステータスが `processing` から `requires_payment_method` に遷移し、`insufficient_funds` のエラーコードが返されます。 |

## See also

- [アプリ内決済時に支払い情報を保存する](https://docs.stripe.com/payments/mobile/save-during-payment.md)
- [Checkout セッションでの支払いの詳細を保存する](https://docs.stripe.com/payments/checkout/how-checkout-works.md#save-payment-methods)
- [支払いの事前設定](https://docs.stripe.com/payments/save-and-reuse.md)
- [決済後のイベントを処理](https://docs.stripe.com/webhooks/handling-payment-events.md)