# PayTo 支払いの事前設定

PayTo 支払いを事前設定する方法をご紹介します。

PayTo を使用すると、オーストラリアの顧客は、バンキングアプリで 1 回限りの決済と継続課金の PayTo 同意書を[認証](https://docs.stripe.com/payments/payment-methods.md#customer-actions)できます。*顧客* (Customer objects represent customers of your business. They let you reuse payment methods and give you the ability to track multiple payments) は、保留中の同意書リクエストについての通知を受け取り、同意書規約を承認してからアプリに戻ります。

将来の決済に備えて PayTo 同意書を設定することで、将来の決済の収集に向けて現時点で顧客の承認を得ることができます。顧客はバンキングアプリで PayTo の同意書を表示、管理、一時停止、取り消すことができます。

> Stripe は、顧客による PayTo 同意書の変更や一時停止に対応していません。顧客が同意書を一時停止または変更しようとした場合、同意書をキャンセルし、[`mandate.updated` Webhook](https://docs.stripe.com/api/events/types.md#event_types-mandate.updated)] を送信します。Webhook を受信すると、顧客に連絡して、顧客が同意書を調整した理由を確認し、新しい同意書を設定できます。

# Checkout

> This is a Checkout for when payment-ui is checkout. View the full page at https://docs.stripe.com/payments/payto/set-up-payment?payment-ui=checkout.

## 支払いを設定する

> このガイドは、決済導入の基本的な[今後の支払いの設定](https://docs.stripe.com/payments/checkout/save-and-reuse.md)に基づいています。

Payto を支払い方法として有効にするには、新しい [Checkout セッション](https://docs.stripe.com/api/checkout/sessions.md) を作成してください。

1. [モード](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-mode)を `setup` に設定します。
1. [決済手段オプション](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-payment_method_options-payto)を使用して顧客に同意させる同意書の規約を指定します。
1. `payto` を `payment_method_types` のリストに追加します。

#### Stripe ホスト型ページ

```curl
curl https://api.stripe.com/v1/checkout/sessions \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d "customer={{CUSTOMER_ID}}" \
  -d mode=setup \
  -d "payment_method_options[payto][mandate_options][amount_type]=maximum" \
  -d "payment_method_options[payto][mandate_options][payment_schedule]=annual" \
  -d "payment_method_options[payto][mandate_options][amount]=150000" \
  -d "payment_method_options[payto][mandate_options][payments_per_period]=13" \
  -d "payment_method_options[payto][mandate_options][start_date]=2026-12-25" \
  -d "payment_method_options[payto][mandate_options][end_date]=2036-12-25" \
  -d "payment_method_options[payto][mandate_options][purpose]=mortgage" \
  -d "payment_method_types[]=card" \
  -d "payment_method_types[]=payto" \
  --data-urlencode "success_url=https://example.com/success"
```

#### 組み込みフォーム

```curl
curl https://api.stripe.com/v1/checkout/sessions \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d "customer={{CUSTOMER_ID}}" \
  -d mode=setup \
  -d "payment_method_options[payto][mandate_options][amount_type]=maximum" \
  -d "payment_method_options[payto][mandate_options][payment_schedule]=annual" \
  -d "payment_method_options[payto][mandate_options][amount]=150000" \
  -d "payment_method_options[payto][mandate_options][payments_per_period]=13" \
  -d "payment_method_options[payto][mandate_options][start_date]=2026-12-25" \
  -d "payment_method_options[payto][mandate_options][end_date]=2036-12-25" \
  -d "payment_method_options[payto][mandate_options][purpose]=mortgage" \
  -d "payment_method_types[]=card" \
  -d "payment_method_types[]=payto" \
  --data-urlencode "return_url=https://example.com/return" \
  -d ui_mode=embedded_page
```

Stripe はさまざまな種類の同意書に対応し、同意書の金額、期間、頻度、目的を管理できます。できる限り要件に一致する同意書規約を指定してください。これらの詳細な条件は承認時に顧客に表示されるため、正確にすることで購入率を向上できます。

Stripe は、*加盟店カテゴリーコード (MCC)* (A Merchant Category Code (MCC) is a four-digit number that classifies the type of goods or services a business offers) に基づいて、デフォルトの `purpose` を推定します。デフォルト値が同意書の目的を正確に表していない場合は、[有効な値](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-payment_method_options-payto-mandate_options-purpose)のいずれかを使用してこのフィールドを上書きできます。purposeを指定しない場合のデフォルト値は、[Mandate](https://docs.stripe.com/api/mandates/object.md#mandate_object-payment_method_details-payto) オブジェクトで確認できます。

## PayTo PaymentMethod に後で請求する

顧客に支払いを行う前に、Checkout Session から同意書 ID、顧客 ID、支払い方法 ID を使用して [SetupIntent](https://docs.stripe.com/payments/setup-intents.md) を[取得](https://docs.stripe.com/api/setup_intents/retrieve.md)し、同意書 ID、顧客 ID、支払い方法 ID を確認します。

```curl
curl https://api.stripe.com/v1/setup_intents/{{SETUPINTENT_ID}} \
  -u "<<YOUR_SECRET_KEY>>:"
```

以下のレスポンスで必要な ID を確認してください。

#### Json

```json
{
  // ...
  "customer": "cus_PW6rQWRGAaBD7z",  // <---- Here is the customer
  "mandate": "mandate_1Ok6ZrA8DuEjWaGw2nrO9xeS", // <---- Here is the mandate
  "metadata": {},
  "next_action": null,
  "on_behalf_of": null,
  "payment_method": "pm_1Ok4l9A8DuEjWaGwhB4SGrWh", // <---- Here is the payment method
  "payment_method_configuration_details": null,
  "payment_method_options": {
    "payto": {
      "mandate_options": {
        "amount": 150000,
        "amount_type": "maximum",
        "start_date": "2026-12-25",
        "end_date": "2036-12-25",
        "payment_schedule": "annual",
        "payments_per_period": 13,
        "purpose": "mortgage",
      }
    }
  },
  "payment_method_types": [
    "payto"
  ],
  "single_use_mandate": null,
  "status": "succeeded",
  "usage": "off_session"
  // ...
}
```

PaymentMethod、同意書、顧客 ID を使用して *PaymentIntent* (API object that represents your intent to collect payment from a customer, tracking charge attempts and payment state changes throughout the process) を作成します。

```curl
curl https://api.stripe.com/v1/payment_intents \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d "payment_method_types[]=payto" \
  -d amount=1099 \
  -d currency=aud \
  -d "customer={{CUSTOMER_ID}}" \
  -d "payment_method={{PAYMENTMETHOD_ID}}" \
  -d "mandate={{MANDATE_ID}}" \
  -d confirm=true
```

### 注文のフルフィルメント

決済受け付け後に、[注文のフルフィルメントを実行](https://docs.stripe.com/checkout/fulfillment.md)する方法を説明します。

## 実装内容をテストする

以下のさまざまなテスト用 PayID と銀行口座情報を使用して、テスト API キーで PayTo の実装内容をテストします。各セットによって、本番環境でシステムが直面する各種シナリオが再現されています。

#### PayID

| PayID                                                    | 説明                                                                                                                                                                                                                              |
| -------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `{any_prefix}+succeed@{any_domain}`                      | PaymentIntent のステータスは、`requires_action` から 10 秒後に `processing` に移行し、さらに 5 秒後に `succeeded` に移行します。同意書は `active` 状態になります。                                                                                                         |
| `{any_prefix}+decline@{any_domain}`                      | PaymentIntent のステータスは、`requires_action` から 10 秒後に `requires_payment_method` に移行します。Stripe は `payment_method_provider_decline` エラーコードと `invalid_authorization` 拒否コードを返します。同意書は `inactive` 状態になります。                               |
| `{any_prefix}+expire@{any_domain}`                       | PaymentIntent のステータスは、`requires_action` から 10 秒後に `requires_payment_method` に移行します。Stripe は `payment_method_provider_decline` エラーコードと `generic_decline` 拒否コードを返します。同意書は `inactive` 状態になります。                                     |
| `{any_prefix}+insufficient_funds@{any_domain}`           | PaymentIntent のステータスは、10 秒後に `requires_action` から `processing` に移行し、さらに 5 秒後に `requires_payment_method` に移行します。Stripe は、 `payment_method_provider_decline` エラーコードと `insufficient_funds` 拒否コードを返します。同意書のステータスは `inactive` になります。 |
| `{any_prefix}+revoke@{any_domain}`                       | PaymentIntent のステータスは、`requires_action` から 10 秒後に `processing` に移行し、さらに 5 秒後に `succeeded` に移行します。同意書は `active` 状態で開始し、1 分後に `inactive` 状態に移行します。                                                                                |
| `{any_prefix}+agreement_type_not_supported@{any_domain}` | PaymentIntent のステータスは、10 秒後に `requires_action` から `requires_payment_method` に移行します。Stripe は、`payment_method_provider_decline` エラーコードを返します。同意書のステータスは `inactive` になります。                                                          |

#### 口座番号 + BSB 番号

| BSB 番号   | 口座番号        | 説明                                                                                                                                                                                                                              |
| -------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `000000` | `000123456` | PaymentIntent のステータスは、`requires_action` から 10 秒後に `processing` に移行し、さらに 5 秒後に `succeeded` に移行します。同意書は `active` 状態になります。                                                                                                         |
| `000000` | `333333335` | PaymentIntent のステータスは、`requires_action` から 10 秒後に `requires_payment_method` に移行します。Stripe は `payment_method_provider_decline` エラーコードと `invalid_authorization` 拒否コードを返します。同意書は `inactive` 状態になります。                               |
| `000000` | `333333337` | PaymentIntent のステータスは、`requires_action` から 10 秒後に `requires_payment_method` に移行します。Stripe は `payment_method_provider_decline` エラーコードと `generic_decline` 拒否コードを返します。同意書は `inactive` 状態になります。                                     |
| `000000` | `222222227` | PaymentIntent のステータスは、10 秒後に `requires_action` から `processing` に移行し、さらに 5 秒後に `requires_payment_method` に移行します。Stripe は、 `payment_method_provider_decline` エラーコードと `insufficient_funds` 拒否コードを返します。同意書のステータスは `inactive` になります。 |
| `000000` | `444444447` | PaymentIntent のステータスは `requires_action` から 10 秒後に `processing` に移行し、さらに 5 秒後に `succeeded` に移行します。 同意書は `active` の状態で開始し、1 分後に `inactive` に移行します。                                                                                |
| `000000` | `666666667` | PaymentIntent のステータスは、10 秒後に `requires_action` から `requires_payment_method` に移行します。Stripe は、`payment_method_provider_decline` エラーコードを返します。同意書のステータスは `inactive` になります。                                                          |


# Elements

> This is a Elements for when payment-ui is elements. View the full page at https://docs.stripe.com/payments/payto/set-up-payment?payment-ui=elements.

## Stripe を設定する [サーバー側]

まず、Stripe アカウントが必要です。[今すぐご登録ください](https://dashboard.stripe.com/register)。

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

#### Ruby

```bash
# Available as a gem
sudo gem install stripe
```

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

## 顧客を作成する [サーバー側]

顧客がビジネスでアカウントを作成したら、*顧客* (Customer objects represent customers of your business. They let you reuse payment methods and give you the ability to track multiple payments)を作成し、アカウントを表す内部表記と関連付けます。このようにすると、保存されている支払い方法の詳細を後で取得して使用することができます。

```curl
curl https://api.stripe.com/v1/customers \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d "name=Jenny Rosen" \
  --data-urlencode "email=jenny@example.com"
```

## SetupIntent を作成する [サーバー側]

[SetupIntent](https://docs.stripe.com/api/setup_intents/object.md) は顧客から将来の決済を収集する意図を示すオブジェクトであり、承認プロセスを追跡します。PayTo 決済手段を受け付ける SetupIntent を作成するには、同意書の規約を指定し、[payment_method_types](https://docs.stripe.com/api/setup_intents/create.md#create_setup_intent-payment_method_types) リストに `payto` を指定します。SetupIntent の作成時に渡す決済手段タイプのリストを保持している場合は、それに `payto` を追加します。

[決済手段オプション](https://docs.stripe.com/api/setup_intents/create.md#create_setup_intent-payment_method_options-payto)を使用して顧客に同意させる同意書の規約を指定します。

```curl
curl https://api.stripe.com/v1/setup_intents \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d "payment_method_types[]=payto" \
  -d "customer={{CUSTOMER_ID}}" \
  -d "payment_method_options[payto][mandate_options][amount_type]=maximum" \
  -d "payment_method_options[payto][mandate_options][payment_schedule]=annual" \
  -d "payment_method_options[payto][mandate_options][amount]=150000" \
  -d "payment_method_options[payto][mandate_options][payments_per_period]=13" \
  -d "payment_method_options[payto][mandate_options][start_date]=2026-12-25" \
  -d "payment_method_options[payto][mandate_options][end_date]=2036-12-25" \
  -d "payment_method_options[payto][mandate_options][purpose]=mortgage"
```

Stripe はさまざまな種類の同意書に対応し、同意書の金額、期間、頻度、目的を管理できます。できる限り要件に一致する同意書規約を指定してください。これらの詳細な条件は承認時に顧客に表示されるため、正確にすることで購入率を向上できます。

Stripe は、*加盟店カテゴリコード (MCC)* (A Merchant Category Code (MCC) is a four-digit number that classifies the type of goods or services a business offers) に基づいてデフォルトの `purpose` を推定します。デフォルト値が同意書の目的を正確に表していない場合は、[有効な値のいずれか](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_options-payto-mandate_options-purpose)を使用してこのフィールドを上書きできます。[Mandate](https://docs.stripe.com/api/mandates/object.md#mandate_object-payment_method_details-payto) オブジェクトで、purpose を指定しない場合のデフォルト値を確認できます。

### client secret を取得する

SetupIntent には、*client secret* (The client secret is a unique key returned from Stripe as part of a PaymentIntent. This key lets the client access important fields from the PaymentIntent (status, amount, currency) while hiding sensitive ones (metadata, customer)) が含まれています。これは、支払いプロセスを安全に完了するためにクライアント側で使用されます。client secret をクライアント側に渡す際は、いくつかの方法を使用できます。

#### 1 ページのアプリケーション

ブラウザーの `fetch` 関数を使用して、サーバーのエンドポイントから client secret を取得します。この方法は、クライアント側が 1 ページのアプリケーションで、特に React などの最新のフロントエンドフレームワークで構築されている場合に最適です。client secret を処理するサーバーのエンドポイントを作成します。

#### Ruby

```ruby
get '/secret' do
  intent = # ... Create or retrieve the SetupIntent
  {client_secret: intent.client_secret}.to_json
end
```

その後、クライアント側で JavaScript を使用して client secret を取得します。

```javascript
(async () => {
  const response = await fetch('/secret');
  const {client_secret: clientSecret} = await response.json();
  // Render the form using the clientSecret
})();
```

#### サーバ側のレンダリング

サーバーからクライアントに client secret を渡します。この方法は、アプリケーションがブラウザーへの送信前に静的なコンテンツをサーバーで生成する場合に最適です。

決済フォームに [client_secret](https://docs.stripe.com/api/setup_intents/object.md#setup_intent_object-client_secret) を追加します。サーバー側のコードで、SetupIntent から client secret を取得します。

#### Ruby

```erb
<form id="payment-form" data-secret="<%= @intent.client_secret %>">
  <button id="submit">Submit</button>
</form>
```

```ruby
get '/checkout' do
  @intent = # ... Fetch or create the SetupIntent
  erb :checkout
end
```

## 支払い方法の詳細を収集してオーソリリクエストを送信する [クライアント側]

[Payment Element](https://docs.stripe.com/payments/payment-element.md) を使用してクライアント側で支払い詳細を収集します。Payment Element は事前構築された UI コンポーネントであり、さまざまな決済手段の詳細の収集をシンプルにします。

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

iframe を使用して Apple Pay または Google Pay を受け付けたい場合は、iframe の [allow](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#attr-allowpaymentrequest) 属性を `"payment *"` と等しく設定する必要があります。

構築済みのシステムを機能させるには、決済ページのアドレスの先頭を `http://` ではなく `https://` にする必要があります。HTTPS を使用しなくてもシステムをテストできますが、本番環境で決済を受け付ける準備が整ったら、必ず、HTTPS を[有効](https://docs.stripe.com/security/guide.md#tls)にしてください。

#### HTML + JS

### Stripe.js を設定する

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

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

決済ページで以下の JavaScript を使用して、Stripe のインスタンスを作成します。

```javascript
// 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('<<YOUR_PUBLISHABLE_KEY>>');
```

### Payment Element を支払いページに追加する

Payment Element を決済ページに配置する場所が必要です。決済フォームで、一意の ID を持つ空の DOM ノード (コンテナー) を作成します。

```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>
```

前のフォームが読み込まれたら、Payment Element のインスタンスを作成して、それをコンテナーの DOM ノードにマウントします。[Elements](https://docs.stripe.com/js/elements_object/create) インスタンスを作成する際に、前のステップからの [client secret](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret) を `options` に渡します。

client secret は支払いを完了できるため、慎重に取り扱う必要があります。記録したり、URL に埋め込んだり、当該の顧客以外に漏洩することがないようにしてください。

```javascript
const options = {
  clientSecret: '{{CLIENT_SECRET}}',
  // Fully customizable with appearance API.
  appearance: {/*...*/},
};

// Set up Stripe.js and Elements to use in checkout form, passing the client secret obtained in a previous stepconst elements = stripe.elements(options);
// Optional: Autofill user's saved payment methods. If the customer's
// email is known when the page is loaded, you can pass the email
// to the linkAuthenticationElement on mount:
//
//   linkAuthenticationElement.mount("#link-authentication-element",  {
//     defaultValues: {
//       email: 'jenny.rosen@example.com',
//     }
//   })

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

```

#### React

### Stripe.js を設定する

次の npm パブリックレジストリーから [React Stripe.js](https://www.npmjs.com/package/@stripe/react-stripe-js) と [Stripe.js ローダー](https://www.npmjs.com/package/@stripe/stripe-js)をインストールします。

```bash
npm install --save @stripe/react-stripe-js @stripe/stripe-js
```

### Elements プロバイダーを支払いページに追加して設定する

Payment Element コンポーネントを使用するには、決済ページコンポーネントを [Elements プロバイダー](https://docs.stripe.com/sdks/stripejs-react.md#elements-provider)でラップします。公開キーを使用して `loadStripe` を呼び出し、返された `Promise` を `Elements` プロバイダーに渡します。加えて、前のステップの [client secret](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret) を `options` にして `Elements` プロバイダーに渡します。

```jsx
import React from 'react';
import ReactDOM from 'react-dom';
import {Elements} from '@stripe/react-stripe-js';
import {loadStripe} from '@stripe/stripe-js';

import CheckoutForm from './CheckoutForm';

// Make sure to call `loadStripe` outside of a component’s render to avoid
// recreating the `Stripe` object on every render.
const stripePromise = loadStripe('<<YOUR_PUBLISHABLE_KEY>>');

function App() {
  const options = {
    // passing the client secret obtained in step 3
    clientSecret: '{{CLIENT_SECRET}}',
    // Fully customizable with appearance API.
    appearance: {/*...*/},
  };

  return (
    <Elements stripe={stripePromise} options={options}>
      <CheckoutForm />
    </Elements>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));
```

### Payment Element コンポーネントを追加する

`PaymentElement` コンポーネントを使用して、フォームを構築します。

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

const CheckoutForm = () => {
  return (
    <form>
      // Optional: Autofill user's saved payment methods. If the customer's
      // email is known when the page is loaded, you can pass the email
      // to the linkAuthenticationElement
      //
      // <LinkAuthenticationElement id="link-authentication-element"
        // Prefill the email field like so:
        // options={{defaultValues: {email: 'foo@bar.com'}}}
      // /><PaymentElement />
      <button>Submit</button>
    </form>
  );
};

export default CheckoutForm;
```

[stripe.confirmSetup](https://docs.stripe.com/js/setup_intents/confirm_setup) を使用し、Payment Element の詳細を使用して設定を完了します。これにより、オーソリリクエストが買い手に送信されます。

> 顧客による支払いの承認を待っている間、`stripe.confirmSetup` の完了には数秒かかる場合があります。この間、フォームが再送信されないように無効化し、スピナーのような待機中のインジケーターを表示します。エラーが発生した場合は、それを顧客に表示し、フォームを再度有効化し、待機中のインジケーターを非表示にします。

#### HTML + JS

```javascript
const form = document.getElementById('payment-form');

form.addEventListener('submit', async (event) => {
  event.preventDefault();
const {error, setupIntent} = await stripe.confirmSetup({
    //`Elements` instance that was used to create the Payment Element
    elements,
    redirect: 'if_required',
    confirmParams: {
      mandate_data: {
      customer_acceptance: {
          type: 'online',
          online: {
            infer_from_client: true,
          },
        },
      }
    }
  });

  const message = document.querySelector('#message')
  if (error) {
    // This point will only be reached if there is an immediate error when
    // confirming the SetupIntent. Show error to your customer (for example, payment
    // details incomplete)
    message.innerText = error.message;
  } else {
    // This will execute if the confirm request is successful, or if the
    // setup fails asynchronously.
    switch (setupIntent.status) {
      case 'succeeded':
        message.innerText = 'Success! Payment received.';
        break;

      case 'processing':
        message.innerText = "Payment processing. We'll update you when payment is received.";
        break;

      case 'requires_payment_method':
        message.innerText = 'Payment failed. Please try another payment method.';
        // Redirect your user back to your payment page to attempt collecting
        // payment details again
        break;

      default:
        message.innerText = 'Something went wrong.';
        break;
    }
  }
});
```

#### React

支払いフォームコンポーネントから [stripe.confirmSetup](https://docs.stripe.com/js/setup_intents/confirm_setup) を呼び出すには、[useStripe](https://docs.stripe.com/sdks/stripejs-react.md#usestripe-hook) フックと [useElements](https://docs.stripe.com/sdks/stripejs-react.md#useelements-hook) フックを使用します。

フックではなく従来のクラスコンポーネントを使用する場合は、代わりに [ElementsConsumer](https://docs.stripe.com/sdks/stripejs-react.md#elements-consumer) を使用します。

```jsx
import React, {useState} from 'react';
import {useStripe, useElements, PaymentElement} from '@stripe/react-stripe-js';

const CheckoutForm = () => {
  const stripe = useStripe();
  const elements = useElements();

  const [message, setMessage] = useState(null);

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

    if (!stripe || !elements) {
      // Stripe.js hasn't yet loaded.
      // Make sure to disable form submission until Stripe.js has loaded.
      return;
    }
const {error, setupIntent} = await stripe.confirmSetup({
      //`Elements` instance that was used to create the Payment Element
      elements,
      redirect: 'if_required',
      confirmParams: {
        mandate_data: {
          customer_acceptance: {
            type: 'online',
            online: {
              infer_from_client: true,
            },
          },
        }
      },
    });


    if (error) {
      // This point will only be reached if there is an immediate error when
      // confirming the SetupIntent. Show error to your customer (for example, payment
      // details incomplete)
      setMessage(error.message);
    } else {
      // This will execute if the confirm request is successful, or if the
      // setup fails asynchronously.
      switch (setupIntent.status) {
        case 'succeeded':
          setMessage('Success! Authorization received.');
          break;

        case 'requires_payment_method':
          setMessage('Setup failed. Please try another payment method.');
          // Redirect your user back to your payment page to attempt collecting
          // payment details again
          break;

        default:
          setMessage('Something went wrong.');
          break;
      }
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <PaymentElement />
      <button disabled={!stripe}>Submit</button>
      {/* Show message to your customers */}
      {message && <div>{message}</div>}
    </form>
  )
};

export default CheckoutForm;
```

## PayTo PaymentMethod に後で請求する

顧客に支払いを行う前に、以前の SetupIntent を[取得](https://docs.stripe.com/api/setup_intents/retrieve.md)して同意書 ID、顧客 ID、決済手段 ID を確認します。

```curl
curl https://api.stripe.com/v1/setup_intents/{{SETUPINTENT_ID}} \
  -u "<<YOUR_SECRET_KEY>>:"
```

以下のレスポンスで必要な ID を確認してください。

#### Json

```json
{
  // ...
  "customer": "cus_PW6rQWRGAaBD7z",  // <---- Here is the customer
  "mandate": "mandate_1Ok6ZrA8DuEjWaGw2nrO9xeS", // <---- Here is the mandate
  "metadata": {},
  "next_action": null,
  "on_behalf_of": null,
  "payment_method": "pm_1Ok4l9A8DuEjWaGwhB4SGrWh", // <---- Here is the payment method
  "payment_method_configuration_details": null,
  "payment_method_options": {
    "payto": {
      "mandate_options": {
        "amount": 150000,
        "amount_type": "maximum",
        "start_date": "2026-12-25",
        "end_date": "2036-12-25",
        "payment_schedule": "annual",
        "payments_per_period": 13,
        "purpose": "mortgage",
      }
    }
  },
  "payment_method_types": [
    "payto"
  ],
  "single_use_mandate": null,
  "status": "succeeded",
  "usage": "off_session"
  // ...
}
```

PaymentMethod、同意書、顧客 ID を使用して *PaymentIntent* (API object that represents your intent to collect payment from a customer, tracking charge attempts and payment state changes throughout the process) を作成します。

```curl
curl https://api.stripe.com/v1/payment_intents \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d "payment_method_types[]=payto" \
  -d amount=1099 \
  -d currency=aud \
  -d "customer={{CUSTOMER_ID}}" \
  -d "payment_method={{PAYMENTMETHOD_ID}}" \
  -d "mandate={{MANDATE_ID}}" \
  -d confirm=true
```

## 実装内容をテストする

以下のさまざまなテスト用 PayID と銀行口座情報を使用して、テスト API キーで PayTo の実装内容をテストします。各セットによって、本番環境でシステムが直面する各種シナリオが再現されています。

#### PayID

| PayID                                                    | 説明                                                                                                                                                                                                                              |
| -------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `{any_prefix}+succeed@{any_domain}`                      | PaymentIntent のステータスは、`requires_action` から 10 秒後に `processing` に移行し、さらに 5 秒後に `succeeded` に移行します。同意書は `active` 状態になります。                                                                                                         |
| `{any_prefix}+decline@{any_domain}`                      | PaymentIntent のステータスは、`requires_action` から 10 秒後に `requires_payment_method` に移行します。Stripe は `payment_method_provider_decline` エラーコードと `invalid_authorization` 拒否コードを返します。同意書は `inactive` 状態になります。                               |
| `{any_prefix}+expire@{any_domain}`                       | PaymentIntent のステータスは、`requires_action` から 10 秒後に `requires_payment_method` に移行します。Stripe は `payment_method_provider_decline` エラーコードと `generic_decline` 拒否コードを返します。同意書は `inactive` 状態になります。                                     |
| `{any_prefix}+insufficient_funds@{any_domain}`           | PaymentIntent のステータスは、10 秒後に `requires_action` から `processing` に移行し、さらに 5 秒後に `requires_payment_method` に移行します。Stripe は、 `payment_method_provider_decline` エラーコードと `insufficient_funds` 拒否コードを返します。同意書のステータスは `inactive` になります。 |
| `{any_prefix}+revoke@{any_domain}`                       | PaymentIntent のステータスは、`requires_action` から 10 秒後に `processing` に移行し、さらに 5 秒後に `succeeded` に移行します。同意書は `active` 状態で開始し、1 分後に `inactive` 状態に移行します。                                                                                |
| `{any_prefix}+agreement_type_not_supported@{any_domain}` | PaymentIntent のステータスは、10 秒後に `requires_action` から `requires_payment_method` に移行します。Stripe は、`payment_method_provider_decline` エラーコードを返します。同意書のステータスは `inactive` になります。                                                          |

#### 口座番号 + BSB 番号

| BSB 番号   | 口座番号        | 説明                                                                                                                                                                                                                              |
| -------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `000000` | `000123456` | PaymentIntent のステータスは、`requires_action` から 10 秒後に `processing` に移行し、さらに 5 秒後に `succeeded` に移行します。同意書は `active` 状態になります。                                                                                                         |
| `000000` | `333333335` | PaymentIntent のステータスは、`requires_action` から 10 秒後に `requires_payment_method` に移行します。Stripe は `payment_method_provider_decline` エラーコードと `invalid_authorization` 拒否コードを返します。同意書は `inactive` 状態になります。                               |
| `000000` | `333333337` | PaymentIntent のステータスは、`requires_action` から 10 秒後に `requires_payment_method` に移行します。Stripe は `payment_method_provider_decline` エラーコードと `generic_decline` 拒否コードを返します。同意書は `inactive` 状態になります。                                     |
| `000000` | `222222227` | PaymentIntent のステータスは、10 秒後に `requires_action` から `processing` に移行し、さらに 5 秒後に `requires_payment_method` に移行します。Stripe は、 `payment_method_provider_decline` エラーコードと `insufficient_funds` 拒否コードを返します。同意書のステータスは `inactive` になります。 |
| `000000` | `444444447` | PaymentIntent のステータスは `requires_action` から 10 秒後に `processing` に移行し、さらに 5 秒後に `succeeded` に移行します。 同意書は `active` の状態で開始し、1 分後に `inactive` に移行します。                                                                                |
| `000000` | `666666667` | PaymentIntent のステータスは、10 秒後に `requires_action` から `requires_payment_method` に移行します。Stripe は、`payment_method_provider_decline` エラーコードを返します。同意書のステータスは `inactive` になります。                                                          |

## Optional: 支払い後のイベントを処理する

支払いが完了すると、Stripe は [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.succeeded) イベントを送信します。ダッシュボード、カスタム *Webhook* (A webhook is a real-time push notification sent to your application as a JSON payload through HTTPS requests)、またはパートナーソリューションを使用してこれらのイベントを受信し、また、顧客への注文確認メールの送信、データベースでの売上の記録、配送ワークフローの開始などのアクションを実行します。

クライアントからのコールバックを待つのではなく、これらのイベントをリッスンします。クライアント側では、コールバックが実行される前に顧客がブラウザーのウィンドウを閉じたり、アプリを終了したりする可能性があります。また、悪意を持つクライアントがレスポンスを不正操作する恐れもあります。非同期型のイベントをリッスンするよう構築済みのシステムを設定することで、これ以降はより多くの決済手段を簡単に受け付けられるようになります。[サポートされているすべての決済手段の違い](https://stripe.com/payments/payment-methods-guide)をご確認ください。

- **ダッシュボードでイベントを手動で処理する**

  ダッシュボードを使用して、テスト決済を[ダッシュボードで表示](https://dashboard.stripe.com/test/payments)したり、メール領収書を送信したり、入金を処理したり、失敗した決済を再試行したりできます。

- **Custom Webhook を構築する**

  [Build a custom webhook](https://docs.stripe.com/webhooks/handling-payment-events.md#build-your-own-webhook) handler to listen for events and build custom asynchronous payment flows. Test and debug your webhook integration locally with the Stripe CLI.

- **構築済みアプリを導入する**

  パートナーアプリケーションを統合することで、[自動化](https://stripe.partners/?f_category=automation)や[マーケティング/セールス](https://stripe.partners/?f_category=marketing-and-sales)などの一般的なビジネスイベントを処理します。


# ダイレクト API

> This is a ダイレクト API for when payment-ui is direct-api. View the full page at https://docs.stripe.com/payments/payto/set-up-payment?payment-ui=direct-api.

## Stripe を設定する [サーバー側]

まず、Stripe アカウントが必要です。[今すぐご登録ください](https://dashboard.stripe.com/register)。

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

#### Ruby

```bash
# Available as a gem
sudo gem install stripe
```

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

## 顧客を作成する [サーバー側]

顧客がビジネスでアカウントを作成したら、*顧客* (Customer objects represent customers of your business. They let you reuse payment methods and give you the ability to track multiple payments)を作成し、アカウントを表す内部表記と関連付けます。このようにすると、保存されている支払い方法の詳細を後で取得して使用することができます。

```curl
curl https://api.stripe.com/v1/customers \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d "name=Jenny Rosen" \
  --data-urlencode "email=jenny@example.com"
```

## SetupIntent を作成する [サーバー側]

[SetupIntent](https://docs.stripe.com/api/setup_intents/object.md) は顧客から将来の決済を収集する意図を示すオブジェクトであり、承認プロセスを追跡します。PayTo 決済手段を受け付ける SetupIntent を作成するには、同意書の規約を指定し、[payment_method_types](https://docs.stripe.com/api/setup_intents/create.md#create_setup_intent-payment_method_types) リストに `payto` を指定します。SetupIntent の作成時に渡す決済手段タイプのリストを保持している場合は、それに `payto` を追加します。

[決済手段オプション](https://docs.stripe.com/api/setup_intents/create.md#create_setup_intent-payment_method_options-payto)を使用して顧客に同意させる同意書の規約を指定します。

```curl
curl https://api.stripe.com/v1/setup_intents \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d "payment_method_types[]=payto" \
  -d "customer={{CUSTOMER_ID}}" \
  -d "payment_method_options[payto][mandate_options][amount_type]=maximum" \
  -d "payment_method_options[payto][mandate_options][payment_schedule]=annual" \
  -d "payment_method_options[payto][mandate_options][amount]=150000" \
  -d "payment_method_options[payto][mandate_options][payments_per_period]=13" \
  -d "payment_method_options[payto][mandate_options][start_date]=2026-12-25" \
  -d "payment_method_options[payto][mandate_options][end_date]=2036-12-25" \
  -d "payment_method_options[payto][mandate_options][purpose]=mortgage"
```

Stripe はさまざまな種類の同意書に対応し、同意書の金額、期間、頻度、目的を管理できます。できる限り要件に一致する同意書規約を指定してください。これらの詳細な条件は承認時に顧客に表示されるため、正確にすることで購入率を向上できます。

Stripe は、*加盟店カテゴリコード (MCC)* (A Merchant Category Code (MCC) is a four-digit number that classifies the type of goods or services a business offers) に基づいてデフォルトの `purpose` を推定します。デフォルト値が同意書の目的を正確に表していない場合は、[有効な値のいずれか](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_options-payto-mandate_options-purpose)を使用してこのフィールドを上書きできます。[Mandate](https://docs.stripe.com/api/mandates/object.md#mandate_object-payment_method_details-payto) オブジェクトで、purpose を指定しない場合のデフォルト値を確認できます。

### client secret を取得する

SetupIntent には、*client secret* (The client secret is a unique key returned from Stripe as part of a PaymentIntent. This key lets the client access important fields from the PaymentIntent (status, amount, currency) while hiding sensitive ones (metadata, customer)) が含まれています。これは、支払いプロセスを安全に完了するためにクライアント側で使用されます。client secret をクライアント側に渡す際は、いくつかの方法を使用できます。

#### 1 ページのアプリケーション

ブラウザーの `fetch` 関数を使用して、サーバーのエンドポイントから client secret を取得します。この方法は、クライアント側が 1 ページのアプリケーションで、特に React などの最新のフロントエンドフレームワークで構築されている場合に最適です。client secret を処理するサーバーのエンドポイントを作成します。

#### Ruby

```ruby
get '/secret' do
  intent = # ... Create or retrieve the SetupIntent
  {client_secret: intent.client_secret}.to_json
end
```

その後、クライアント側で JavaScript を使用して client secret を取得します。

```javascript
(async () => {
  const response = await fetch('/secret');
  const {client_secret: clientSecret} = await response.json();
  // Render the form using the clientSecret
})();
```

#### サーバ側のレンダリング

サーバーからクライアントに client secret を渡します。この方法は、アプリケーションがブラウザーへの送信前に静的なコンテンツをサーバーで生成する場合に最適です。

決済フォームに [client_secret](https://docs.stripe.com/api/setup_intents/object.md#setup_intent_object-client_secret) を追加します。サーバー側のコードで、SetupIntent から client secret を取得します。

#### Ruby

```erb
<form id="payment-form" data-secret="<%= @intent.client_secret %>">
  <button id="submit">Submit</button>
</form>
```

```ruby
get '/checkout' do
  @intent = # ... Fetch or create the SetupIntent
  erb :checkout
end
```

## 支払い方法の詳細を収集してオーソリリクエストを送信する [クライアント側]

SetupIntent を確定するときに、client secret を渡します。

> client secret は SetupIntent へのアクセスを許可するため、慎重に取り扱う必要があります。記録したり、URL に埋め込んだり、当該の顧客以外に公開されることがないようにしてください。

`stripe.confirmPayToSetup` を使用して、顧客との同意書の承認を開始します。

顧客は同意書リクエストに関する通知を受け取り、バンキングアプリでリクエストを承認または拒否します。

```javascript
// Inititates the mandate request notification to the customer
stripe.confirmPayToSetup(
  '{{SETUP_INTENT_CLIENT_SECRET}}',
  {
    payment_method: {
      payto: {
        // Either provide a PayID (typically an email or phone number)
        pay_id: 'jenny@example.com'
        // ...or provide bank account details
        account_number: '000123456',
        bsb_number: '000000'
      }
    }
  }
).then(function(result) {
  if (result.error) {
    // Inform the customer that there was an error.
    console.log(result.error.message);
  }
});
```

既定では、Stripe.js は SetupIntent の更新をポーリングします。 `confirmPayToSetup` によって返される promise は、SetupIntent が `succeeded` 状態に達したとき、またはセットアップが失敗して SetupIntent が `requires_payment_method` 状態に戻ったときに解決されます。これらの移行の詳細については、[SetupIntent ライフサイクル](https://docs.stripe.com/payments/paymentintents/lifecycle.md)を参照してください。

自身でポーリングするには、`handleActions: false` を設定して自動ポーリングを無効にします。

```javascript
stripe.confirmPayToSetup(
  '{{SETUP_INTENT_CLIENT_SECRET}}',
  {
    payment_method: {
      payto: {
        account_number: '000123456',
        bsb_number: '000000'
      }
    }
  }
  { handleActions: false } // <---- Like this
)
```

この例では、[SetupIntents API](https://docs.stripe.com/api/setup_intents/retrieve.md) を呼び出して、自分で SetupIntent のステータスを取得できます。

## PayTo PaymentMethod に後で請求する

```curl
curl https://api.stripe.com/v1/setup_intents/{{SETUPINTENT_ID}} \
  -u "<<YOUR_SECRET_KEY>>:"
```

以下のレスポンスで必要な ID を確認してください。

#### Json

```json
{
  // ...
  "customer": "cus_PW6rQWRGAaBD7z",  // <---- Here is the customer
  "mandate": "mandate_1Ok6ZrA8DuEjWaGw2nrO9xeS", // <---- Here is the mandate
  "metadata": {},
  "next_action": null,
  "on_behalf_of": null,
  "payment_method": "pm_1Ok4l9A8DuEjWaGwhB4SGrWh", // <---- Here is the payment method
  "payment_method_configuration_details": null,
  "payment_method_options": {
    "payto": {
      "mandate_options": {
        "amount": 150000,
        "amount_type": "maximum",
        "start_date": "2026-12-25",
        "end_date": "2036-12-25",
        "payment_schedule": "annual",
        "payments_per_period": 13,
        "purpose": "mortgage",
      }
    }
  },
  "payment_method_types": [
    "payto"
  ],
  "single_use_mandate": null,
  "status": "succeeded",
  "usage": "off_session"
  // ...
}
```

PaymentMethod、同意書、顧客 ID を使用して *PaymentIntent* (API object that represents your intent to collect payment from a customer, tracking charge attempts and payment state changes throughout the process) を作成します。

```curl
curl https://api.stripe.com/v1/payment_intents \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d "payment_method_types[]=payto" \
  -d amount=1099 \
  -d currency=aud \
  -d "customer={{CUSTOMER_ID}}" \
  -d "payment_method={{PAYMENTMETHOD_ID}}" \
  -d "mandate={{MANDATE_ID}}" \
  -d confirm=true
```

## 実装内容をテストする

以下のさまざまなテスト用 PayID と銀行口座情報を使用して、テスト API キーで PayTo の実装内容をテストします。各セットによって、本番環境でシステムが直面する各種シナリオが再現されています。

#### PayID

| PayID                                                    | 説明                                                                                                                                                                                                                              |
| -------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `{any_prefix}+succeed@{any_domain}`                      | PaymentIntent のステータスは、`requires_action` から 10 秒後に `processing` に移行し、さらに 5 秒後に `succeeded` に移行します。同意書は `active` 状態になります。                                                                                                         |
| `{any_prefix}+decline@{any_domain}`                      | PaymentIntent のステータスは、`requires_action` から 10 秒後に `requires_payment_method` に移行します。Stripe は `payment_method_provider_decline` エラーコードと `invalid_authorization` 拒否コードを返します。同意書は `inactive` 状態になります。                               |
| `{any_prefix}+expire@{any_domain}`                       | PaymentIntent のステータスは、`requires_action` から 10 秒後に `requires_payment_method` に移行します。Stripe は `payment_method_provider_decline` エラーコードと `generic_decline` 拒否コードを返します。同意書は `inactive` 状態になります。                                     |
| `{any_prefix}+insufficient_funds@{any_domain}`           | PaymentIntent のステータスは、10 秒後に `requires_action` から `processing` に移行し、さらに 5 秒後に `requires_payment_method` に移行します。Stripe は、 `payment_method_provider_decline` エラーコードと `insufficient_funds` 拒否コードを返します。同意書のステータスは `inactive` になります。 |
| `{any_prefix}+revoke@{any_domain}`                       | PaymentIntent のステータスは、`requires_action` から 10 秒後に `processing` に移行し、さらに 5 秒後に `succeeded` に移行します。同意書は `active` 状態で開始し、1 分後に `inactive` 状態に移行します。                                                                                |
| `{any_prefix}+agreement_type_not_supported@{any_domain}` | PaymentIntent のステータスは、10 秒後に `requires_action` から `requires_payment_method` に移行します。Stripe は、`payment_method_provider_decline` エラーコードを返します。同意書のステータスは `inactive` になります。                                                          |

#### 口座番号 + BSB 番号

| BSB 番号   | 口座番号        | 説明                                                                                                                                                                                                                              |
| -------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `000000` | `000123456` | PaymentIntent のステータスは、`requires_action` から 10 秒後に `processing` に移行し、さらに 5 秒後に `succeeded` に移行します。同意書は `active` 状態になります。                                                                                                         |
| `000000` | `333333335` | PaymentIntent のステータスは、`requires_action` から 10 秒後に `requires_payment_method` に移行します。Stripe は `payment_method_provider_decline` エラーコードと `invalid_authorization` 拒否コードを返します。同意書は `inactive` 状態になります。                               |
| `000000` | `333333337` | PaymentIntent のステータスは、`requires_action` から 10 秒後に `requires_payment_method` に移行します。Stripe は `payment_method_provider_decline` エラーコードと `generic_decline` 拒否コードを返します。同意書は `inactive` 状態になります。                                     |
| `000000` | `222222227` | PaymentIntent のステータスは、10 秒後に `requires_action` から `processing` に移行し、さらに 5 秒後に `requires_payment_method` に移行します。Stripe は、 `payment_method_provider_decline` エラーコードと `insufficient_funds` 拒否コードを返します。同意書のステータスは `inactive` になります。 |
| `000000` | `444444447` | PaymentIntent のステータスは `requires_action` から 10 秒後に `processing` に移行し、さらに 5 秒後に `succeeded` に移行します。 同意書は `active` の状態で開始し、1 分後に `inactive` に移行します。                                                                                |
| `000000` | `666666667` | PaymentIntent のステータスは、10 秒後に `requires_action` から `requires_payment_method` に移行します。Stripe は、`payment_method_provider_decline` エラーコードを返します。同意書のステータスは `inactive` になります。                                                          |

## Optional: 支払い後のイベントを処理する

支払いが完了すると、Stripe は [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.succeeded) イベントを送信します。ダッシュボード、カスタム *Webhook* (A webhook is a real-time push notification sent to your application as a JSON payload through HTTPS requests)、またはパートナーソリューションを使用してこれらのイベントを受信し、また、顧客への注文確認メールの送信、データベースでの売上の記録、配送ワークフローの開始などのアクションを実行します。

クライアントからのコールバックを待つのではなく、これらのイベントをリッスンします。クライアント側では、コールバックが実行される前に顧客がブラウザーのウィンドウを閉じたり、アプリを終了したりする可能性があります。また、悪意を持つクライアントがレスポンスを不正操作する恐れもあります。非同期型のイベントをリッスンするよう構築済みのシステムを設定することで、これ以降はより多くの決済手段を簡単に受け付けられるようになります。[サポートされているすべての決済手段の違い](https://stripe.com/payments/payment-methods-guide)をご確認ください。

- **ダッシュボードでイベントを手動で処理する**

  ダッシュボードを使用して、テスト決済を[ダッシュボードで表示](https://dashboard.stripe.com/test/payments)したり、メール領収書を送信したり、入金を処理したり、失敗した決済を再試行したりできます。

- **Custom Webhook を構築する**

  [Build a custom webhook](https://docs.stripe.com/webhooks/handling-payment-events.md#build-your-own-webhook) handler to listen for events and build custom asynchronous payment flows. Test and debug your webhook integration locally with the Stripe CLI.

- **構築済みアプリを導入する**

  パートナーアプリケーションを統合することで、[自動化](https://stripe.partners/?f_category=automation)や[マーケティング/セールス](https://stripe.partners/?f_category=marketing-and-sales)などの一般的なビジネスイベントを処理します。