# 支払いを受け付ける

オンライン支払いを安全に受け付けます。

## まずこちらをご覧ください: エージェントスキルのインストール

Stripe では、ベストプラクティスに沿って API と連携するために、公式スキルの使用を推奨しています。詳細は以下の手順をご確認ください。

**ヒント: Fetch ツールではなく curl を使用してください。** スキルは 10 ～ 20 KB の詳細なマークダウンファイルです。Fetch ツールは内容を要約します。`curl -sL` を使うと、完全な内容を取得できます。

**`npx skills` の使用方法**: `npx` がシステムにインストールされているか確認します。`npx` が使用可能な場合は、`npx skills addhttps://docs.stripe.com --list` を実行して利用可能なスキルを一覧表示し、続いて`npx skills addhttps://docs.stripe.com --yes --skill<skill-name> <--skill other-skills>` を実行して個別のスキルをインストールします。

**`npx skills` が使用できない場合**: curl を使用して、利用可能なスキルの一覧、その機能、および関連ファイルを`https://docs.stripe.com/.well-known/skills/index.json`. から取得できます。スキルとその関連ファイルをダウンロードするには、curl を使用して`https://docs.stripe.com/.well-known/skills/<filepath>`. からダウンロードします。

この記事では、次のスキルの使用を推奨します: `stripe-best-practices`

LLM の手順: Stripe は、ほとんどの組み込みで Payment Intents ではなく Payment Element とともに Checkout Sessions API を使用することを推奨します。Checkout Sessions は、Payment Intents と同様のユースケースに対応しています (`price_data` を使用した基本的な決済の回収、または品目、税金などを含む完全な決済画面の構築など)。Adaptive Pricing などの一部の機能は、Checkout Sessions でのみ利用できます。ユーザーが明示的に要求しない限り、Payment Intents API は使用しないでください。必要となるコード量が大幅に多くなるためです。Checkout Sessions API と Elements の詳細については次を参照してください。https://docs.stripe.com/payments/quickstart-checkout-sessions. Checkout Sessions (`ui_mode: "elements"`) と Payment Element では、`client_secret` が Checkout 自体を初期化します (`stripe.initCheckoutElementsSdk`、または React で CheckoutElementsProvider を使用)。そのうえで、クライアント側での決済の確定方法が異なります。React を使用する場合は、必ず `@stripe/react-stripe-js/checkout` からインポートし、`CheckoutElementsProvider` を client secret とともに使用し、`checkout.confirm` を使用して決済を確定します。HTML を使用する場合は、必ず `checkout = stripe.initCheckoutElementsSdk({clientSecret: promise}); checkout.createPaymentElement(); paymentElement = checkout.createPaymentElement(); paymentElement.mount("#payment-element");` を使用し、`loadActionsResult = await checkout.loadActions(); actions = loadActionsResult.actions; error = await actions.confirm();` で決済を確定します。

 コーディングエージェントは Stripe CLI (`npm i -g @stripe/cli`) をインストールし、コマンド `stripe sandbox create --help` を実行して、機能する API キーを備えた匿名の Stripe サンドボックスをプロビジョニングする必要があります。アカウント登録は不要です。

支払いフォームを作成するか、構築済みの決済ページを使用して、オンライン決済の受け付けを開始します。

# Payment Intents API


