# Express Checkout Element で決済を受け付ける

単一の導入を使用して、ワンクリックの支払いボタンで決済を受け付けます。
![Express Checkout Element](https://b.stripecdn.com/docs-statics-srv/assets/link-in-express-checkout-element.67be6745e5a37c1c09074b0f43763cff.png)

Express Checkout Element は、ワンクリックの決済手段ボタンによる決済を受け付けるための導入です。サポートされている決済手段は、[Link](https://docs.stripe.com/payments/link.md)、[Apple Pay](https://docs.stripe.com/apple-pay.md)、[Google Pay](https://docs.stripe.com/google-pay.md)、[PayPal](https://docs.stripe.com/payments/paypal.md)、[Klarna](https://docs.stripe.com/payments/klarna.md)、[Amazon Pay](https://docs.stripe.com/payments/amazon-pay.md) などです。

顧客に表示される決済ボタンは、デバイスとブラウザーによって異なります。互換性のあるデバイスでは、Google Pay と Link に自動的に対応します。Apple Pay と PayPal に対応するには、追加の手順を実行する必要があります。

## デモを試す

デモでは、構築済みのオプションを切り替えて、背景色、レイアウト、サイズ、配送先住所回収を変更できます。このデモでは、Google Pay と Apple Pay が利用可能なプラットフォームでのみ表示されています。決済手段ボタンは、サポート対象国でのみ表示されます。

デモが表示されない場合は、このページを [サポート対象のブラウザー](https://docs.stripe.com/elements/express-checkout-element.md#supported-browsers) で表示してみてください。

| オプション               | 説明                                                                                                                                                                                                                                                                                        |
| ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **加盟店の所在国**         | [Stripe.js の初期化](https://docs.stripe.com/js/initializing)に使用する[公開可能キー](https://docs.stripe.com/keys.md#obtain-api-keys)を使用して設定します。国を変更するには、Express Checkout Element のマウントを解除し、公開可能キーを更新してから、Express Checkout Element を再マウントする必要があります。                                                     |
| **背景色**             | [Elements Appearance API](https://docs.stripe.com/elements/appearance-api.md) を使用して色を設定します。ボタンテーマは Appearance API から継承されますが、[Element の作成時に直接定義する](https://docs.stripe.com/js/elements_object/create_express_checkout_element#express_checkout_element_create-options-buttonTheme)こともできます。 |
| **デスクトップとモバイルのサイズ** | ドロップダウンを使用して、Express Checkout Element がマウントされる親エレメントの最大ピクセル幅を設定します。750px (デスクトップ) または 320px (モバイル) を設定できます。                                                                                                                                                                               |
| **最大列数と最大行数**       | これらの値を設定するには、[Express Checkout Element を作成](https://docs.stripe.com/js/elements_object/create_express_checkout_element)するときに、[layout](https://docs.stripe.com/js/elements_object/create_express_checkout_element#express_checkout_element_create-options-layout) パラメーターを使用します。            |
| **オーバーフローメニュー**     | これを設定するには、[Express Checkout Element を作成](https://docs.stripe.com/js/elements_object/create_express_checkout_element)するときに、[layout](https://docs.stripe.com/js/elements_object/create_express_checkout_element#express_checkout_element_create-options-layout) パラメーターを使用します。               |
| **配送先住所を収集する**      | 配送先情報を収集するには、Express Checkout Element の[作成](https://docs.stripe.com/js/elements_object/create_express_checkout_element)時にオプションを渡す必要があります。[顧客の詳細情報の収集と項目の表示](https://docs.stripe.com/elements/express-checkout-element/accept-a-payment.md#handle-create-event)の詳細をご覧ください。                 |

# Checkout Sessions API

> This is a Checkout Sessions API for when payment-ui is embedded-components. View the full page at https://docs.stripe.com/elements/express-checkout-element/accept-a-payment?payment-ui=embedded-components.

## Before you begin

1. ブラウザーに支払い方法を追加します。たとえば、カードを Google Pay アカウントや Safari のウォレットに追加できます。
1. アプリケーションは HTTPS 経由で提供します。これは、開発環境と本番環境で必須です。[ngrok](https://ngrok.com/) などのサービスを利用できます。
1. *サンドボックス*と本番環境の両方で[ドメインを登録](https://dashboard.stripe.com/settings/payment_method_domains)します。

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

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

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

## 支払い方法を有効にする

デフォルトでは、Stripe は[決済手段設定](https://dashboard.stripe.com/settings/payment_methods)を使用して、Express Checkout Element で表示される決済手段を決定します。[payment_method_types](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-payment_method_types) 属性を使用して、Checkout Session で特定の決済手段を設定することもできます。

### サポートされている決済手段

`card` 決済手段タイプを使用すると、Apple Pay と Google Pay が自動的に有効になります。Link を使用する場合は、`card` 決済手段タイプも渡す必要があります。

| 決済手段       | 決済手段の種類       |
| ---------- | ------------- |
| Amazon Pay | `amazon_pay`  |
| Apple Pay  | `card`        |
| Google Pay | `card`        |
| Link       | `link`、`card` |
| PayPal     | `paypal`      |

## Checkout Session を作成 [サーバー側]

サーバーで Checkout Session を作成して決済フローを制御します。Checkout Session は、項目、配送オプション、決済のその他の設定を定義します。

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

`ui_mode` を `custom` に設定して Express Checkout Element に統合します。返される Checkout Session には Client Secret が含まれ、クライアントはこれを使用して Checkout インターフェイスを安全に表示します。

Checkout Session で追加オプションを設定できます。

- [phone_number_collection](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-phone_number_collection): 顧客の電話番号を収集する
- [shipping_address_collection](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-shipping_address_collection): 配送先住所を収集する
- [shipping_options](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-shipping_options): 配送料金のオプションを指定
- [automatic_tax](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-automatic_tax): 税金の自動計算を有効にする

## Stripe Elements を設定する [クライアント側]

#### HTML + JS

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

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

サーバーから Client Secret を取得します。

```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>>');
```

サーバーから Client Secret を取得する `fetchClientSecret` 関数を作成します。

```javascript
const clientSecret = fetch('/create-checkout-session', {method: 'POST'})
  .then((response) => response.json())
  .then((json) => json.client_secret);
```

Checkout インスタンスを作成します。

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

#### React

Express Checkout Element は、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
```

サーバーから返された Client Secret を格納する `Promise<string> | string` として `clientSecret` を作成します。

[CheckoutProvider](https://docs.stripe.com/js/react_stripe_js/checkout/checkout_provider) コンポーネントでアプリケーションをラップし、`clientSecret` と `stripe` インスタンスを渡します。

```jsx
import React from 'react';
import {CheckoutProvider} from '@stripe/react-stripe-js/checkout';
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>>');

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

const App = () => {
  return (
    <CheckoutProvider
      stripe={stripePromise}
      options={{clientSecret}}
    >
      <CheckoutForm />
    </CheckoutProvider>
  );
};

export default App;
```

## Express Checkout Element を作成してマウントする [クライアント側]

Express Checkout Element には、HTTPS 接続を介して決済情報を Stripe に安全に送信する iframe が含まれています。導入を機能させるには、決済ページのアドレスの先頭を `https://`, ではなく `http://`, にする必要があります。

#### HTML + JS

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

```html
<div id="express-checkout-element">
  <!-- Express Checkout Element will be inserted here -->
</div>
<div id="error-message">
  <!-- Display an error message to your customers here -->
</div>
```

フォームが読み込まれたら、Express Checkout Element のインスタンスを作成し、コンテナーの DOM ノードにマウントします。

```javascript
// Create and mount the Express Checkout Element
const expressCheckoutElement = checkout.createExpressCheckoutElement();
expressCheckoutElement.mount('#express-checkout-element');
```

#### React

`ExpressCheckoutElement` コンポーネントを決済ページに追加します。

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

const CheckoutForm = () => {
  const checkoutState = useCheckout();

  if (checkoutState.type === 'error') {
    return <div>Error: {checkoutState.error.message}</div>;
  }

  return (
    <div id="checkout-page">
      <ExpressCheckoutElement onConfirm={onConfirm} />
    </div>
  );
};
```

## 顧客の詳細情報を収集してラインアイテムを表示する [クライアント側]

サーバーで作成した Checkout Session によって、項目、合計金額、利用可能な決済手段が自動的に決定されます。Express Checkout Element はこの情報を使用して、適切なインターフェイスを表示します。

#### HTML + JS

### 決済確定の処理

顧客が決済を確定したときに [confirm event](https://docs.stripe.com/js/elements_object/express_checkout_element_confirm_event) をリッスンします。

```javascript
const loadActionsResult = await checkout.loadActions();
if (loadActionsResult.type === 'success') {
  expressCheckoutElement.on('confirm', (event) => {
    loadActionsResult.actions.confirm({expressCheckoutConfirmEvent: event});
  });
}
```

### 動的な更新を処理する

顧客の選択 (配送先住所や配送料金の変更など) に基づいて Checkout Session を更新する必要がある場合は、イベントをリッスンしてセッションを更新できます。

```javascript
expressCheckoutElement.on('shippingaddresschange', async (event) => {
  const response = await fetch('/update-session-shipping', {
    method: 'POST',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({
      sessionId: checkout.session.id,
      shippingAddress: event.address
    })
  });
  const result = await response.json();

  if (result.error) {
    event.reject();
  } else {
    event.resolve();
  }
});

expressCheckoutElement.on('shippingratechange', async (event) => {
  const response = await fetch('/update-session-shipping-rate', {
    method: 'POST',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({
      sessionId: checkout.session.id,
      shippingRateId: event.shippingRate.id
    })
  });
  const result = await response.json();

  if (result.error) {
    event.reject();
  } else {
    event.resolve();
  }
});
```

#### React

### 決済確定の処理

顧客が決済を確定したときに `confirm` イベントを処理します。

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

const CheckoutForm = () => {
  const checkoutState = useCheckout();

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

  const handleConfirmExpressCheckout = (event) => {
    if (checkoutState.type === 'success') {
      checkoutState.checkout.confirm({expressCheckoutConfirmEvent: event});
    }
  };

  return (
    <div>
      {checkoutState.type === 'success' && (
        <pre>
          {JSON.stringify(checkoutState.checkout.lineItems, null, 2)}
          Total: {checkoutState.checkout.total?.amount}
        </pre>
      )}
      <ExpressCheckoutElement onConfirm={handleConfirmExpressCheckout} />
    </div>
  );
};
```

### 動的な更新を処理する

顧客の選択 (配送先住所や配送料金の変更など) に基づいて Checkout Session を更新する必要がある場合は、イベントをリッスンしてセッションを更新できます。

```jsx
const onShippingAddressChange = async ({resolve, reject, address}) => {
  const response = await fetch('/update-session-shipping', {
    method: 'POST',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({
      sessionId: checkout.session.id,
      shippingAddress: address
    })
  });
  const result = await response.json();

  if (result.error) {
    reject();
  } else {
    resolve();
  }
};

const onShippingRateChange = async ({resolve, reject, shippingRate}) => {
  const response = await fetch('/update-session-shipping-rate', {
    method: 'POST',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({
      sessionId: checkout.session.id,
      shippingRateId: shippingRate.id
    })
  });
  const result = await response.json();

  if (result.error) {
    reject();
  } else {
    resolve();
  }
};

<ExpressCheckoutElement
  onConfirm={handleConfirmExpressCheckout}
  onShippingAddressChange={onShippingAddressChange}
  onShippingRateChange={onShippingRateChange}
/>
```

## Optional: ready イベントをリッスンする [クライアント側]

マウント後、しばらくの間は Express Checkout Element にボタンが表示されません。ボタンを表示するときに Element をアニメーション表示するには、[ready イベント](https://docs.stripe.com/js/element/events/on_ready)をリッスンし、`availablePaymentMethods` の値を調べて、Express Checkout Element に表示するボタン (ある場合) を決定します。

#### HTML + JS

```javascript
// Optional: If you're doing custom animations, hide the Element
const expressCheckoutDiv = document.getElementById('express-checkout-element');
expressCheckoutDiv.style.visibility = 'hidden';

expressCheckoutElement.on('ready', ({availablePaymentMethods}) => {
  if (!availablePaymentMethods) {
    // No buttons will show
  } else {
    // Optional: Animate in the Element
    expressCheckoutDiv.style.visibility = 'initial';
  }
});
```

#### React

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

const CheckoutForm = () => {
  // Optional: If you're doing custom animations, hide the Element
  const [visibility, setVisibility] = useState('hidden');

  const onReady = ({availablePaymentMethods}) => {
    if (!availablePaymentMethods) {
      // No buttons will show
    } else {
      // Optional: Animate in the Element
      setVisibility('initial');
    }
  };

  return (
    <div id="checkout-page">
      <div id="express-checkout-element" style={{visibility}}>
        <ExpressCheckoutElement
          onConfirm={onConfirm}
          onReady={onReady}
        />
      </div>
    </div>
  );
};
```

## Optional: ボタンのスタイルを設定する [クライアント側]

決済手段ボタンごとに異なるスタイルを設定し、Express Checkout Element の全体的な外観を制御できます。

#### HTML + JS

```javascript
const expressCheckoutElement = checkout.createExpressCheckoutElement({
  // Specify a type per payment method
  buttonType: {
    googlePay: 'checkout',
    applePay: 'check-out',
    paypal: 'buynow',
  },
  // Specify a theme per payment method
  buttonTheme: {
    applePay: 'white-outline'
  },
  // Height in pixels. Defaults to 44. The width is always '100%'.
  buttonHeight: 55
});
```

#### React

```jsx
const expressCheckoutOptions = {
  // Specify a type per payment method
  buttonType: {
    googlePay: 'checkout',
    applePay: 'check-out',
    paypal: 'buynow'
  },
  // Specify a theme per payment method
  buttonTheme: {
    applePay: 'white-outline'
  },
  // Height in pixels. Defaults to 44. The width is always '100%'.
  buttonHeight: 55
};

<ExpressCheckoutElement
  options={expressCheckoutOptions}
  onConfirm={onConfirm}
/>
```

## 実装をテストする

本番環境に移行する前に、各支払い方法の組み込みを[テスト](https://docs.stripe.com/testing.md)します。支払い方法のブラウザーとの互換性を判断するには、[サポートされるブラウザー](https://docs.stripe.com/elements/express-checkout-element.md#supported-browsers)をご覧ください。iframe で Express Checkout Element を使用している場合、iframe で [allow](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#attr-allowpaymentrequest) 属性を `payment *` に設定する必要があります。

#### Link

> Don’t store real user data in *sandbox* (A sandbox is an isolated test environment that allows you to test Stripe functionality in your account without affecting your live integration. Use sandboxes to safely experiment with new features and changes) Link accounts. Treat them as if they’re publicly available, because these test accounts are associated with your publishable key.

Currently, Link only works with credit cards, debit cards, and qualified US bank account purchases. Link requires [domain registration](https://docs.stripe.com/payments/payment-methods/pmd-registration.md).

You can create sandbox accounts for Link using any valid email address. The following table shows the fixed one-time passcode values that Stripe accepts for authenticating sandbox accounts:

| 値                     | 結果                   |
| --------------------- | -------------------- |
| 以下に記載されていない任意の 6 桁の数字 | 成功                   |
| 000001                | エラー: コードが無効です        |
| 000002                | エラー: コードの有効期限が切れています |
| 000003                | エラー: 最大試行回数を超えました    |

#### ウォレット

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

### Apple Pay

Stripe のテストカード情報を Apple Pay に保存することはできません。ただし、貴社がテスト [API キー](https://docs.stripe.com/keys.md)を使用すると、Stripe はそれを認識し、利用可能な成功したテストカードのトークンを返します。これにより、本番環境のカードを使用して、請求を行わずにテスト支払いを実行できます。

[登録ドメイン](https://docs.stripe.com/payments/payment-methods/pmd-registration.md) を使用していること、[サポート対象ブラウザー](https://docs.stripe.com/elements/express-checkout-element.md#supported-browsers) を使用していること、Apple Pay ウォレットに有効なクレジットカードが保存されていることを確認してください。

### Google Pay

Stripe のテストカード情報を Google Pay に保存することはできません。ただし、お客様がテスト API キーを使用すると、Stripe はそれを認識し、利用可能な成功したテストカードのトークンを返します。これにより、本番環境のカードを使用して、請求を行わずにテスト支払いを実行できます。また、Google Pay の[テストカードスイート](https://developers.google.com/pay/api/web/guides/resources/test-card-suite)を使用して実装をテストすることもできます。

[登録ドメイン](https://docs.stripe.com/payments/payment-methods/pmd-registration.md) と [サポート対象ブラウザー](https://docs.stripe.com/elements/express-checkout-element.md#supported-browsers) を使用していること、および有効なクレジットカードが Google Pay ウォレットに保存されていることを確認してください。

### PayPal

PayPal の実装をテストするには、以下の手順を使用します。

1. [サンドボックスのテストアカウント](https://developer.paypal.com/dashboard/accounts)を作成して、サンドボックスモードであることを確認します。
1. Express Checkout Element の **PayPal** ボタンをクリックし、サンドボックスアカウントから生成されたメールアドレスとパスワードを使用してログインします。サンドボックスで個人の PayPal アカウントを使用することはできません。
1. まだ登録していない場合は、ドメインを[登録](https://dashboard.stripe.com/settings/payment_method_domains)します。

#### Amazon Pay

Amazon Pay のサンドボックステストアカウントを作成するには、以下を行います。

1. サンドボックスモードで **Amazon Pay** ボタンをクリックします。
1. **Amazon アカウントを作成**をクリックします。
1. サンドボックスアカウントを使用して、テスト用 [API キー](https://docs.stripe.com/keys.md)を使用している実装をテストします。

以下のカードを使用して、Amazon Pay サンドボックスでの決済をシミュレーションします。

| カード                    | 結果      |
| ---------------------- | ------- |
| 末尾が 9424 のディスカバー       | 成功      |
| 末尾が 1111 の Visa        | 成功      |
| 末尾が 0701 の Visa        | 3D セキュア |
| 末尾が 0005 のアメリカン・エキスプレス | 拒否      |
| 末尾が 0000 の JCB         | 拒否      |

## Optional: Stripe Connect で Express Checkout Element を使用する

*Connect* (Connect is Stripe's solution for multi-party businesses, such as marketplace or software platforms, to route payments between sellers, customers, and other recipients) プラットフォームは、Express Checkout Element with Checkout Sessions をセッションに含めることで使用できます。

> #### Customers v1 と Accounts v2 のリファレンスを比較する
> 
> Connect プラットフォームが [customer-configured Accounts](https://docs.stripe.com/api/v2/core/accounts/create.md#v2_create_accounts-configuration-customer) を使用している場合は、Stripe の [ガイド](https://docs.stripe.com/connect/use-accounts-as-customers.md)をご確認の上、コード内の `Customer` およびイベント参照を同等の Accounts v2 API リファレンスに置き換えてください。

1. サーバーで Checkout Session を作成する際は、連結アカウントを含めます。

   ```curl
   curl https://api.stripe.com/v1/checkout/sessions \
     -u sk_test_...: \
     -d "line_items[0][price]"="price_..." \
     -d "line_items[0][quantity]"=1 \
     -d "mode"="payment" \
     -d "ui_mode"="custom" \
     -d "return_url"="https://example.com/return" \
     -H "Stripe-Account: {{CONNECTED_ACCOUNT_ID}}"
   ```

1. Express Checkout Element を表示する予定の[すべてのドメインを登録](https://docs.stripe.com/payments/payment-methods/pmd-registration.md?dashboard-or-api=api#register-your-domain-while-using-connect)します。

## 顧客に 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)
- [Checkout Sessions](https://docs.stripe.com/payments/checkout.md)
- [サーバーで支払いを確定する](https://docs.stripe.com/payments/finalize-payments-on-the-server.md)


# Payment Intents API

> This is a Payment Intents API for when payment-ui is elements. View the full page at https://docs.stripe.com/elements/express-checkout-element/accept-a-payment?payment-ui=elements.

Express Checkout Element を使用する際は、Intent の作成前に支払いの詳細を収集することをお勧めします。これまでに [Payment Element](https://docs.stripe.com/payments/payment-element.md) を導入している場合に、このアプローチを行うには[Stripe システムの更新](https://docs.stripe.com/payments/accept-a-payment-deferred.md)が必要になる場合があります。

## Before you begin

- ブラウザーに支払い方法を追加します。たとえば、カードを Google Pay アカウントや Safari のウォレットに追加できます。
- アプリケーションは HTTPS 経由で提供します。これは、開発環境と本番環境で必須です。[ngrok](https://ngrok.com/) などのサービスを利用できます。
- *サンドボックス*と本番環境の両方で[ドメインを登録](https://dashboard.stripe.com/settings/payment_method_domains)します。

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

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

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

## 支払い方法を有効にする

デフォルトでは、Stripe はお客様の[決済手段の設定](https://dashboard.stripe.com/settings/payment_methods)を使用して、Express Checkout Element ででどの決済手段を有効にするかを決定します。

有効になっている決済手段を手動で上書きするには、`payment_method_types` 属性を使用して、有効にする決済手段をすべてリストします。

- インテントを作成する前に支払いを回収する場合は、[Elementsプロバイダーオプションの `paymentMethodTypes` 属性](https://docs.stripe.com/js/elements_object/create_without_intent#stripe_elements_no_intent-options-paymentMethodTypes)に決済手段のリストを作成します。
- Elements をレンダリングする前にインテントを作成する場合は、[インテントの `payment_method_types` 属性](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-payment_method_types)に決済手段のリストを作成します。

### サポートされている決済手段

支払い方法タイプ `card` を使用すると、Apple Pay と Google Pay が自動的に有効になります。Link を使用する場合は、必ず `card` 支払い方法タイプも渡します。

| 支払い方法名     | Payment method API パラメーター |
| ---------- | ------------------------- |
| Apple Pay  | `card`                    |
| Google Pay | `card`                    |
| Link       | `link, card`              |
| PayPal     | `paypal`                  |
| Amazon Pay | `amazon_pay`              |
| Klarna     | `klarna`                  |

## Stripe Elements を設定する [クライアント側]

#### HTML + JS

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

```html
<head>
  <title>Checkout</title>
  <script src="https://js.stripe.com/clover/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>>');
```

次に、[モード](https://docs.stripe.com/js/elements_object/create_without_intent#stripe_elements_no_intent-options-mode) (支払い、設定、またはサブスクリプション)、[金額](https://docs.stripe.com/js/elements_object/create_without_intent#stripe_elements_no_intent-options-amount) および[通貨](https://docs.stripe.com/js/elements_object/create_without_intent#stripe_elements_no_intent-options-currency)を指定して Elements のインスタンスを作成します。これらの値により、顧客に表示される支払い方法が決定されます。次のステップで、より詳細な設定が可能な Elements オプションをご覧ください。

```javascript
const options = {
  mode: 'payment',
  amount: 1099,
  currency: 'usd',
  // Customizable by using the Appearance API.
  appearance: {/*...*/},
};

// Set up Stripe.js and Elements to use in checkout form.
const elements = stripe.elements(options);
```

#### React

Express Checkout Element は、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
```

Express Checkout Element コンポーネントを使用するには、[Elements プロバイダー](https://docs.stripe.com/sdks/stripejs-react.md#elements-provider)で決済ページコンポーネントをラップします。公開可能キーを使用して `loadStripe` を呼び出し、返された `Promise` を `Elements` プロバイダーに渡します。

`Elements` プロバイダーは、モード (支払い、設定、サブスクリプション)、金額、通貨も受け入れます。Apple Pay や Google Pay などの多くの支払い方法で、これらの値が UI 内で使用されます。次のステップで、より詳細な設定が可能な 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 CheckoutPage from './CheckoutPage';

// 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 = {mode: 'payment',
    amount: 1099,
    currency: 'usd',
    // Customizable with appearance API.
    appearance: {/*...*/},
  };

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

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

## Optional: 追加の Elements オプション [クライアント側]

[Elements オブジェクト](https://docs.stripe.com/js/elements_object/create_without_intent)は、支払いの回収に影響する追加オプションを受け入れます。指定したオプションを基に Express Checkout Element は、有効化した決済手段の中から利用可能なものを表示します。詳しくは、[決済手段のサポート](https://docs.stripe.com/payments/payment-methods/payment-method-support.md)をご覧ください。

指定する Elements オプション ( `captureMethod`、`setupFutureUsage`、`paymentMethodOptions` など) が、Intent の作成時および確定時に渡す同等のパラメーターと一致していることを確認してください。パラメーターが一致しないと、予期しない動作やエラーが発生する可能性があります。

| プロパティー                       | タイプ                                                | 説明                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | 必須                                   |
| ---------------------------- | -------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------ |
| `mode`                       | - `payment`
  - `setup`
  - `subscription`         | Express Checkout Element が *PaymentIntent* (The Payment Intents API tracks the lifecycle of a customer checkout flow and triggers additional authentication steps when required by regulatory mandates, custom Radar fraud rules, or redirect-based payment methods)、*SetupIntent* (The Setup Intents API lets you build dynamic flows for collecting payment method details for future payments. It tracks the lifecycle of a payment setup flow and can trigger additional authentication steps if required by law or by the payment method)、または*サブスクリプション* (A Subscription represents the product details associated with the plan that your customer subscribes to. Allows you to charge the customer on a recurring basis)で使用されているかどうかを示します。 | はい                                   |
| `currency`                   | `string`                                           | 顧客に請求する金額の通貨。                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | はい                                   |
| `amount`                     | `number`                                           | Apple Pay、Google Pay、または BNPL の UI で示される、顧客に請求する金額。                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | `payment` および `subscription` のモードの場合 |
| `setupFutureUsage`           | - `off_session`
  - `on_session`                   | Express Checkout Element によって収集された決済の詳細を使用して、今後の決済を行う意図を示します。Express Checkout Element を使用した Klarna には対応していません。                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | いいえ                                  |
| `captureMethod`              | - `automatic`
  - `automatic_async`
  - `manual`   | 顧客の口座から売上をキャプチャーするタイミングを管理します。                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | いいえ                                  |
| `onBehalfOf`                 | `string`                                           | Connect のみ。取引に関する金銭的責任を負う Stripe アカウント ID。このオプションが実装に関連するかを判断するには、[ユースケース](https://docs.stripe.com/connect/charges.md)をご覧ください。                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | いいえ                                  |
| `paymentMethodTypes`         | `string[]`                                         | 表示する決済手段タイプのリスト。この属性を省略して、[Stripe ダッシュボード](https://dashboard.stripe.com/settings/payment_methods)で決済手段を管理できます。                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | いいえ                                  |
| `paymentMethodConfiguration` | `string`                                           | [Stripe ダッシュボード](https://dashboard.stripe.com/settings/payment_methods)で決済手段を管理するときに使用する[決済手段の設定](https://docs.stripe.com/api/payment_method_configurations.md)。指定しない場合は、既定の構成が使用されます。                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | いいえ                                  |
| `paymentMethodCreation`      | `manual`                                           | [stripe.createPaymentMethod](https://docs.stripe.com/js/payment_methods/create_payment_method_elements) を使用して、Elements インスタンスから PaymentMethods が作成されるようにします。                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | いいえ                                  |
| `paymentMethodOptions`       | `{us_bank_account: {verification_method: string}}` | `us_bank_account` 決済手段の確認オプション。[Payment Intents](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_options-us_bank_account-verification_method) と同じ確認手段を受け入れます。                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | いいえ                                  |
| `paymentMethodOptions`       | `{card: {installments: {enabled: boolean}}}`       | [Stripe ダッシュボード](https://dashboard.stripe.com/settings/payment_methods)で決済手段を管理していないときに、カード分割払いプランの選択 UI を手動で有効化できるようにします。`mode='payment'` を設定し、「さらに」`paymentMethodTypes` を明示的に指定する必要があります。それ以外の場合は、エラーが発生します。`paymentMethodCreation='manual'` とは互換性がありません。                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | いいえ                                  |

## Express Checkout Element を作成してマウントする [クライアント側]

Express Checkout Element には、HTTPS 接続を介して支払い情報を Stripe に安全に送信する iframe が含まれています。実装を機能させるには、決済ページのアドレスの先頭を `http://` ではなく `https://` にする必要があります。

#### HTML + JS

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

```html
<div id="express-checkout-element">
  <!-- Express Checkout Element will be inserted here -->
</div>
<div id="error-message">
  <!-- Display an error message to your customers here -->
</div>
```

フォームが読み込まれたら、Express Checkout Element のインスタンスを作成し、コンテナーの DOM ノードにマウントします。

```javascript
// Create and mount the Express Checkout Element
const expressCheckoutElement = elements.create('expressCheckout');
expressCheckoutElement.mount('#express-checkout-element');
```

#### React

`ExpressCheckoutElement` コンポーネントを決済ページに追加します。

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

const CheckoutPage = () => {
  return (
    <div id="checkout-page"><ExpressCheckoutElement onConfirm={onConfirm} />
    </div>
  );
};
```

## 顧客の詳細情報を収集してラインアイテムを表示する [クライアント側]

Express Checkout Element [作成](https://docs.stripe.com/js/elements_object/create_express_checkout_element)時にオプションを渡します。

#### HTML + JS

### 支払人の情報を収集する

電子メールを収集するには `emailRequired: true` を、電話番号を収集するには `phoneNumberRequired: true` を設定します。

`billingAddressRequired` のデフォルトは統合によって異なります。

- Express 決済 Element の作成時に `allowedShippingCountries`、`phoneNumberRequired`、`shippingAddressRequired`、`emailRequired`、`applePay`、`lineItems`、または `business` を渡すと、`billingAddressRequired` はデフォルトで false になります。
- それ以外の場合、`billingAddressRequired` はデフォルトで true になります。

```javascript
elements.create('expressCheckout', {
  emailRequired: true,
  phoneNumberRequired: true
});
```

通常、PayPal は顧客の請求先住所 (国を除く) や電話番号を指定しません。指定されていない場合、confirm イベントでは、これらのプロパティの文字列が空になります。顧客の請求先住所または電話番号が必須である場合、Express Checkout Element は PayPal ボタンを表示しませんが、その情報を入手可能である場合を除きます。

### 配送先情報を収集する

`shippingAddressRequired: true`を設定し、[shippingRates](https://docs.stripe.com/js/elements_object/create_express_checkout_element#express_checkout_element_create-options-shippingRates) の配列を渡します。

```javascript
elements.create('expressCheckout', {
  shippingAddressRequired: true,
  allowedShippingCountries: ['US'],
  shippingRates: [
    {
      id: 'free-shipping',
      displayName: 'Free shipping',
      amount: 0,
      deliveryEstimate: {
        maximum: {unit: 'day', value: 7},
        minimum: {unit: 'day', value: 5}
      }
    },
  ]
});
```

[shippingaddresschange イベント](https://docs.stripe.com/js/elements_object/express_checkout_element_shippingaddresschange_event)をリッスンして、顧客が配送先住所を選択した際にこれを検出します。このイベントを処理する場合は、`resolve` または `reject` のいずれかを呼び出す必要があります。

> #### 配送先住所に関するプライバシー
> 
> プライバシー確保のため、ブラウザーは配送料の計算に必要のない機密情報を削除して、配送先住所を匿名化する場合があります。国によっては、一部のフィールドが欠落していたり、部分的に非表示になっていたりすることがあります。たとえば、アメリカの配送先住所は、市、州、郵便番号のみで構成されます。ブラウザーの決済インターフェースで購入が確定されると、[confirm イベント](https://docs.stripe.com/js/elements_object/express_checkout_element_confirm_event#express_checkout_element_on_confirm-handler-shippingAddress)オブジェクトに配送先住所が表示されます。

```javascript
expressCheckoutElement.on('shippingaddresschange', async (event) => {
  const response = await fetch('/calculate-shipping', {
    data: JSON.stringify({
      shippingAddress: event.address
    })
  });
  const result = await response.json();
  event.resolve({
    lineItems: result.updatedLineItems,
  });
});
```

[shippingratechange イベント](https://docs.stripe.com/js/elements_object/express_checkout_element_shippingratechange_event)をリッスンして、顧客が配送料金を選択した際にこれを検出します。このイベントを処理する場合は、`resolve` または `reject` のいずれかを呼び出す必要があります。

```javascript
expressCheckoutElement.on('shippingratechange', async (event) => {
  const response = await fetch('/calculate-and-update-amount', {
    data: JSON.stringify({
      shippingRate: event.shippingRate
    })
  });
  const result = await response.json();
  elements.update({amount: result.amount})
  event.resolve({
    lineItems: result.updatedLineItems,
  });
});
```

[cancel イベント](https://docs.stripe.com/js/elements_object/express_checkout_element_cancel_event)をリッスンして、顧客が決済インターフェイスを閉じた際に、これを検出します。金額を当初の金額にリセットします。

```javascript
expressCheckoutElement.on('cancel', () => {
  elements.update({amount: 1099})
});
```

### ラインアイテムを表示する

[lineItems](https://docs.stripe.com/js/elements_object/create_express_checkout_element#express_checkout_element_create-options-lineItems) の配列を渡します。:

```javascript
elements.create('expressCheckout', {
  lineItems: [
    {
      name: 'Sample item',
      amount: 1000
    },
    {
      name: 'Tax',
      amount: 100
    },
    {
      name: 'Shipping cost',
      amount: 1000
    }
  ]
});
```

### Apple Pay インターフェイスを設定する

Apple Pay インターフェイスの設定方法をご確認ください。

### 加盟店が開始する取引 (MIT)

ユーザーが Apple Pay で決済する際に、Express Checkout Element `click` イベントで関連する[マーチャントトークンのタイプ](https://docs.stripe.com/apple-pay/merchant-tokens.md?pay-element=ece&mpan=auto-reload#merchant-token-types)をリクエストすることで、継続支払い、後払い、自動リロード支払いを設定することができます。Apple Pay マーチャントトークンを実装する際は、Apple Pay の最新ガイドラインに準拠し、将来の実装に対応できるようにすることをお勧めします。

#### React

### 支払人の情報を収集する

電子メールを収集するには `emailRequired: true` を、電話番号を収集するには `phoneNumberRequired: true` を設定します。

`billingAddressRequired` のデフォルトは統合によって異なります。

- Express 決済 Element の作成時に `allowedShippingCountries`、`phoneNumberRequired`、`shippingAddressRequired`、`emailRequired`、`applePay`、`lineItems`、または `business` を渡すと、`billingAddressRequired` はデフォルトで false になります。
- それ以外の場合、`billingAddressRequired` はデフォルトで true になります。

```jsx
const options = {
  emailRequired: true,
  phoneNumberRequired: true
};
```

### 配送先情報を収集する

`shippingAddressRequired: true`を設定し、[shippingRates](https://docs.stripe.com/js/elements_object/create_express_checkout_element#express_checkout_element_create-options-shippingRates) の配列を渡します。:

```jsx
const options = {
  emailRequired: true,
  phoneNumberRequired: true,
  shippingAddressRequired: true,
  allowedShippingCountries: ['US'],
  shippingRates: [
    {
      id: 'free-shipping',
      displayName: 'Free shipping',
      amount: 0,
      deliveryEstimate: {
        maximum: {unit: 'day', value: 7},
        minimum: {unit: 'day', value: 5}
      }
    },
  ]
};
```

[shippingaddresschange イベント](https://docs.stripe.com/js/elements_object/express_checkout_element_shippingaddresschange_event)をリッスンして、顧客が配送先住所を選択した際にこれを検出します。このイベントを処理する場合は、`resolve` または `reject` のいずれかを呼び出す必要があります。

```jsx
const onShippingAddressChange = async ({resolve, address}) => {
  const response = await fetch('/calculate-shipping', {
    data: JSON.stringify({
      shippingAddress: address
    })
  });
  const result = await response.json();
  resolve({
    lineItems: result.updatedLineItems,
  });
};
```

[shippingratechange イベント](https://docs.stripe.com/js/elements_object/express_checkout_element_shippingratechange_event)をリッスンして、顧客が配送料金を選択した際にこれを検出します。このイベントを処理する場合は、`resolve` または `reject` のいずれかを呼び出す必要があります。

```jsx
const onShippingRateChange = async ({resolve, shippingRate}) => {
  const response = await fetch('/calculate-and-update-amount', {
    data: JSON.stringify({
      shippingRate: shippingRate
    })
  });
  const result = await response.json();
  elements.update({amount: result.amount})
  resolve({
    lineItems: result.updatedLineItems,
  });
};
```

[cancel イベント](https://docs.stripe.com/js/elements_object/express_checkout_element_cancel_event)をリッスンして、顧客が決済インターフェイスを閉じた際に、これを検出します。金額を当初の金額にリセットします。

```jsx
const onCancel = () => {
  elements.update({amount: 1099})
};
```

Element の作成時にイベントハンドラーを追加します。

```jsx
<ExpressCheckoutElementoptions={options}
  onConfirm={onConfirm}
  onShippingAddressChange={onShippingAddressChange}
  onShippingRateChange={onShippingRateChange}
  onCancel={onCancel}
/>
```

### ラインアイテムを表示する

[lineItems](https://docs.stripe.com/js/elements_object/express_checkout_element_click_event#express_checkout_element_on_click-handler-resolve-lineItems) の配列を渡します。

```jsx
const options = {
  lineItems: [
    {
      name: 'Sample item',
      amount: 1000
    },
    {
      name: 'Tax',
      amount: 100
    },
    {
      name: 'Shipping cost',
      amount: 1000
    }
  ]
};
```

### Apple Pay インターフェイスを設定する

Apple Pay インターフェイスの設定方法をご確認ください。

### 加盟店が開始する取引 (MIT)

Apple Pay 用に構成するための特定のオプションが用意されています。`applePay.recurringPaymentRequest`[オプション](https://docs.stripe.com/js/elements_object/create_express_checkout_element#express_checkout_element_create-options-applePay-recurringPaymentRequest)を設定して、継続支払いを設定するリクエストを指定します。指定すると、Apple Pay は[マーチャントトークン](https://developer.apple.com/apple-pay/merchant-tokens/)を発行し、継続支払いの決済手段を管理する方法を顧客に提供します。

```jsx
const options = {
  applePay: {
    recurringPaymentRequest: {
      paymentDescription: 'My subscription',
      managementURL: 'https://example.com/billing',
      regularBilling: {
        amount: 2500,
        label: 'Monthly subscription fee',
        recurringPaymentIntervalUnit: 'month',
        recurringPaymentIntervalCount: 1,
      },
    }
  }
};
```

## Optional: ready イベントをリッスンする [クライアント側]

マウント後、しばらくの間は Express Checkout Element にボタンが表示されません。ボタンを表示するときに Element をアニメーション表示するには、[ready イベント](https://docs.stripe.com/js/element/events/on_ready)をリッスンし、`availablePaymentMethods` の値を調べて、Express Checkout Element に表示するボタン (ある場合) を決定します。

#### HTML + JS

```javascript
// Optional: If you're doing custom animations, hide the Element
const expressCheckoutDiv = document.getElementById('express-checkout-element');
expressCheckoutDiv.style.visibility = 'hidden';

expressCheckoutElement.on('ready', ({availablePaymentMethods}) => {
  if (!availablePaymentMethods) {
    // No buttons will show
  } else {
    // Optional: Animate in the Element
    expressCheckoutDiv.style.visibility = 'initial';
  }
});
```

#### React

```jsx
import React, {useState} from 'react';
import {ExpressCheckoutElement} from '@stripe/react-stripe-js';
import {onConfirm} from './confirmHandler';

const CheckoutPage = () => {
  // Optional: If you're doing custom animations, hide the Element
  const [visibility, setVisibility] = useState('hidden');
const onReady = ({availablePaymentMethods}) => {
    if (!availablePaymentMethods) {
      // No buttons will show
    } else {
      // Optional: Animate in the Element
      setVisibility('initial');
    }
  };

  return (
    <div id="checkout-page">
      <div id="express-checkout-element" style={{visibility}}>
        <ExpressCheckoutElement
          onConfirm={onConfirm}onReady={onReady}
        />
      </div>
    </div>
  );
};
```

## Optional: 支払いボタンを表示するタイミングを管理する [クライアント側]

Express Checkout Element に表示する支払い方法は、次のいくつかの方法で管理できます。

- Stripe ダッシュボードの[支払い方法の設定](https://dashboard.stripe.com/settings/payment_methods)。
- [paymentMethods property](https://docs.stripe.com/js/elements_object/create_express_checkout_element#express_checkout_element_create-options-paymentMethods) を使用して、支払いボタンを無効化します。このプロパティを使用すると、顧客に表示する内容をより細かく管理できます。

Express Checkout Element は、顧客がサポート対象のプラットフォームを使用しており、有効なカードを保有している場合に Apple Pay または Google Pay を表示します。有効なカードを保有していない場合でも常に Apple Pay と Google Pay を表示するには、`paymentMethods` を使用して設定することもできます。

## Optional: ボタンのスタイルを設定する [クライアント側]

支払い方法の各ボタンの[スタイル](https://docs.stripe.com/js/elements_object/create_express_checkout_element#express_checkout_element_create-options-buttonTheme)を個別に設定できます。ボタンのテーマとタイプの例については、[Google Pay](https://developers.google.com/pay/api/web/guides/resources/customize) と [Apple Pay](https://developer.apple.com/design/human-interface-guidelines/apple-pay#Using-Apple-Pay-buttons) のリソースをご確認ください。`borderRadius` 変数は、[Appearance API](https://docs.stripe.com/elements/appearance-api.md?platform=web#commonly-used-variables) で使用することもできます。

#### HTML + JS

```javascript
const appearance = {
  variables: {
    // This controls the border-radius of the rendered Express Checkout Element
    borderRadius: '4px',
  }
};

// Pass the appearance object to the Elements instance
const elements = stripe.elements({clientSecret, appearance});

elements.create('expressCheckout', {
  // Specify a type per payment method
  // Defaults to 'buy' for Google, 'plain' for Apple, and 'paypal' for PayPal
  buttonType: {
    googlePay: 'checkout',
    applePay: 'check-out',
    paypal: 'buynow',
  },
  // Specify a theme per payment method
  // Default theme is based on appearance API settings
  buttonTheme: {
    applePay: 'white-outline'
  },
  // Height in pixels. Defaults to 44. The width is always '100%'.
  buttonHeight: 55
});
```

#### React

```jsx
const options = {
  mode: 'payment',
  amount: 1099,
  currency: 'usd',appearance: {
    variables: {
      // This controls the border-radius of the rendered Express Checkout Element
      borderRadius: '4px'
    }
  }
};

const expressCheckoutOptions = {
  // Specify a type per payment method
  // Defaults to 'buy' for Google and 'plain' for Apple
  buttonType: {
    googlePay: 'checkout',
    applePay: 'check-out'
  },
  // Specify a theme per payment method
  // Default theme is based on appearance API settings
  buttonTheme: {
    applePay: 'white-outline'
  },
  // Height in pixels. Defaults to 44. The width is always '100%'.
  buttonHeight: 55
};
```

Element と `Elements` プロバイダーの作成時にこれらの `options` を渡します。

```jsx
<Elements stripe={stripePromise} options={options}>
  <ExpressCheckoutElementoptions={expressCheckoutOptions}
    onConfirm={onConfirm}
  />
</Elements>
```

## Optional: ConfirmationToken を作成する [クライアント側]

支払いが顧客によって承認されると、*ConfirmationToken* (ConfirmationTokens help capture data from your client, such as your customer's payment instruments and shipping address, and are used to confirm a PaymentIntent or SetupIntent) を作成できます。追加の検証またはビジネスロジックのために、確定前にこれをサーバーに送信します。作成された ConfirmationToken をすぐに使用して、PaymentIntent または SetupIntent を確定する必要があります。

#### HTML + JS

```javascript
const handleError = (error) => {
  const messageContainer = document.querySelector('#error-message');
  messageContainer.textContent = error.message;
}

expressCheckoutElement.on('confirm', async (event) => {
  ...

  const {error: submitError} = await elements.submit();
  if (submitError) {
    handleError(submitError);
    return;
  }

  // Create a ConfirmationToken using the details collected by the Express Checkout Element
  const {error, confirmationToken} = await stripe.createConfirmationToken({
    elements,
    params: {
      payment_method_data: {
        billing_details: {
          name: 'Jenny Rosen',
        }
      },
      return_url: 'https://example.com/order/123/complete'
    }
  });

  if (error) {
    // This point is only reached if there's an immediate error when
    // confirming the payment. Show the error to your customer (for example, payment details incomplete)
    handleError(error);
    return;
  }

  // Send the ConfirmationToken ID to your server for additional logic and attach the ConfirmationToken
  const res = await fetch('/create-intent', {
    method: 'POST',
    body: confirmationToken.id
  });
  const {client_secret: clientSecret} = await res.json();

  // Confirm the PaymentIntent
  const {error: confirmError} = await stripe.confirmPayment({
    clientSecret,
    confirmParams: {
      confirmation_token: confirmationToken.id
    },
  });

  if (confirmError) {
    // This point is only reached if there's an immediate error when
    // confirming the payment. Show the error to your customer (for example, payment details incomplete)
    handleError(confirmError);
  } else {
    // The payment UI automatically closes with a success animation.
    // Your customer is redirected to your `return_url`.
  }
});
```

#### React

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

const CheckoutPage = () => {
  const stripe = useStripe();
  const elements = useElements();
  const [errorMessage, setErrorMessage] = useState();

  const onConfirm = async (event) => {
    if (!stripe) {
      // Stripe.js hasn't loaded yet.
      // Make sure to disable form submission until Stripe.js has loaded.
      return;
    }

    const {error: submitError} = await elements.submit();
    if (submitError) {
      setErrorMessage(submitError.message);
      return;
    }

    // Create a ConfirmationToken using the details collected by the Express Checkout Element
    const {error, confirmationToken} = await stripe.createConfirmationToken({
      elements,
      params: {
        payment_method_data: {
          billing_details: {
            name: 'Jenny Rosen',
          },
        },
        return_url: 'https://example.com/order/123/complete',
      }
    });

    if (error) {
      // This point is only reached if there's an immediate error when
      // creating the ConfirmationToken. Show the error to your customer (for example, payment details incomplete)
      setErrorMessage(error.message);
    }

    // Send the ConfirmationToken ID to your server for additional logic and attach the ConfirmationToken
    const res = await fetch('/create-intent', {
      method: 'POST',
      body: confirmationToken.id
    });
    const {client_secret: clientSecret} = await res.json();

    // Confirm the PaymentIntent
    const {error: confirmError} = await stripe.confirmPayment({
      clientSecret,
      confirmParams: {
        confirmation_token: confirmationToken.id
      },
    });

    if (confirmError) {
      // This point is only reached if there's an immediate error when
      // confirming the payment. Show the error to your customer (for example, payment details incomplete)
      setErrorMessage(confirmError.message);
    } else {
      // The payment UI automatically closes with a success animation.
      // Your customer is redirected to your `return_url`.
    }
  };

  return (
    <div id="checkout-page">
      <ExpressCheckoutElement onConfirm={onConfirm} />
      {errorMessage && <div>{errorMessage}</div>}
    </div>
  );
};
```

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

Stripe は *PaymentIntent* (The Payment Intents API tracks the lifecycle of a customer checkout flow and triggers additional authentication steps when required by regulatory mandates, custom Radar fraud rules, or redirect-based payment methods) オブジェクトを使用して、顧客から支払いを回収するお客様の意図を示し、プロセス全体を通して請求の実施と支払い状態の変化を追跡します。

サーバーで金額と通貨を指定し、PaymentIntent を作成します。これは、[ステップ 3](https://docs.stripe.com/elements/express-checkout-element/accept-a-payment.md#set-up-elements) で `stripe.elements` インスタンスに設定した内容と一致している必要があります。請求金額は、クライアント側ではなく、常に信頼できる環境のサーバー側で指定してください。これにより、悪意のある顧客が金額を恣意的に選択できないようにします。

#### Ruby

```ruby
require 'stripe'
Stripe.api_key = '<<YOUR_SECRET_KEY>>'

post '/create-intent' do
  # If you used a Tax Calculation, optionally recalculate taxes
  # confirmation_token = Stripe::ConfirmationToken.retrieve(params[:confirmation_token_id])
  # summarized_payment_details = summarize_payment_details(confirmation_token)

  intent = Stripe::PaymentIntent.create({
    # To allow saving and retrieving payment methods, provide the Customer ID.
    customer: customer.id,
    # If you used a Tax Calculation, use its `amount_total`.
    # amount: summarized_payment_details.amount_total,
    amount: 1099,
    currency: 'usd',
    # Specifying the `automatic_payment_methods` parameter is optional because Stripe enables its functionality by default.
    automatic_payment_methods: {enabled: true},
    # If you used a Tax Calculation, link it to the PaymentIntent to make sure any transitions accurately reflect the tax.
    # hooks: {
    #  inputs: {
    #    tax: {
    #      calculation: tax_calculation.id
    #    }
    #  }
    #}
  },
  #{
  #  stripe_version: '2025-09-30.preview' }
  )
  {client_secret: intent.client_secret}.to_json
end
```

返される 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)) が含まれています。これは、PaymentIntent オブジェクト全体を渡すことなく安全に決済プロセスを完了するために、クライアント側で使用されます。client secret をクライアント側に渡す際には、いくつかの方法を使用できます。

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

[stripe.confirmPayment](https://docs.stripe.com/js/payment_intents/confirm_payment) を使用し、Express Checkout Element からの詳細を使って支払いを完了します。

> #### 事前に承認された金額
> 
> Amazon Pay、Klarna、PayPal の場合、PaymentIntent で確定した金額と買い手が事前承認した金額が一致している必要があります。金額が一致しないと、支払いは拒否されます。

支払いの完了後に 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 handleError = (error) => {
  const messageContainer = document.querySelector('#error-message');
  messageContainer.textContent = error.message;
}

expressCheckoutElement.on('confirm', async (event) => {
  const {error: submitError} = await elements.submit();
  if (submitError) {
    handleError(submitError);
    return;
  }

  // Create the PaymentIntent and obtain clientSecret
  const res = await fetch('/create-intent', {
    method: 'POST',
  });
  const {client_secret: clientSecret} = await res.json();

  const {error} = await stripe.confirmPayment({
    // `elements` instance used to create the Express Checkout Element
    elements,
    // `clientSecret` from the created PaymentIntent
    clientSecret,
    confirmParams: {
      return_url: 'https://example.com/order/123/complete',
    },
  });

  if (error) {
    // This point is only reached if there's an immediate error when
    // confirming the payment. Show the error to your customer (for example, payment details incomplete)
    handleError(error);
  } else {
    // The payment UI automatically closes with a success animation.
    // Your customer is redirected to your `return_url`.
  }
});
```

#### React

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

const CheckoutPage = () => {
  const stripe = useStripe();
  const elements = useElements();
  const [errorMessage, setErrorMessage] = useState();

  const onConfirm = async (event) => {
    if (!stripe) {
      // Stripe.js hasn't loaded yet.
      // Make sure to disable form submission until Stripe.js has loaded.
      return;
    }

    const {error: submitError} = await elements.submit();
    if (submitError) {
      setErrorMessage(submitError.message);
      return;
    }

    // Create the PaymentIntent and obtain clientSecret
    const res = await fetch('/create-intent', {
      method: 'POST',
    });
    const {client_secret: clientSecret} = await res.json();

    // Confirm the PaymentIntent using the details collected by the Express Checkout Element
    const {error} = await stripe.confirmPayment({
      // `elements` instance used to create the Express Checkout Element
      elements,
      // `clientSecret` from the created PaymentIntent
      clientSecret,
      confirmParams: {
        return_url: 'https://example.com/order/123/complete',
      },
    });

    if (error) {
      // This point is only reached if there's an immediate error when
      // confirming the payment. Show the error to your customer (for example, payment details incomplete)
      setErrorMessage(error.message);
    } else {
      // The payment UI automatically closes with a success animation.
      // Your customer is redirected to your `return_url`.
    }
  };

  return (
    <div id="checkout-page">
      <ExpressCheckoutElement onConfirm={onConfirm} />
      {errorMessage && <div>{errorMessage}</div>}
    </div>
  );
};
```

## 実装をテストする

本番環境に移行する前に、各支払い方法の組み込みを[テスト](https://docs.stripe.com/testing.md)します。支払い方法のブラウザーとの互換性を判断するには、[サポートされるブラウザー](https://docs.stripe.com/elements/express-checkout-element.md#supported-browsers)をご覧ください。iframe で Express Checkout Element を使用している場合、iframe で [allow](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#attr-allowpaymentrequest) 属性を `payment *` に設定する必要があります。

#### Link

> Don’t store real user data in *sandbox* (A sandbox is an isolated test environment that allows you to test Stripe functionality in your account without affecting your live integration. Use sandboxes to safely experiment with new features and changes) Link accounts. Treat them as if they’re publicly available, because these test accounts are associated with your publishable key.

Currently, Link only works with credit cards, debit cards, and qualified US bank account purchases. Link requires [domain registration](https://docs.stripe.com/payments/payment-methods/pmd-registration.md).

You can create sandbox accounts for Link using any valid email address. The following table shows the fixed one-time passcode values that Stripe accepts for authenticating sandbox accounts:

| 値                     | 結果                   |
| --------------------- | -------------------- |
| 以下に記載されていない任意の 6 桁の数字 | 成功                   |
| 000001                | エラー: コードが無効です        |
| 000002                | エラー: コードの有効期限が切れています |
| 000003                | エラー: 最大試行回数を超えました    |

#### ウォレット

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

### Apple Pay

Stripe のテストカード情報を Apple Pay に保存することはできません。ただし、貴社がテスト [API キー](https://docs.stripe.com/keys.md)を使用すると、Stripe はそれを認識し、利用可能な成功したテストカードのトークンを返します。これにより、本番環境のカードを使用して、請求を行わずにテスト支払いを実行できます。

[登録済みドメイン](https://docs.stripe.com/payments/payment-methods/pmd-registration.md)、[サポートされているブラウザー](https://docs.stripe.com/elements/express-checkout-element.md#supported-browsers)を使用し、Apple Pay ウォレットに有効なカードが保存されていることを確認してください。または、[paymentMethods](https://docs.stripe.com/js/elements_object/create_express_checkout_element#express_checkout_element_create-options-paymentMethods) の `applePay` オプションを `always` に設定して、有効な保存済みカードの要件を削除します。

### Google Pay

Stripe のテストカード情報を Google Pay に保存することはできません。ただし、お客様がテスト API キーを使用すると、Stripe はそれを認識し、利用可能な成功したテストカードのトークンを返します。これにより、本番環境のカードを使用して、請求を行わずにテスト支払いを実行できます。また、Google Pay の[テストカードスイート](https://developers.google.com/pay/api/web/guides/resources/test-card-suite)を使用して実装をテストすることもできます。

[登録済みドメイン](https://docs.stripe.com/payments/payment-methods/pmd-registration.md)と[サポート対象のブラウザー](https://docs.stripe.com/elements/express-checkout-element.md#supported-browsers)を使用していること、有効なカードが Google Pay のウォレットに保存されていることを確認してください。または、[paymentMethods](https://docs.stripe.com/js/elements_object/create_express_checkout_element#express_checkout_element_create-options-paymentMethods) の `googlePay` オプションを `always` に設定することで、有効な保存済みカードの要件を取り除くこともできます。

### PayPal

PayPal の実装をテストするには、以下の手順を使用します。

1. [サンドボックスのテストアカウント](https://developer.paypal.com/dashboard/accounts)を作成して、サンドボックスモードであることを確認します。
1. Express Checkout Element の **PayPal** ボタンをクリックし、サンドボックスアカウントから生成されたメールアドレスとパスワードを使用してログインします。サンドボックスで個人の PayPal アカウントを使用することはできません。
1. まだ済んでいない場合は、ドメインを[登録](https://docs.stripe.com/payments/payment-methods/pmd-registration.md)します。

#### Amazon Pay

Amazon Pay のサンドボックステストアカウントを作成するには、以下を行います。

1. サンドボックスモードで Amazon Pay ボタンをクリックします。
1. **Amazon アカウントを作成**をクリックします。
1. サンドボックスアカウントを使用して、テスト用 [API キー](https://docs.stripe.com/keys.md)を使用している実装をテストします。

以下のカードを使用して、Amazon Pay サンドボックスでの支払いをシミュレーションします。

| カード                    | 結果      |
| ---------------------- | ------- |
| 末尾が 9424 のディスカバー       | 成功      |
| 末尾が 1111 の Visa        | 成功      |
| 末尾が 0701 の Visa        | 3D セキュア |
| 末尾が 0005 のアメリカン・エキスプレス | 拒否      |
| 末尾が 0000 の JCB         | 拒否      |

#### Klarna

Klarna では[ドメイン登録](https://docs.stripe.com/payments/payment-methods/pmd-registration.md)が必要です。

> Klarna はセッションの追跡に クッキーを使用します。さまざまな顧客の所在地をテストするには、前のセッションで Klarna サンドボックスからログアウトし、関連するトリガーを使用します。

下記では、現在対応している顧客の国のテストデータを特別に選択しています。サンドボックスでは、Klarna は指定されたメールアドレスに基づいて取引を承認または拒否します。

#### オーストラリア

|         | 承認                | 拒否                       |
| ------- | ----------------- | ------------------------ |
| 生年月日    | 1970/10/07        | 03-05-1994               |
| 名       | テスト               | John                     |
| 姓       | Person-au         | snow                     |
| 町名・番地   | Wharf St          | Silverwater Rd           |
| 番地等     | 4                 | 1-5                      |
| 郵便番号    | 4877              | 2128                     |
| 市区町村    | Port Douglas      | Silverwater              |
| 地域      | QLD               | NSW                      |
| 電話番号    | +61473752244      | +61473763254             |
| メールアドレス | customer@email.au | customer+denied@email.au |

#### オーストリア

|         | 承認済み               | 拒否                       |
| ------- | ------------------ | ------------------------ |
| 生年月日    | 1970/10/07         | 1970/10/07               |
| 名       | テスト                | テスト                      |
| 姓       | Person-at          | Person-at                |
| メールアドレス | customer@email.at  | customer+denied@email.at |
| 町名・番地   | Mariahilfer Straße | Mariahilfer Straße       |
| 番地      | 47                 | 47                       |
| 市区町村    | Wien               | Wien                     |
| 郵便番号    | 1060               | 1060                     |
| 電話番号    | +4306762600456     | +4306762600745           |

#### ベルギー

|         | 承認済み              | 拒否済み                     |
| ------- | ----------------- | ------------------------ |
| 生年月日    | 1970/10/07        | 1970/10/07               |
| 名       | テスト               | テスト                      |
| 姓       | Person-be         | Person-be                |
| メールアドレス | customer@email.be | customer+denied@email.be |
| 町名・番地   | Grote Markt       | Grote Markt              |
| 番地      | 1                 | 1                        |
| 市       | Brussel           | Brussel                  |
| 郵便番号    | 1000              | 1000                     |
| 電話番号    | +32485121291      | +32485212123             |

#### カナダ

|         | 承認                | 拒否                       |
| ------- | ----------------- | ------------------------ |
| 生年月日    | 1970/10/07        | 1970/10/07               |
| 名       | テスト               | テスト                      |
| 姓       | Person-ca         | Person-ca                |
| 町名・番地   | 2693 Byron Rd     | 2693 Byron Rd            |
| 郵便番号    | V7H 1L9           | V7H 1L9                  |
| 市区町村    | North Vancouver   | North Vancouver          |
| 地域      | BC                | BC                       |
| 電話番号    | +15197438620      | +15197308624             |
| メールアドレス | customer@email.ca | customer+denied@email.ca |

#### チェコ

|         | 承認                 | 拒否                       |
| ------- | ------------------ | ------------------------ |
| 生年月日    | 01-01-1970         | 27-06-1992               |
| 名       | テスト                | テスト                      |
| 姓       | Person-cz          | Person-cz                |
| メールアドレス | customer@email.cz  | customer+denied@email.cz |
| 町名・番地   | Zazvorkova 1480/11 | Zázvorkova 1480/11       |
| 郵便番号    | 155 00             | 155 00                   |
| 市区町村    | Praha              | PRAHA 13                 |
| 電話番号    | +420771613715      | +420771623691            |

#### デンマーク

|         | 承認済み              | 拒否                       |
| ------- | ----------------- | ------------------------ |
| 生年月日    | 01-01-1980        | 1970/10/07               |
| 名       | テスト               | テスト                      |
| 姓       | Person-dk         | Person-dk                |
| メールアドレス | customer@email.dk | customer+denied@email.dk |
| 町名・番地   | Dantes Plads      | Nygårdsvej               |
| 番地      | 7                 | 65                       |
| 市区町村    | København Ø       | København Ø              |
| 郵便番号    | 1556              | 2100                     |
| 電話番号    | +4542555628       | +4552555348              |

#### フィンランド

|         | 承認済み              | 拒否                       |
| ------- | ----------------- | ------------------------ |
| 生年月日    | 01-01-1999        | 01-01-1999               |
| 名       | テスト               | Person FI                |
| 姓       | Person-fi         | テスト                      |
| メールアドレス | customer@email.fi | customer+denied@email.fi |
| 町名・番地   | Mannerheimintie   | Mannerheimintie          |
| 番地      | 34                | 34                       |
| 市区町村    | Helsinki          | Helsinki                 |
| 郵便番号    | 00100             | 00100                    |
| 電話番号    | +358401234567     | +358401234568            |

#### フランス

|         | 承認済み              | 拒否                       |
| ------- | ----------------- | ------------------------ |
| 生年月日    | 10-07-1990        | 10-07-1990               |
| 出生地     | パリ                | パリ                       |
| 名       | テスト               | テスト                      |
| 姓       | Person-fr         | Person-fr                |
| メールアドレス | customer@email.fr | customer+denied@email.fr |
| 町名・番地   | rue La Fayette    | rue La Fayette           |
| 番地      | 33                | 33                       |
| 市区町村    | パリ                | パリ                       |
| 郵便番号    | 75009             | 75009                    |
| 電話番号    | +33689854321      | +33687984322             |

#### ドイツ

|         | 承認済み                  | 拒否済み                     |
| ------- | --------------------- | ------------------------ |
| 生年月日    | 1970/10/07            | 1970/10/07               |
| 名       | 模擬                    | テスト                      |
| 姓       | 模擬                    | Person-de                |
| メールアドレス | customer@email.de     | customer+denied@email.de |
| 町名・番地   | Neue Schönhauser Str. | Neue Schönhauser Str.    |
| 番地      | 2                     | 2                        |
| 市       | Berlin                | Berlin                   |
| 郵便番号    | 10178                 | 10178                    |
| 電話番号    | +49017614284340       | +49017610927312          |

#### ギリシャ

|         | 承認                | 拒否                       |
| ------- | ----------------- | ------------------------ |
| 納税者番号   | 090000045         | 090000045                |
| 生年月日    | 01-01-1960        | 11-11-1970               |
| 名       | テスト               | テスト                      |
| 姓       | Person-gr         | Test-gr                  |
| メールアドレス | customer@email.gr | customer+denied@email.gr |
| 町名・番地   | Kephisias         | Baralo                   |
| 番地      | 37                | 56                       |
| 郵便番号    | 151 23            | 123 67                   |
| 市区町村    | Athina            | Athina                   |
| 電話番号    | +306945553624     | +306945553625            |

#### アイルランド

|          | 承認済み              | 拒否                       |
| -------- | ----------------- | ------------------------ |
| 生年月日     | 1970/10/07        | 1970/10/07               |
| 名        | テスト               | テスト                      |
| 姓        | Person-ie         | Person-ie                |
| メール      | customer@email.ie | customer+denied@email.ie |
| 町名・番地    | King Street South | King Street South        |
| 番地       | 30                | 30                       |
| 市区町村     | ダブリン              | ダブリン                     |
| EIR Code | D02 C838          | D02 C838                 |
| 電話番号     | +353855351400     | +353855351401            |

#### イタリア

|         | 承認済み              | 拒否                       |
| ------- | ----------------- | ------------------------ |
| 生年月日    | 01-01-1980        | 01-01-1980               |
| 名       | テスト               | テスト                      |
| 姓       | Person-it         | Person-it                |
| メールアドレス | customer@email.it | customer+denied@email.it |
| 納税番号    | RSSBNC80A41H501B  | RSSBNC80A41H501B         |
| 町名・番地   | Via Enrico Fermi  | Via Enrico Fermi         |
| 番地      | 150               | 150                      |
| 市区町村    | Roma              | Roma                     |
| 郵便番号    | 00146             | 00146                    |
| 電話番号    | +393339741231     | +393312232389            |

#### オランダ

|         | 承認済み              | 拒否                       |
| ------- | ----------------- | ------------------------ |
| 生年月日    | 1970/10/07        | 1970/10/07               |
| 名       | テスト               | テスト                      |
| 姓       | Person-nl         | Person-nl                |
| メールアドレス | customer@email.nl | customer+denied@email.nl |
| 町名・番地   | Osdorpplein       | Osdorpplein              |
| 番地      | 137               | 137                      |
| 市区町村    | Amsterdam         | Amsterdam                |
| 郵便番号    | 1068 SR           | 1068 SR                  |
| 電話番号    | +31689124321      | +31632167678             |

#### ニュージーランド

|         | 承認                       | 拒否                       |
| ------- | ------------------------ | ------------------------ |
| 生年月日    | 1970/10/07               | 1970/10/07               |
| 名       | テスト                      | テスト                      |
| 姓       | Person-nz                | Person-nz                |
| 町名・番地   | Mount Wellington Highway | Mount Wellington Highway |
| 番地等     | 286                      | 286                      |
| 郵便番号    | 6011                     | 6011                     |
| 市区町村    | Auckland                 | Wellington               |
| 電話番号    | +6427555290              | +642993007712            |
| メールアドレス | customer@email.nz        | customer+denied@email.nz |

#### ノルウェー

|         | 承認済み                | 拒否                       |
| ------- | ------------------- | ------------------------ |
| 生年月日    | 01-08-1970          | 01-08-1970               |
| 名       | Jane                | テスト                      |
| 姓       | テスト                 | Person-no                |
| メールアドレス | customer@email.no   | customer+denied@email.no |
| 個人番号    | NO1087000571        | NO1087000148             |
| 町名・番地   | Edvard Munchs Plass | Sæffleberggate           |
| 番地      | 1                   | 56                       |
| 市区町村    | Oslo                | Oslo                     |
| 郵便番号    | 0194                | 0563                     |
| 電話番号    | +4740123456         | +4740123457              |

#### ポーランド

|         | 承認                | 拒否                       |
| ------- | ----------------- | ------------------------ |
| 生年月日    | 05-05-1967        | 05-05-1967               |
| 名       | テスト               | テスト                      |
| 姓       | Person-pl         | Person-pl                |
| 町名・番地   | Ul. Górczewska    | Ul. Górczewska           |
| 番地等     | 124               | 124                      |
| 郵便番号    | 01-460            | 01-460                   |
| 市区町村    | Warszawa          | Warszawa                 |
| 電話番号    | +48795222223      | +48795223325             |
| メールアドレス | customer@email.pl | customer+denied@email.pl |

#### ポルトガル

|         | 承認                  | 拒否                       |
| ------- | ------------------- | ------------------------ |
| 生年月日    | 1970/10/07          | 1970/10/07               |
| 名       | テスト                 | テスト                      |
| 姓       | Person-pt           | Person-pt                |
| 町名・番地   | Avenida Dom João II | Avenida Dom João II      |
| 番地等     | 40                  | 40                       |
| 郵便番号    | 1990-094            | 1990-094                 |
| 市区町村    | Lisboa              | Lisboa                   |
| 電話番号    | +351935556731       | +351915593837            |
| メールアドレス | customer@email.pt   | customer+denied@email.pt |

#### ルーマニア

|              | 承認されました           | 拒否                       |
| ------------ | ----------------- | ------------------------ |
| 生年月日         | 1970 年 12 月 25 日  | 1970 年 12 月 25 日         |
| 名            | テスト               | テスト                      |
| 姓            | Person-ro         | Person-ro                |
| メール          | customer@email.ro | customer+denied@email.ro |
| 町名・番地        | Drumul Taberei    | Drumul Taberei           |
| 番地           | 35                | 35                       |
| 市区町村         | București         | București                |
| セクター         | Sectorul 6        | Sectorul 6               |
| 郵便番号         | 061357            | 061357                   |
| 電話           | +40741209876      | +40707127444             |
| 個人識別番号 (CNP) | 1701225193558     |                          |

#### スペイン

|         | 承認済み              | 拒否                       |
| ------- | ----------------- | ------------------------ |
| DNI/NIE | 99999999R         | 99999999R                |
| 生年月日    | 1970/10/07        | 1970/10/07               |
| 名       | テスト               | テスト                      |
| 姓       | Person-es         | Person-es                |
| メールアドレス | customer@email.es | customer+denied@email.es |
| 町名・番地   | C. de Atocha      | C. de Atocha             |
| 番地      | 27                | 27                       |
| 市区町村    | Madrid            | Madrid                   |
| 郵便番号    | 28012             | 28012                    |
| 電話番号    | +34672563009      | +34682425101             |

#### スウェーデン

|         | 承認済み                    | 拒否                       |
| ------- | ----------------------- | ------------------------ |
| 生年月日    | 21-03-1941              | 28-10-1941               |
| 名       | Alice                   | テスト                      |
| 姓       | テスト                     | Person-se                |
| メールアドレス | customer@email.se       | customer+denied@email.se |
| 町名・番地   | Södra Blasieholmshamnen | Karlaplan                |
| 番地      | 2                       | 3                        |
| 市区町村    | Stockholm               | Stockholm                |
| 郵便番号    | 11 148                  | 11 460                   |
| 電話番号    | +46701740615            | +46701740620             |

#### スイス

|         | 承認                | 拒否                       |
| ------- | ----------------- | ------------------------ |
| 生年月日    | 01-01-1990        | 01-01-2000               |
| 名       | 受付済み              | 顧客                       |
| 姓       | Person-ch         | Person-ch                |
| 町名・番地   | Augustinergasse   | Bahnhofstrasse           |
| 番地等     | 2                 | 77                       |
| 郵便番号    | 4051              | 8001                     |
| 市区町村    | Basel             | Zürich                   |
| 電話番号    | +41758680000      | +41758680001             |
| メールアドレス | customer@email.ch | customer+denied@email.ch |

#### イギリス

|         | 承認済み                  | 拒否                       |
| ------- | --------------------- | ------------------------ |
| 生年月日    | 1970/10/07            | 1970/10/07               |
| 名       | テスト                   | テスト                      |
| 姓       | Person-uk             | Person-uk                |
| メールアドレス | customer@email.uk     | customer+denied@email.uk |
| 町名・番地   | New Burlington Street | New Burlington Street    |
| 番地      | 10                    | 10                       |
| アパート    | Apt 214               | Apt 214                  |
| 郵便番号    | W1S 3BE               | W1S 3BE                  |
| 市区町村    | London                | London                   |
| 電話番号    | +447755564318         | +447355505530            |

#### アメリカ

|         | 承認済み              | 拒否                       |
| ------- | ----------------- | ------------------------ |
| 生年月日    | 07-10-1970        | 07-10-1970               |
| 名       | テスト               | テスト                      |
| 姓       | Person-us         | Person-us                |
| メールアドレス | customer@email.us | customer+denied@email.us |
| 町名・番地   | Amsterdam Ave     | Amsterdam Ave            |
| 番地      | 509               | 509                      |
| 市区町村    | New York          | New York                 |
| 州       | New York          | New York                 |
| 郵便番号    | 10024-3941        | 10024-3941               |
| 電話番号    | +13106683312      | +13106354386             |

### 2 段階認証

6 桁の数字であれば、2 段階認証コードとして有効です。`999999` を使用すると、認証は失敗します。

### 返済方法

Klarna のフロー内では、以下のテスト値を使用し、さまざまな返済方法を試すことができます。

| タイプ      | 値                                                          |
| -------- | ---------------------------------------------------------- |
| 口座引き落とし  | DE11520513735120710131                                     |
| 銀行振込     | デモの銀行                                                      |
| クレジットカード | - 番号: 4111 1111 1111 1111
  - CVV: 123
  - 有効期限: 任意の将来日付   |
| デビットカード  | - カード番号:4012 8888 8888 1881
  - CVV: 123
  - 有効期限: 任意の将来日付 |

## Optional: Stripe Connect で Express Checkout Element を使用する

連結アカウントの `Customer` に対してダイレクト支払いの作成や、トークンの追加を行う *Connect* (Connect is Stripe's solution for multi-party businesses, such as marketplace or software platforms, to route payments between sellers, customers, and other recipients) プラットフォームでは、追加のステップを実行する必要があります。

> #### Customers v1 と Accounts v2 のリファレンスを比較する
> 
> Connect プラットフォームが [customer-configured Accounts](https://docs.stripe.com/api/v2/core/accounts/create.md#v2_create_accounts-configuration-customer) を使用している場合は、Stripe の [ガイド](https://docs.stripe.com/connect/use-accounts-as-customers.md)をご確認の上、コード内の `Customer` およびイベント参照を同等の Accounts v2 API リファレンスに置き換えてください。

1. フロントエンドで、`ExpressCheckoutElement` を作成する前に、Stripe インスタンスで `stripeAccount` オプションを設定します。

   ```javascript
   const stripe = Stripe('<<YOUR_PUBLISHABLE_KEY>>', {
     apiVersion: "2026-02-25.clover",
     stripeAccount: '{{CONNECTED_ACCOUNT_ID}}',
   });
   ```

1. Express Checkout Element を表示する予定の[すべてのドメインを登録](https://docs.stripe.com/payments/payment-methods/pmd-registration.md?dashboard-or-api=api#register-your-domain-while-using-connect)します。

## 顧客に 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/accept-a-payment-deferred.md)
- [サーバーで支払いを確定する](https://docs.stripe.com/payments/finalize-payments-on-the-server.md)