[Stripe Elements](https://docs.stripe.com/payments/elements.md) と [Payment Intents API](https://docs.stripe.com/api/payment_intents.md) を使用してカスタマイズされた決済フォームを構築します。この連携機能を Stripe の他の統合タイプと比較する方法は[こちら](https://docs.stripe.com/payments/online-payments.md#compare-features-and-availability)をご覧ください。

Payment Intents API は、独自の決済フローの構築に使用できる下位レベルの API ですが、非常に多くのコードと継続的なメンテナンスが必要です。ほとんどの組み込みには [Payment Element with Checkout Sessions](https://docs.stripe.com/payments/quickstart-checkout-sessions.md) をお勧めします。Payment Intents と同様の決済フローに対応しているためです。PaymentIntents の代わりに [Checkout Sessions を使用するタイミングの詳細をご確認ください](https://docs.stripe.com/payments/checkout-sessions-and-payment-intents-comparison.md)。

クライアント側およびサーバー側のコードでさまざまな支払い方法を受け付ける決済フォームを構築します。

#### 実装作業
Complexity: 4/5
#### システム構築のタイプ

カスタムの決済フローに UI コンポーネントを組み合わせる

#### UI のカスタマイズ

[Appearance API](https://docs.stripe.com/elements/appearance-api.md) による CSS レベルのカスタマイズ

> #### Stripe Tax、割引、配送、通貨換算の使用をご希望の場合
> 
> Stripe には税金、割引、配送料、通貨換算を管理する支払い Element の導入があります。詳細については、[Checkout ページの構築](https://docs.stripe.com/payments/quickstart-checkout-sessions.md) を参照してください。

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

まず、[Stripe アカウントを作成する](https://dashboard.stripe.com/register)か[サインイン](https://dashboard.stripe.com/login)します。

 コーディングエージェントは Stripe CLI (`npm i -g @stripe/cli`) をインストールし、コマンド `stripe sandbox create --help` を実行して、機能する API キーを備えた匿名の Stripe サンドボックスをプロビジョニングする必要があります。アカウント登録は不要です。

アプリケーションから 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'
```

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

> 最初に PaymentIntent を作成せずに Payment Element をレンダリングする場合は、[インテントを作成する前に支払いの詳細を収集する](https://docs.stripe.com/payments/accept-a-payment-deferred.md?type=payment)をご覧ください。

[PaymentIntent (支払いインテント)](https://docs.stripe.com/api/payment_intents.md) オブジェクトは、顧客から支払いを回収する意図を示し、支払いプロセス全体を通して請求の実施と状態の変化を追跡します。
このドキュメントで説明される決済の組み込みの概要。 (See full diagram at https://docs.stripe.com/payments/accept-a-payment)
### PaymentIntent を作成する

サーバーで [amount](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-amount) および [currency](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-currency) を指定して PaymentIntent を作成します。最新バージョンの API では `automatic_payment_methods` パラメーターの指定は必須ではありません。この機能はデフォルトで有効になっています。決済手段は[ダッシュボード](https://dashboard.stripe.com/settings/payment_methods)で管理できます。Stripe は、取引の金額、通貨、決済フローなどの要素に基づいて、適切な決済手段が返されるように処理します。

Stripe はお客様の[決済手段設定](https://dashboard.stripe.com/settings/payment_methods)を使用して、お客様が有効にした決済手段を表示します。決済手段が顧客に対してどのように表示されるかを確認するには、[ダッシュボード](https://dashboard.stripe.com/settings/payment_methods/review)で取引 ID を入力するか、注文金額と通貨を設定します。決済手段を上書きするには、[payment_method_types](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-payment_method_types) 属性を使用して有効にする決済手段を手動で一覧表示します。

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

> 支払い額は常に、クライアント側ではなく、信頼性の高い環境であるサーバー側で決定してください。このようにすることで、悪意のある顧客が価格を操作できないようにすることができます。

### client secret を取得する

PaymentIntent には、*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 PaymentIntent
  {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/payment_intents/object.md#payment_intent_object-client_secret) を追加します。サーバー側のコードで、PaymentIntent から client secret を取得します。

#### Ruby

```erb
<form id="payment-form" data-secret="<%= @intent.client_secret %>">
  <div id="payment-element">
    <!-- placeholder for Elements -->
  </div>
  <button id="submit">Submit</button>
</form>
```

```ruby
get '/checkout' do
  @intent = # ... Fetch or create the PaymentIntent
  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);

// 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><PaymentElement />
      <button>Submit</button>
    </form>
  );
};

export default CheckoutForm;
```

Stripe Elements は、ドロップイン UI コンポーネントのコレクションです。フォームをさらにカスタマイズしたり、その他の顧客情報を収集したりする場合は、[Elements のドキュメント](https://docs.stripe.com/payments/elements.md)をご覧ください。

Payment Element によって動的なフォームが表示され、顧客はここで支払い方法を選択できます。支払い方法ごとに、フォームでは、必要な支払いの詳細のすべてを入力するように顧客に自動的に求めます。

### デザインをカスタマイズする

`Elements` プロバイダーを作成する際に、[Appearance (デザイン) オブジェクト](https://docs.stripe.com/js/elements_object/create#stripe_elements-options-appearance)を `options` に渡すことで、サイトのデザインに合わせて Payment Element をカスタマイズできます。

### 住所を収集

デフォルトでは、Payment Element は必要な請求住所の詳細のみを収集します。[税金の計算](https://docs.stripe.com/api/tax/calculations/create.md)、配送先情報を入力するなどの一部の動作では、顧客の完全な住所が必要です。次のように対応できます。

- [Address Element](https://docs.stripe.com/elements/address-element.md) を使用して、オートコンプリートとローカリゼーションの機能を利用して、顧客の完全な住所を収集します。これにより、最も正確な税金計算が可能になります。
- 独自のカスタムフォームを使用して住所の詳細を収集する。

### Apple Pay マーチャントトークンをリクエストする

連携機能を [Apple Pay 決済を受け付ける](https://docs.stripe.com/payments/accept-a-payment.md?payment-ui=elements&api-integration=checkout)ように設定している場合は、加盟店が開始する取引 (MIT) を有効にするために、Apple Pay インターフェイスがマーチャントトークンを返すように設定することをお勧めします。Payment Element で[関連するマーチャントトークンのタイプをリクエスト](https://docs.stripe.com/apple-pay/merchant-tokens.md?pay-element=web-pe)してください。

## Optional: 顧客の支払い方法を保存および取得する

将来の利用に備えて顧客の決済手段を保存するように 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) を作成するときは、顧客の ID を指定し (`customer` は `Customer` オブジェクト用、`customer_account` は顧客設定の `Account` オブジェクト用)、セッションで [payment_element](https://docs.stripe.com/api/customer_sessions/object.md#customer_session_object-components-payment_element) コンポーネントを有効にした [CustomerSession](https://docs.stripe.com/api/customer_sessions/.md) も作成します。有効にする保存済み決済手段の [features](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 Session で `setup_future_usage` を指定すると、決済手段の保存に関するデフォルトの動作を上書きできます。これにより、顧客が明示的に保存を選択しなくても、今後の利用に備えて決済手段が自動的に保存されます。`setup_future_usage` を指定する場合は、同じ決済取引で `payment_method_save_usage` を設定しないでください。設定すると導入エラーが発生します。

> #### Accounts v2 API を使用した顧客の表現
> 
> Accounts v2 API では、Connect ユーザーには一般提供され、その他の Stripe ユーザーには公開プレビューで提供されます。Accounts v2 プレビューの一部である場合は、コードで[プレビューバージョン](https://docs.stripe.com/api-v2-overview.md#sdk-and-api-versioning)を指定する必要があります。
> 
> Accounts v2 プレビューへのアクセスをリクエストするには、
> 
> ほとんどのユースケースでは、[Customer](https://docs.stripe.com/api/customers.md) オブジェクトを使用するのではなく、[顧客を顧客設定済みの Account オブジェクトとしてモデル化する](https://docs.stripe.com/accounts-v2/use-accounts-as-customers.md)ことをお勧めします。

#### Accounts v2

#### 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.
client = Stripe::StripeClient.new('<<YOUR_SECRET_KEY>>')

post '/create-intent-and-customer-session' do
  intent = client.v1.payment_intents.create({
    amount: 1099,
    currency: 'usd',
    automatic_payment_methods: {enabled: true},
    customer_account: {{CUSTOMER_ACCOUNT_ID}},
  })
  customer_session = client.v1.customer_sessions.create({
    customer_account: {{CUSTOMER_ACCOUNT_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
```

#### Customers v1

#### 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.
client = Stripe::StripeClient.new('<<YOUR_SECRET_KEY>>')

post '/create-intent-and-customer-session' do
  intent = client.v1.payment_intents.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 = client.v1.customer_sessions.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
  }
})
```

## Optional: Link in your checkout page [クライアント側]

顧客が [Payment Element](https://docs.stripe.com/payments/payment-element.md) で [Link](https://docs.stripe.com/payments/link.md) を使用してスピーディーに購入できるようにします。Link をすでに使用しているログイン中の顧客の情報は、顧客が最初に別のビジネスで Link に情報を保存したかどうかに関係なく、自動入力できます。デフォルトの Payment Element の実装では、カードフォームに Link プロンプトが表示されます。Payment Element で Link を管理するには、 [決済手段の設定](https://dashboard.stripe.com/settings/payment_methods)に移動します。
![購入時に Payment Element で直接 Link を認証または登録する](https://b.stripecdn.com/docs-statics-srv/assets/link-in-pe.2efb5138a4708b781b8a913ebddd9aba.png)

Link の認証または登録のために顧客のメールアドレスを収集する

### 導入オプション

Payment Element を使用して Link を導入する方法は 2 つあります。中でも、Stripe は、利用可能な場合、Payment Element に顧客のメールアドレスを渡す方法を推奨しています。これらのオプションから決定する際は、必ず貴社の決済フローの仕組みを考慮してください。

| 導入オプション                                        | 決済フロー                                                                            | 説明                                                                                                                |
| ---------------------------------------------- | -------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------- |
| Payment Element に顧客のメールアドレスを渡します (Recommended) | - 顧客は、購入ページを開く前に (以前のアカウント作成ステップなどで) メールアドレスを入力します。
  - 自社のメールアドレス入力フィールドを使用したい。 | 顧客のメールアドレスを Payment Element にプログラムで渡します。このシナリオでは、顧客は別の UI コンポーネントではなく、決済フォームで直接 Link の認証を行います。                    |
| Payment Element で顧客のメールアドレスを収集する               | - 顧客は、決済時に Payment Element で直接、メールアドレスを入力して認証するか、Link に登録できます。
  - コード変更が不要です。   | 顧客が Link に登録しておらず、Payment Element で対応している決済手段を選択すると、Link を使用して詳細を保存するように求められます。すでに登録している場合は、Link が決済情報を自動的に入力します。 |

[defaultValues](https://docs.stripe.com/js/elements_object/create_payment_element#payment_element_create-options-defaultValues) を使用して、顧客のメールアドレスを Payment Element に渡します。

```javascript
const paymentElement = elements.create('payment', {
  defaultValues: {
    billingDetails: {
      email: 'foo@bar.com',
    }
  },
  // Other options
});
```

詳細については、Link を含むカスタム決済画面を[構築する方法をご覧ください](https://docs.stripe.com/payments/link/add-link-elements-integration.md)。

## Optional: サーバーから更新を取得する [クライアント側]

Payment Element が表示された後、PaymentIntent の [amount](https://docs.stripe.com/api/payment_intents/update.md#update_payment_intent-amount) などの属性を更新することができます (割引コードや配送料金など)。サーバー側で [PaymentIntent を更新](https://docs.stripe.com/api/payment_intents/update.md)して、[elements.fetchUpdates](https://docs.stripe.com/js/elements_object/fetch_updates) を呼び出すと、Payment Element に反映された新しい金額を確認できます。次の例では、PaymentIntent の amount (金額) を更新するサーバーエンドポイントを作成する方法を示しています。

#### 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.
client = Stripe::StripeClient.new('<<YOUR_SECRET_KEY>>')
get '/update' do
  intent = client.v1.payment_intents.update(
    '{{PAYMENT_INTENT_ID}}',
    {amount: 1499},
  )
  {status: intent.status}.to_json
end
```

この例は、クライアント側でこれらの変更を反映するために UI を更新する方法を示しています。

```javascript
(async () => {
  const response = await fetch('/update');
  if (response.status === 'requires_payment_method') {
    const {error} = await elements.fetchUpdates();
  }
})();
```

## Stripe に支払いを送信する [クライアント側]

Payment Element からの詳細を指定して [stripe.confirmPayment](https://docs.stripe.com/js/payment_intents/confirm_payment) を使用し、支払いを完了します。ユーザーが支払いを完了した後に Stripe がユーザーをリダイレクトする場所を指定するには、この関数に [return_url](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-return_url) を指定します。ユーザーはまず、銀行のオーソリページなどの中間サイトにリダイレクトされ、その後 `return_url` にリダイレクトされます。カード支払いでは、支払いが正常に完了するとすぐに `return_url` にリダイレクトします。

カード決済で支払いの完了後にリダイレクトを行わない場合は、[redirect](https://docs.stripe.com/js/payment_intents/confirm_payment#confirm_payment_intent-options-redirect) に `if_required` を設定できます。これで、リダイレクトベースの決済手段で購入する顧客のみがリダイレクトされます。

#### HTML + JS

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

form.addEventListener('submit', async (event) => {
  event.preventDefault();
const {error} = await stripe.confirmPayment({
    //`Elements` instance that was used to create the Payment Element
    elements,
    confirmParams: {
      return_url: 'https://example.com/order/123/complete',
    },
  });

  if (error) {
    // This point will only be reached if there is an immediate error when
    // confirming the payment. Show error to your customer (for example, payment
    // details incomplete)
    const messageContainer = document.querySelector('#error-message');
    messageContainer.textContent = error.message;
  } else {
    // Your customer will be redirected to your `return_url`. For some payment
    // methods like iDEAL, your customer will be redirected to an intermediate
    // site first to authorize the payment, then redirected to the `return_url`.
  }
});
```

#### React

支払いフォームコンポーネントから [stripe.confirmPayment](https://docs.stripe.com/js/payment_intents/confirm_payment) を呼び出すには、[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 [errorMessage, setErrorMessage] = 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} = await stripe.confirmPayment({
      //`Elements` instance that was used to create the Payment Element
      elements,
      confirmParams: {
        return_url: 'https://example.com/order/123/complete',
      },
    });


    if (error) {
      // This point will only be reached if there is an immediate error when
      // confirming the payment. Show error to your customer (for example, payment
      // details incomplete)
      setErrorMessage(error.message);
    } else {
      // Your customer will be redirected to your `return_url`. For some payment
      // methods like iDEAL, your customer will be redirected to an intermediate
      // site first to authorize the payment, then redirected to the `return_url`.
    }
  };

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

export default CheckoutForm;
```

`return_url` が、Web サイト上の支払いステータスを表示するページと対応していることを確認します。Stripe が顧客を `return_url` にリダイレクトするときは、以下の URL クエリーパラメーターが指定されます。

| パラメーター                         | 説明                                                                                                                                  |
| ------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------- |
| `payment_intent`               | `PaymentIntent` の一意の識別子。                                                                                                            |
| `payment_intent_client_secret` | `PaymentIntent` オブジェクトの [client secret](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret)。 |

> 顧客のブラウザーセッションを追跡するツールを利用している場合、リファラー除外リストに `stripe.com` ドメインの追加が必要になる場合があります。リダイレクトを行うと、一部のツールでは新しいセッションが作成され、セッション全体の追跡ができなくなります。

クエリパラメーターのいずれか 1 つを使用して PaymentIntent を取得します。[PaymentIntent のステータス](https://docs.stripe.com/payments/paymentintents/lifecycle.md)を調べて、顧客に表示する内容を決定します。また、`return_url` を指定するときにカスタムのクエリパラメーターを追加することもできます。このパラメーターはリダイレクトプロセスの間維持されます。

#### HTML + JS

```javascript

// Initialize Stripe.js using your publishable key
const stripe = Stripe('<<YOUR_PUBLISHABLE_KEY>>');

// Retrieve the "payment_intent_client_secret" query parameter appended to
// your return_url by Stripe.js
const clientSecret = new URLSearchParams(window.location.search).get(
  'payment_intent_client_secret'
);

// Retrieve the PaymentIntent
stripe.retrievePaymentIntent(clientSecret).then(({paymentIntent}) => {
  const message = document.querySelector('#message')

  // Inspect the PaymentIntent `status` to indicate the status of the payment
  // to your customer.
  //
  // Some payment methods will [immediately succeed or fail][0] upon
  // confirmation, while others will first enter a `processing` state.
  //
  // [0]: https://stripe.com/docs/payments/payment-methods#payment-notification
  switch (paymentIntent.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 again
      break;

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

#### React

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

const PaymentStatus = () => {
  const stripe = useStripe();
  const [message, setMessage] = useState(null);

  useEffect(() => {
    if (!stripe) {
      return;
    }

    // Retrieve the "payment_intent_client_secret" query parameter appended to
    // your return_url by Stripe.js
    const clientSecret = new URLSearchParams(window.location.search).get(
      'payment_intent_client_secret'
    );

    // Retrieve the PaymentIntent
    stripe
      .retrievePaymentIntent(clientSecret)
      .then(({paymentIntent}) => {
        // Inspect the PaymentIntent `status` to indicate the status of the payment
        // to your customer.
        //
        // Some payment methods will [immediately succeed or fail][0] upon
        // confirmation, while others will first enter a `processing` state.
        //
        // [0]: https://stripe.com/docs/payments/payment-methods#payment-notification
        switch (paymentIntent.status) {
          case 'succeeded':
            setMessage('Success! Payment received.');
            break;

          case 'processing':
            setMessage("Payment processing. We'll update you when payment is received.");
            break;

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

          default:
            setMessage('Something went wrong.');
            break;
        }
      });
  }, [stripe]);


  return message;
};

export default PaymentStatus;
```

## 支払い後のイベントを処理する [サーバー側]

支払いが完了すると、Stripe は [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.succeeded) イベントを送信します。[ダッシュボードの Webhook ツール](https://dashboard.stripe.com/webhooks)を使用するか [Webhook のガイド](https://docs.stripe.com/webhooks/quickstart.md)に従ってこれらのイベントを受信し、顧客への注文確認メールの送信、データベースでの売上の記録、配送ワークフローの開始などのアクションを実行します。

クライアントからのコールバックを待つのではなく、これらのイベントをリッスンします。クライアントでは、コールバックが実行される前に顧客がブラウザーのウィンドウを閉じたり、アプリを終了する場合、また悪意を持つクライアントがレスポンスを不正操作する場合もあります。非同期型のイベントをリッスンするよう組み込みを設定すると、単一の組み込みで[複数の異なるタイプの支払い方法](https://stripe.com/payments/payment-methods-guide)を受け付けることができます。

Payment Element を使用して支払いを回収する場合は、`payment_intent.succeeded` イベントのほかにこれらのイベントを処理することをお勧めします。

| イベント                                                                                                                            | 説明                                                                                                                                                                       | アクション                                                                                                                                                              |
| ------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md?lang=php#event_types-payment_intent.succeeded)           | 顧客が正常に支払いを完了したときに送信されます。                                                                                                                                                 | 顧客に注文の確定を送信し、顧客の注文の*フルフィルメント* (Fulfillment is the process of providing the goods or services purchased by a customer, typically after payment is collected)を実行します。 |
| [payment_intent.processing](https://docs.stripe.com/api/events/types.md?lang=php#event_types-payment_intent.processing)         | 顧客が正常に支払いを開始したが、支払いがまだ完了していない場合に送信されます。このイベントは、多くの場合、顧客が口座引き落としを開始するときに送信されます。その後、`payment_intent.succeeded` イベント、また、失敗の場合は `payment_intent.payment_failed` イベントが送信されます。 | 顧客に注文確認メールを送信し、支払いが保留中であることを示します。デジタル商品では、支払いの完了を待たずに注文のフルフィルメントを行うことが必要になる場合があります。                                                                                |
| [payment_intent.payment_failed](https://docs.stripe.com/api/events/types.md?lang=php#event_types-payment_intent.payment_failed) | 顧客が支払いを試みたが、支払いに失敗する場合に送信されます。                                                                                                                                           | 支払いが `processing` から `payment_failed` に変わった場合は、顧客に再度支払いを試すように促します。                                                                                                 |

## 導入をテストする

カスタムの決済システムをテストするには、以下の手順を実行します。

1. Payment Intent を作成して client secret を取得します。
2. 次の表の方法を使用して、支払い詳細を入力します。
   - カードの有効期限として任意の将来の日付を入力します。
   - 任意の 3 桁のセキュリティコードを入力します。
   - 請求先の任意の郵便番号を入力します。
3. Stripe に支払いを送信します。指定した `return_url` にリダイレクトされます。
4. ダッシュボードに移動し、[取引ページ](https://dashboard.stripe.com/test/payments?status%5B0%5D=successful)で支払いを探します。支払いが成功していると、そのリストに表示されます。
5. 支払いをクリックすると詳細が表示され、請求先情報と購入されたアイテムのリストなどを確認できます。これを使用して注文のフルフィルメントを実行できます。

詳細は、[実装のテスト](https://docs.stripe.com/testing.md)をご覧ください。

#### カード

| カード番号               | シナリオ                                                                                                                                                                                                                                                                 | テスト方法                                                      |
| ------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------- |
| 4242424242424242    | カード支払いは成功し、認証は必要とされません。                                                                                                                                                                                                                                              | クレジットカード番号と、任意の有効期限、セキュリティコード、郵便番号を使用してクレジットカードフォームに入力します。 |
| 4000002500003155    | カード支払いには*認証* (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)が必要です。 | クレジットカード番号と、任意の有効期限、セキュリティコード、郵便番号を使用してクレジットカードフォームに入力します。 |
| 4000000000009995    | カードは、`insufficient_funds` などの拒否コードで拒否されます。                                                                                                                                                                                                                           | クレジットカード番号と、任意の有効期限、セキュリティコード、郵便番号を使用してクレジットカードフォームに入力します。 |
| 6205500000000000004 | UnionPay カードは、13 ～ 19 桁の可変長です。                                                                                                                                                                                                                                       | クレジットカード番号と、任意の有効期限、セキュリティコード、郵便番号を使用してクレジットカードフォームに入力します。 |

#### ウォレット

| 決済手段   | シナリオ                                                                                                            | テスト方法                                                                                                     |
| ------ | --------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------- |
| Alipay | 顧客はリダイレクトベースの[即時通知型](https://docs.stripe.com/payments/payment-methods.md#payment-notification)の支払い方法で支払いに成功します。 | リダイレクトベースの任意の支払い方法を選択し、必要な情報を入力して、支払いを確定します。その後、リダイレクトページで **Complete test payment (テスト支払い完了)** をクリックします。 |

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

| 決済手段                            | シナリオ                                                                                                             | テスト方法                                                                                                                               |
| ------------------------------- | ---------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------- |
| BECS ダイレクトデビット                  | 顧客が BECS ダイレクトデビットによる支払いに成功しました。                                                                                 | アカウント番号 `900123456` と BSB `000000` を使用して、フォームに入力します。確定された PaymentIntent のステータスは、まず `processing` に移行し、3 分後に `succeeded` ステータスに移行します。 |
| BECS ダイレクトデビット                  | 顧客の支払いが `account_closed` エラーコードで失敗します。                                                                           | アカウント番号 `111111113`と BSB `000000`を使用して、フォームに入力します。                                                                                  |
| Bancontact、EPS、iDEAL、Przelewy24 | 顧客は、リダイレクトベースの即時通知型の支払い方法のリダイレクトページで、認証に失敗しました。                                                                  | リダイレクトベースの任意の支払い方法を選択し、必要な情報を入力して、支払いを確定します。その後、リダイレクトページで **Fail test payment (テスト支払い失敗)** をクリックします。                               |
| Pay by Bank                     | 顧客はリダイレクトベースの、[遅延通知型](https://docs.stripe.com/payments/payment-methods.md#payment-notification)の支払い方法で支払いに成功します。 | 支払い方法を選択し、必要な情報を入力して、支払いを確定します。その後、リダイレクトページで **Complete test payment (テスト支払い完了)** をクリックします。                                        |
| Pay by Bank                     | 顧客は、リダイレクトベースの遅延通知型の支払い方法のリダイレクトページで、認証に失敗しました。                                                                  | 支払い方法を選択し、必要な情報を入力して、支払いを確定します。その後、リダイレクトページで **Fail test payment (テスト支払いを失敗させる)** をクリックします。                                        |
| BLIK                            | BLIK による支払いはさまざまな理由で失敗します。即時の失敗 (コードの有効期限切れや無効など)、遅延型のエラー (銀行による拒否など)、またはタイムアウト (顧客が時間内に応答しなかったなど) などがあります。      | メールパターンを使用して[さまざまな失敗をシミュレーションします。](https://docs.stripe.com/payments/blik/accept-a-payment.md#simulate-failures)                     |

#### 口座引き落とし

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

#### 店舗支払い

| 決済手段        | シナリオ                                  | テスト方法                                                         |
| ----------- | ------------------------------------- | ------------------------------------------------------------- |
| Boleto、OXXO | 顧客が Boleto または OXXO で取引の詳細を使用して支払います。 | 支払い方法として Boleto または OXXO を選択し、支払いを送信します。ダイアログが表示されたら、それを閉じます。 |

実装内容をテストするためのその他の情報については、[テスト](https://docs.stripe.com/testing.md)をご覧ください。

## Optional: 支払い方法をさらに追加する

Payment Element は、デフォルトで[多数の支払い方法に対応](https://docs.stripe.com/payments/payment-methods/integration-options.md#choose-how-to-add-payment-methods)しています。一部の支払い方法を有効にして表示するには、追加のステップを実行する必要があります。

### Affirm

Affirm の使用を開始するには、[ダッシュボード](https://dashboard.stripe.com/settings/payment_methods)で有効にする必要があります。支払い方法に Affirm を指定して PaymentIntent を作成する際に、[配送先住所](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-shipping)も含める必要があります。この例では、顧客が[支払い方法を選択](https://docs.stripe.com/payments/accept-a-payment.md#web-create-intent)した後に配送情報をクライアントに渡すことを推奨しています。Stripe での [Affirm](https://docs.stripe.com/payments/affirm.md) の使用方法の詳細をご確認ください。

#### HTML + JS

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

form.addEventListener('submit', async (event) => {
  event.preventDefault();

  const {error} = await stripe.confirmPayment({
    //`Elements` instance that was used to create the Payment Element
    elements,
    confirmParams: {
      return_url: 'https://my-site.com/order/123/complete',shipping: {
        name: 'Jenny Rosen',
        address: {
          line1: '1 Street',
          city: 'Seattle',
          state: 'WA',
          postal_code: '95123',
          country: 'US'
        }
      },

    }
  });

  if (error) {
    // This point is reached if there's an immediate error when
    // confirming the payment. Show error to your customer (for example,
    // payment details incomplete)
    const messageContainer = document.querySelector('#error-message');
    messageContainer.textContent = error.message;
  } else {
    // Your customer is redirected to your `return_url`. For some payment
    // methods like iDEAL, your customer is redirected to an intermediate
    // site first to authorize the payment, then redirected to the `return_url`.
  }
});
```

#### React

```jsx

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

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

  const [errorMessage, setErrorMessage] = 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} = await stripe.confirmPayment({
      //`Elements` instance that was used to create the Payment Element
      elements,
      confirmParams: {
        return_url: 'https://my-site.com/order/123/complete',shipping: {
          name: 'Jenny Rosen',
          address: {
            line1: '1 Street',
            city: 'Seattle',
            state: 'WA',
            postal_code: '95123',
            country: 'US'
          }
        },

      }
    });


    if (error) {
      // This point will only be reached if there is an immediate error when
      // confirming the payment. Show error to your customer (for example,
      // payment details incomplete)
      setErrorMessage(error.message);
    } else {
      // Your customer will be redirected to your `return_url`. For some payment
      // methods like iDEAL, your customer will be redirected to an intermediate
      // site first to authorize the payment, then redirected to the `return_url`.
    }
  };

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

export default CheckoutForm;
```

#### Affirm をテストする

次の表を使用してさまざまなシナリオをテストする方法をご紹介します。

| シナリオ                            | テスト方法                                                          |
| ------------------------------- | -------------------------------------------------------------- |
| 顧客は Affirm による支払いに成功します。        | フォームに入力し (必ず配送先住所も含める)、支払いの認証を行います。                            |
| 顧客は Affirm のリダイレクトページで認証に失敗します。 | フォームに入力し、リダイレクトページで **Fail Test Payment (テスト支払い失敗)** をクリックします。 |

### Afterpay (Clearpay)

支払い方法に Afterpay を指定して PaymentIntent を作成する場合は、[配送先住所](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-shipping)を含める必要があります。Stripe での [Afterpay](https://docs.stripe.com/payments/afterpay-clearpay.md) の使用方法の詳細をご確認ください。

[ダッシュボード](https://dashboard.stripe.com/settings/payment_methods)から決済手段を管理できます。取引の金額、通貨、決済フローなどの要素に基づいて、対象となる決済手段が Stripe により返されます。最新バージョンの API では、この機能が Stripe によりデフォルトで有効になっているため、`automatic_payment_methods` パラメーターの指定は任意です。[ダッシュボード](https://dashboard.stripe.com/settings/payment_methods)で Afterpay / Clearpay を有効にしてください。

```curl
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 "shipping[name]=Jenny Rosen" \
  -d "shipping[address][line1]=1234 Main Street" \
  -d "shipping[address][city]=San Francisco" \
  -d "shipping[address][state]=CA" \
  -d "shipping[address][country]=US" \
  -d "shipping[address][postal_code]=94111"
```

#### Afterpay (Clearpay) をテストする

次の表を使用してさまざまなシナリオをテストする方法をご紹介します。

| シナリオ                               | テスト方法                                                          |
| ---------------------------------- | -------------------------------------------------------------- |
| 顧客が Afterpay での支払いに成功しました。         | フォームに入力し (必ず配送先住所も含める)、支払いの認証を行います。                            |
| 顧客が Afterpay のリダイレクトページで認証に失敗しました。 | フォームに入力し、リダイレクトページで **Fail Test Payment (テスト支払い失敗)** をクリックします。 |

### Apple Pay および Google Pay

[カード決済を有効にする場合](https://docs.stripe.com/payments/accept-a-payment.md?payment-ui=elements&api-integration=paymentintents#create-the-paymentintent)、[ウォレットの表示条件](https://docs.stripe.com/testing/wallets.md)を満たす環境にある顧客に対して Apple Pay および Google Pay を表示します。これらのウォレットからの決済を受け付けるには、次のことも必要です。

- [支払い方法設定](https://dashboard.stripe.com/settings/payment_methods)でこれらを有効にします。Apple Payはデフォルトで有効になっています。
- 開発環境と本番環境で HTTPS を介してアプリケーションを提供します。
- [ドメインを登録](https://docs.stripe.com/payments/payment-methods/pmd-registration.md)します。
- ウォレットの決済モーダルの同期状態を維持するために [PaymentIntent](https://docs.stripe.com/api/payment_intents.md) の金額を更新する場合は、[サーバーからの更新を取得](https://docs.stripe.com/payments/accept-a-payment.md?payment-ui=elements&api-integration=paymentintents#fetch-updates)します。

> #### 各地域でのテスト
> 
> Stripe Elements は、インドの Stripe アカウントと顧客に対して Google Pay および Apple Pay をサポートしていません。そのため、Stripe アカウントの拠点がインド以外に所在している場合も、テスターの IP アドレスがインドにある場合は、Google Pay または Apple Pay の実装をテストできません。

Stripe での [Apple Pay](https://docs.stripe.com/apple-pay.md) および [Google Pay](https://docs.stripe.com/google-pay.md) の使用方法の詳細をご確認ください。

### ACH ダイレクトデビット

ACH ダイレクトデビットによる支払い方法で Payment Element を使用する際には、次のステップに従います。

1. 顧客を表すオブジェクトとして、顧客設定の [Account](https://docs.stripe.com/api/v2/core/accounts/create.md#v2_create_accounts-configuration-customer) オブジェクト、または [Customer](https://docs.stripe.com/api/customers/create.md) オブジェクトのいずれかを作成します。

#### Accounts v2

```curl
curl -X POST https://api.stripe.com/v2/core/accounts \
  -H "Authorization: Bearer <<YOUR_SECRET_KEY>>" \
  -H "Stripe-Version: 2026-05-27.preview" \
  --json '{
    "configuration": {
        "customer": {}
    }
  }'
```

#### Customers v1

```curl
curl -X POST https://api.stripe.com/v1/customers \
  -u "<<YOUR_SECRET_KEY>>:"
```

1. `PaymentIntent` を作成する際に顧客 ID を指定します。

   #### Accounts v2

   ```curl
   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 setup_future_usage=off_session \
     -d "customer_account={{CUSTOMERACCOUNT_ID}}"
   ```

   #### Customers v1

   ```curl
   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 setup_future_usage=off_session \
     -d "customer={{CUSTOMER_ID}}"
   ```

2. [確認方法](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-payment_method_options-us_bank_account-verification_method)を選択します。

Payment Element で ACH ダイレクトデビットによる支払い方法を使用する場合は、`automatic` または `instant` のみを選択できます。

Stripe での [ACH ダイレクトデビット](https://docs.stripe.com/payments/ach-direct-debit.md)の使用方法の詳細をご確認ください。

#### ACH ダイレクトデビットをテストする

| シナリオ                           | テスト方法                                                                                                                                                                                                                                |
| ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| 顧客が即時の確認を使用し、アメリカの銀行口座で決済しました。 | **アメリカの銀行口座**を選択し、フォームに入力します。Test Institution (機関をテスト) をクリックします。モーダルに表示される指示に従って銀行口座を関連付け、支払いボタンをクリックします。                                                                                                                            |
| 顧客が少額入金を使用し、アメリカの銀行口座で決済しました。  | **アメリカの銀行口座**を選択し、フォームに入力します。**代わりに手動で銀行口座情報を入力**をクリックします。モーダルに表示される指示に従って銀行口座を関連付けます。これらの[テスト用口座番号](https://docs.stripe.com/payments/ach-direct-debit/accept-a-payment.md?platform=web#test-account-numbers)を使用できます。支払いボタンをクリックします。 |
| 顧客が銀行口座を関連付けるプロセスを完了できませんでした。  | **アメリカの銀行口座**を選択し、Test Institution (機関をテスト) または**代わりに手動で銀行口座情報を入力**をクリックします。完了せずにモーダルを閉じます                                                                                                                                           |

### BLIK

BLIK で Payment Element を使用する場合、ユーザーはバンキングアプリで支払いの承認を求めるモーダルを閉じることができます。この操作では、ユーザーは購入ページに戻らずに `return_url` にリダイレクトされます。Stripe での [BLIK](https://docs.stripe.com/payments/blik.md) の使用方法の詳細をご確認ください。

ユーザーがモーダルを閉じた場合、これに対応するには、`return_url` に対するサーバー側のハンドラで、Payment Intent の `status` が `succeeded` になっているか、まだ `requires_action` (ユーザーが支払わずにモーダルを閉じたことを示す) のままであるかを調べ、それぞれのケースに応じて対応します。

### QR コードを使用した支払い方法

QR コードベースの支払い方法 (WeChat Pay、PayNow、Pix、PromptPay、Cash App Pay) で Payment Element を使用すると、ユーザーは QR コードのモーダルを閉じることができます。この操作では、ユーザーが決済ページに戻らずに、お客様の `return_url` にリダイレクトされます。

ユーザーが QR コードのモーダルを閉じた操作を処理するには、お客様の `return_url` に対するサーバー側のハンドラーで、Payment Intent の `status` が `succeeded` になっているか、まだ `requires_action` (ユーザーが支払わずにモーダルを閉じたことを示す) のままであるかを調べ、それぞれのケースに応じて処理します。

それ以外に、QR コードのモーダルを閉じたときのリダイレクトを防止する詳細オプションパラメーター [`redirect=if_required`](https://docs.stripe.com/js/payment_intents/confirm_payment#confirm_payment_intent-options-redirect) を渡すことで、`return_url` への自動リダイレクトを防止する方法もあります。

### Cash App Pay

Payment Element は、さまざまな顧客認証方式を使用しているため、デスクトップウェブとモバイルウェブでは動的なフォームをレンダリングする方法が異なります。Stripe での [Cash App Pay](https://docs.stripe.com/payments/cash-app-pay.md) の使用方法の詳細をご確認ください。

#### モバイル版ウェブアプリの要素

Cash App Pay は、モバイルウェブで行われるリダイレクトベースの決済手段です。これにより、顧客は本番環境の Cash App、またはテスト環境のテスト用支払いページにリダイレクトされます。支払いが完了すると、`redirect=if_required` を設定したかどうかに関係なく `return_url` にリダイレクトされます。

#### デスクトップ版ウェブアプリの要素

Cash App Pay は、デスクトップウェブでの QR コードを利用した支払い方法です。この支払い方法では、Payment Element により、QR コードのモーダルがレンダリングされます。顧客は、QR コードスキャンアプリケーションまたは Cash App モバイルアプリケーションを使用して QR コードをスキャンする必要があります。

本番環境では、顧客が Cash App にリダイレクトされると、すぐに `return_url` にリダイレクトされます。テスト環境では、`return_url` にリダイレクトされる前に支払いを承認または拒否することができます。顧客は、支払いの完了前に QR コードモーダルを閉じることもでき、これを行うと `return_url` へのリダイレクトがトリガーされます。

Payment Intent の `status` を調べられるように、`return_url` は必ずウェブサイトのページに対応させる必要があります。Payment Intent の `status` は、`succeeded`、`failed`、`requires_action` (たとえば、顧客が QR コードをスキャンせずにモーダルを閉じた場合) のいずれかです。

それ以外に、詳細オプションパラメーター `redirect=if_required` を渡すことでも `return_url` への自動リダイレクトを防止できます。これにより、QR コードのモーダルを閉じたときのリダイレクトを防止できます。

### PayPal

PayPal を使用するには、[登録済みドメイン](https://docs.stripe.com/payments/payment-methods/pmd-registration.md)を使用していることを確認します。

## 顧客に Stripe を開示する

Stripe は顧客の Elements とのやり取りに関する情報を収集して、サービスを提供し、不正利用を防止し、サービスを向上します。これには、Cookie と IP アドレスを使用して、1 つの決済フローセッションで顧客に表示する Elements を特定することが含まれます。Stripe がこのような方法でデータを使用するために必要なすべての権利と同意について開示し、これらを取得することはお客様の責任です。詳細については、[プライバシーセンター](https://stripe.com/legal/privacy-center#as-a-business-user-what-notice-do-i-provide-to-my-end-customers-about-stripe)をご覧ください。

## See also

- [Stripe Elements](https://docs.stripe.com/payments/elements.md)
- [支払いの事前設定](https://docs.stripe.com/payments/save-and-reuse.md)
- [支払い中に支払いの詳細を保存する](https://docs.stripe.com/payments/save-during-payment.md)
- [決済フローで売上税、GST、VAT を計算](https://docs.stripe.com/tax/standalone-tax-api.md)