# React Stripe.js リファレンス

Stripe.js および Stripe Elements の React コンポーネントについてご紹介します。

# 埋め込みコンポーネント

> This is a 埋め込みコンポーネント for when ui is embedded-components. View the full page at https://docs.stripe.com/sdks/stripejs-react?ui=embedded-components.

React Stripe.js がどのように機能するか、または開発に協力したいですか？[GitHub のプロジェクト](https://github.com/stripe/react-stripe-js)をチェックしてください。また、[Releases tab](https://github.com/stripe/react-stripe-js/releases) で変更ログを表示することもできます。

React Stripe.js は、[Stripe Elements](https://docs.stripe.com/payments/elements.md) を囲むシンラッパーです。これにより、あらゆる React アプリに Elements を追加できるようになります。

[Stripe.js リファレンス](https://docs.stripe.com/js/custom_checkout/create_payment_element)では、Elements のカスタマイズの詳細がすべて記載されています。

Elements を任意の Stripe プロダクトとともに使用することで、オンライン支払いを回収できます。お客様のビジネスに適した導入パスについては、[Stripe のドキュメント](https://docs.stripe.com/.md)をご覧ください。

> このリファレンスでは、すべての React Stripe.js API について説明しています。実践しながら学ぶことを希望される場合は、[決済の受け付け](https://docs.stripe.com/payments/accept-a-payment.md?platform=web) に関するドキュメントを確認するか、[サンプル導入](https://docs.stripe.com/payments/quickstart-checkout-sessions.md) を参照してください。

## Before you begin

このドキュメントは、[React](https://reactjs.org/) の基本的な実務知識があり、React プロジェクトがすでに設定されていることを前提としています。React を初めて使用する場合は、続行する前に[「使用を開始する」](https://react.dev/learn)ガイドを確認することをお勧めします。

## 設定

#### npm

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

#### yarn

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

```bash
yarn add @stripe/react-stripe-js @stripe/stripe-js
```

#### umd

Stripe は npm やモジュールを使用しないサイト向けに UMD ビルドも提供しています。

グローバルな `Stripe` 機能をエクスポートする Stripe.js スクリプトと、グローバルな `ReactStripe` オブジェクトをエクスポートする React Stripe.js の UMD ビルドを含めてください。常に **js.stripe.com** から Stripe.js スクリプトを直接読み込むことにより、PCI への準拠が維持されます。スクリプトをバンドルに含めたり、そのコピーを自身でホストすることがないようにしてください。

```html
<!-- Stripe.js -->
<script src="https://js.stripe.com/clover/stripe.js"></script>

<!-- React Stripe.js development build -->
<script src="https://unpkg.com/@stripe/react-stripe-js@latest/dist/react-stripe.umd.js"></script>

<!-- When you are ready to deploy your site to production, remove the
     above development script, and include the following production build. -->
<script src="https://unpkg.com/@stripe/react-stripe-js@latest/dist/react-stripe.umd.min.js"></script>
```

## 決済プロバイダー

`CheckoutProvider` プロバイダーにより、[Element コンポーネント](https://docs.stripe.com/sdks/stripejs-react.md#element-components)の使用が可能になり、ネストされたあらゆるコンポーネント内の [Stripe オブジェクト](https://docs.stripe.com/js/initializing)にアクセスできるようになります。React アプリのルートに `CheckoutProvider` プロバイダーをレンダリングし、必要な場所でいつでも使用できるようにします。

`CheckoutProvider` を使用するには、公開可能キーを使用して `@stripe/stripe-js` から [loadStripe](https://github.com/stripe/stripe-js/blob/master/README.md#loadstripe) を呼び出します。`loadStripe` 関数は、Stripe.js スクリプトを非同期で読み込み、Stripe オブジェクトを初期化します。返された `Promise` を `CheckoutProvider` に渡します。

エンドポイントの見え方の例は [Checkout Session の作成](https://docs.stripe.com/payments/accept-a-payment.md?payment-ui=elements&api-integration=checkout#create-checkout-session)をご覧ください。

```jsx

import {CheckoutProvider} from '@stripe/react-stripe-js/checkout';
import {loadStripe} from '@stripe/stripe-js';

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

export default function App() {
  const promise = useMemo(() => {
    return fetch('/create-checkout-session', {
      method: 'POST',
    })
      .then((res) => res.json())
      .then((data) => data.clientSecret);
  }, []);

  return (
    <CheckoutProvider stripe={stripePromise} options={{clientSecret: promise}}>
      <CheckoutForm />
    </CheckoutProvider>
  );
}
```

| プロパティ     | 説明                                                                                                                                                                                                                                                                                                                                                                                                   |
| --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `stripe`  | (required) `Stripe | null | Promise<Stripe | null>`

  [Stripe オブジェクト](https://docs.stripe.com/js/initializing) または Stripe オブジェクトに解決される `Promise`。Stripe オブジェクトの初期化には、[Stripe.js ラッパーモジュール](https://github.com/stripe/stripe-js/blob/master/README.md#readme)を使用することをお勧めします。このプロパティは、一度設定すると変更できません。

  サーバ側の初回のレンダリングを実行している場合や、静的なサイトを生成している場合には、`null` または `null` に解決する `Promise` を渡すこともできます。     |
| `options` | (required) `Object`

  CheckoutProvider 設定オプション。利用可能なオプションは[こちら](https://docs.stripe.com/js/react_stripe_js/checkout/checkout_provider#react_checkout_provider-options)をご覧ください。作成された Checkout Session の `clientSecret` を指定する必要があります。例については、[Checkout Session の作成](https://docs.stripe.com/payments/accept-a-payment.md?payment-ui=elements&api-integration=checkout#create-checkout-session)をご覧ください。 |

## Element コンポーネント

Element コンポーネントを使用すると、React アプリで支払い情報を安全に収集し、決済ページの任意の場所に Elements を配置できます。外観をカスタマイズすることもできます。

個々の Element コンポーネントを `CheckoutProvider` ツリー内にマウントできます。1 つの `<CheckoutProvider>` には、各タイプの Element を 1 つだけマウントできます。

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

const CheckoutForm = () => {
  return (
    <form>
      <PaymentElement />
      <button>Submit</button>
    </form>
  );
};

export default CheckoutForm;
```

| プロパティ           | 説明                                                                                                                                                                                                                                                                                                                                                            |
| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `options`       | (optional) `Object`

  Element 構成オプションを含むオブジェクト。Payment Element の[使用可能なオプションをご覧ください](https://docs.stripe.com/js/custom_checkout/create_payment_element)。                                                                                                                                                                                                      |
| `onBlur`        | (optional) `() => void`

  Element がフォーカスを失うとトリガーされます。                                                                                                                                                                                                                                                                                                        |
| `onChange`      | (optional) `(event: Object) => void`

  この Element によって公開されるデータが変更されたときにトリガーされます。

  詳細については、[Stripe.js リファレンス](https://docs.stripe.com/js/element/events/on_change?type=paymentElement#element_on_change-handler)をご覧ください。                                                                                                                                    |
| `onEscape`      | (optional) `(event: Object) => void`

  Element 内でエスケープキーが押されるとトリガーされます。

  詳細については、[Stripe.js リファレンス](https://docs.stripe.com/js/element/events/on_escape)をご覧ください。                                                                                                                                                                                           |
| `onFocus`       | (optional) `() => void`

  Element がフォーカスを受けるとトリガーされます。                                                                                                                                                                                                                                                                                                       |
| `onLoaderror`   | (optional) `(event: Object) => void`

  Element の読み込みが失敗したときにトリガーされます。

  詳細については、[Stripe.js リファレンス](https://docs.stripe.com/js/element/events/on_loaderror)をご覧ください。                                                                                                                                                                                          |
| `onLoaderStart` | (optional) `(event: Object) => void`

  [loader](https://docs.stripe.com/js/custom_checkout/init#custom_checkout_init-options-elementsOptions-loader) UI が DOM にマウントされ、表示する準備が整ったときにトリガーされます。

  これらのイベントは、`payment` Elements と `address` Elements からのみ受信します。

  詳細については、[Stripe.js リファレンス](https://docs.stripe.com/js/element/events/on_loaderstart)をご覧ください。 |
| `onReady`       | (optional) `(element: Element) => void`

  Element が完全にレンダリングされ、必須の `element.focus()` 呼び出しを受け付けられるようになるとトリガーされます。基盤となる Element インスタンスへの参照を使用して呼び出されます。                                                                                                                                                                                                        |

### 使用可能な Element コンポーネント

決済ページの情報を収集するために、数種類の Elements を使用できます。使用可能な Elements は次のとおりです。

| コンポーネント                         | 用途                                                                                                                                                                                                                                                  |
| ------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `BillingAddressElement`         | 236 を超える地域形式の Billing 住所の詳細を収集します。詳細については、[Address Element](https://docs.stripe.com/payments/advanced/collect-addresses.md?payment-ui=embedded-components) のドキュメントを参照してください。                                                                        |
| `CurrencySelectorElement`       | Adaptive Pricing で決済に使用する通貨を顧客が選択できます。詳細については、[Currency Selector Element](https://docs.stripe.com/elements/currency-selector-element.md) のドキュメントを参照してください。                                                                                          |
| `ExpressCheckoutElement`        | Apple Pay、Google Pay、Link、PayPal など、1 つまたは複数の決済ボタンでカードまたはウォレットによる決済を受け付けることができます。詳細については、[Express Checkout Element](https://docs.stripe.com/elements/express-checkout-element/accept-a-payment.md?payment-ui=embedded-components) のドキュメントを参照してください。 |
| `PaymentElement`                | 世界中の [25 以上の決済手段](https://docs.stripe.com/payments/payment-methods/integration-options.md) の支払い詳細を収集します。詳細については、[Payment Element](https://docs.stripe.com/payments/quickstart-checkout-sessions.md) のドキュメントを参照してください。                               |
| `PaymentMethodMessagingElement` | 利用可能な後払いプランを顧客に表示します。詳細については、[Payment Method Messaging Element](https://docs.stripe.com/elements/payment-method-messaging.md) のドキュメントを参照してください。                                                                                                     |
| `ShippingAddressElement`        | 236 を超える地域形式の配送先住所の詳細を収集します。詳細については、[Address Element](https://docs.stripe.com/payments/advanced/collect-addresses.md?payment-ui=embedded-components) のドキュメントを参照してください。                                                                              |
| `TaxIdElement`                  | ビジネス名や納税者番号など、顧客から納税者識別情報を収集します。詳細については、[Tax ID Element](https://docs.stripe.com/elements/tax-id-element.md) のドキュメントを参照してください。                                                                                                                      |

## useCheckout hook

#### `useCheckout(): CheckoutValue`

コンポーネントで [useCheckout](https://docs.stripe.com/js/react_stripe_js/checkout/use_checkout) フックを使用して、Checkout Session のデータを含む `Checkout` オブジェクトと、セッションを更新および確定するメソッドを取得します。

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

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

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

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

    // checkoutState.type === 'success'
    const {checkout} = checkoutState;const result = await checkout.confirm();

    if (result.type === 'error') {
      // Show error to your customer (for example, payment details incomplete)
      console.log(result.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>Submit</button>
    </form>
  )
};

export default CheckoutForm;
```

## カスタマイズとスタイリング

iframe の使用により、Element のスタイリングの難易度は高くなりますが、支払いデータを安全に処理する負担を Stripe に任せられるだけでなく、お客様のサイトの[業界規制へのコンプライアンス](https://docs.stripe.com/security/guide.md#validating-pci-compliance)も維持することができます。

各Elementsは `iframe` にマウントされるため、Elements はおそらく、既存のスタイリングおよびコンポーネントフレームワークでは機能しません。それにもかかわらず、サイトのデザインに合わせて Elements を設定することはできます。Elements をカスタマイズするには、[イベントに応答し](https://docs.stripe.com/js/element/events)、[外観オプション](https://docs.stripe.com/elements/appearance-api.md) を使用してElements を設定します。各 Element のレイアウトは一貫性を保ちますが、色、フォント、境界線、パディングなどを変更できます。

## 次のステップ

React Stripe.js および Elements との連携を Checkout Sessions API で構築します。

- [決済を受け入れる](https://docs.stripe.com/payments/quickstart-checkout-sessions.md)
- [Express Checkout Element を追加する](https://docs.stripe.com/elements/express-checkout-element/accept-a-payment.md?payment-ui=embedded-components)
- [Elements Appearance API](https://docs.stripe.com/payments/checkout/customization/appearance.md?payment-ui=embedded-components)
- [Stripe.js リファレンス](https://docs.stripe.com/js/custom_checkout)


# 高度な実装

> This is a 高度な実装 for when ui is elements. View the full page at https://docs.stripe.com/sdks/stripejs-react?ui=elements.

React Stripe.js がどのように機能するかを確認したい場合、または開発を支援したい場合は、[GitHub のプロジェクト](https://github.com/stripe/react-stripe-js)をチェックしてください。また、[Releases tab](https://github.com/stripe/react-stripe-js/releases) で変更ログを表示することもできます。

React Stripe.js は、[Stripe Elements](https://docs.stripe.com/payments/elements.md) を囲むシンラッパーです。これにより、あらゆる React アプリに Elements を追加できるようになります。

[Stripe.js リファレンス](https://docs.stripe.com/js/elements_object/create_payment_element#payment_element_create-options)には、Elements のカスタマイズの詳細がすべて記載されています。

Elements を任意の Stripe 製品とともに使用することで、オンライン支払いを回収できます。お客様のビジネスに適した導入パスについては、[ドキュメントをご覧ください](https://docs.stripe.com/.md)。

> このリファレンスでは、React Stripe.js API のすべてについて説明しています。実践しながら学ぶことを希望される場合は、[支払いの受け付け](https://docs.stripe.com/payments/accept-a-payment.md?platform=web)に関するドキュメント、または[サンプル実装](https://docs.stripe.com/payments/quickstart.md)をご覧ください。

## Before you begin

このガイドは、[React](https://reactjs.org/) の基本的な実践知識を持っていること、そして React プロジェクトがすでに設定されていることを前提としています。React を初めて使用する場合は、続行する前に React の[スタートガイド](https://react.dev/learn)をお読みになることをお勧めします。

## 設定

#### npm

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

#### yarn

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

```bash
yarn add @stripe/react-stripe-js @stripe/stripe-js
```

#### umd

Stripe は npm やモジュールを使用しないサイト向けに UMD ビルドも提供しています。

グローバルな `Stripe` 機能をエクスポートする Stripe.js スクリプトと、グローバルな `ReactStripe` オブジェクトをエクスポートする React Stripe.js の UMD ビルドを含めてください。常に **js.stripe.com** から Stripe.js スクリプトを直接読み込むことにより、PCI への準拠が維持されます。スクリプトをバンドルに含めたり、そのコピーを自身でホストすることがないようにしてください。

```html
<!-- Stripe.js -->
<script src="https://js.stripe.com/clover/stripe.js"></script>

<!-- React Stripe.js development build -->
<script src="https://unpkg.com/@stripe/react-stripe-js@latest/dist/react-stripe.umd.js"></script>

<!-- When you are ready to deploy your site to production, remove the
     above development script, and include the following production build. -->
<script src="https://unpkg.com/@stripe/react-stripe-js@latest/dist/react-stripe.umd.min.js"></script>
```

## Elements プロバイダ

`Elements` Provider により、[Element コンポーネント](https://docs.stripe.com/sdks/stripejs-react.md#element-components)の使用が可能になり、ネストされたあらゆるコンポーネント内の [Stripe オブジェクト](https://docs.stripe.com/js/initializing)にアクセスできるようになります。React アプリのルートに `Elements` Provider をレンダリングし、必要な場所でいつでも使用できるようにします。

`Elements` プロバイダを使用するには、公開可能なキーを使用し、`@stripe/stripe-js` から [loadStripe](https://github.com/stripe/stripe-js/blob/master/README.md#loadstripe) を呼び出します。`loadStripe` 関数は、Stripe.js スクリプトを非同期で読み込み、Stripe オブジェクトを初期化します。返された `Promise` を `Elements` に渡します。

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

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

export default function App() {
  const options = {
    // passing the client secret obtained from the server
    clientSecret: '{{CLIENT_SECRET}}',
  };

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

| プロパティ     | 説明                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
| --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `stripe`  | (required) `Stripe | null | Promise<Stripe | null>`

  [Stripe オブジェクト](https://docs.stripe.com/js/initializing)または Stripe オブジェクトに解決する `Promise`。Stripe オブジェクトを初期化する最も簡単な方法は、[Stripe.js ラッパーモジュール](https://github.com/stripe/stripe-js/blob/master/README.md#readme)を使用することです。このプロパティの設定後は、変更することはできません。

  サーバ側の初回のレンダリングを実行している場合や、静的なサイトを生成している場合には、`null` または `null` に解決する `Promise` を渡すこともできます。                                                                                                                   |
| `options` | (optional) `Object`

  オプションの Elements 構成オプション。[使用可能なオプションをご覧ください](https://docs.stripe.com/js/elements_object/create#stripe_elements-options)。Payment Elements を作成するには、[Intent の作成前にエレメントをレンダリング](https://docs.stripe.com/payments/accept-a-payment-deferred.md?platform=web)する場合を除き、Intent の `clientSecret` を含める必要があります。

  プロパティーは変更不可能であるため、`options` を設定した後は変更できません。ただし、[elements.update](https://docs.stripe.com/js/elements_object/update#elements_update-options-appearance) メソッドを呼び出すことにより、エレメントのデザインを変更できます。 |

## Element コンポーネント

Element コンポーネントは、React アプリで安全に支払い情報を収集するための柔軟な方法を提供します。

個々の Element コンポーネントを `Elements` ツリー内にマウントできます。1 つの `<Elements>` グループには、Element のタイプごとに 1 つだけコンポーネントをマウントできます。

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

const CheckoutForm = () => {
  return (
    <form>
      <PaymentElement />
      <button>Submit</button>
    </form>
  );
};

export default CheckoutForm;
```

| プロパティ           | 説明                                                                                                                                                                                                                                                                                                                                           |
| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `id`            | (optional) `string`

  [Element のコンテナー](https://docs.stripe.com/js/element/the_element_container)に渡されます。                                                                                                                                                                                                                                     |
| `className`     | (optional) `string`

  [Element のコンテナー](https://docs.stripe.com/js/element/the_element_container)に渡されます。                                                                                                                                                                                                                                     |
| `options`       | (optional) `Object`

  Element 設定オプションを含むオブジェクトです。Payment Element の [オプションを参照](https://docs.stripe.com/js/elements_object/create_payment_element#payment_element_create-options) してください。                                                                                                                                                     |
| `onBlur`        | (optional) `() => void`

  Element がフォーカスを失うとトリガーされます。                                                                                                                                                                                                                                                                                       |
| `onChange`      | (optional) `(event: Object) => void`

  この Element によって公開されたデータに変更があるとトリガーされます (エラーがある場合など)。

  詳細については、[Stripe.js リファレンス](https://docs.stripe.com/js/element/events/on_change?type=paymentElement#element_on_change-handler)をご覧ください。                                                                                                        |
| `onClick`       | (optional) `(event: Object) => void`

  `<ExpressCheckoutElement>`がクリックされるとトリガーされます。

  詳細については、[Stripe.js リファレンス](https://docs.stripe.com/js/element/events/on_click#element_on_click-handler)をご覧ください。                                                                                                                                      |
| `onEscape`      | (optional) `(event: Object) => void`

  Element 内でエスケープキーが押されるとトリガーされます。

  詳細については、[Stripe.js リファレンス](https://docs.stripe.com/js/element/events/on_escape)をご覧ください。                                                                                                                                                                          |
| `onFocus`       | (optional) `() => void`

  Element がフォーカスを受けるとトリガーされます。                                                                                                                                                                                                                                                                                      |
| `onLoaderror`   | (optional) `(event: Object) => void`

  Element の読み込みが失敗したときにトリガーされます。

  これらのイベントは、`payment`、`linkAuthentication`、`address`、`expressCheckout` の各要素からのみ受信します。

  詳細については、[Stripe.js リファレンス](https://docs.stripe.com/js/element/events/on_loaderror)をご覧ください。                                                                                  |
| `onLoaderStart` | (optional) `(event: Object) => void`

  [ローダー](https://docs.stripe.com/js/elements_object/create#stripe_elements-options-loader) UI が DOM にマウントされ、表示できるようになると、トリガーされます。

  これらのイベントは、`payment`、`linkAuthentication`、`address` の各要素からのみ受信します。

  詳細については、[Stripe.js リファレンス](https://docs.stripe.com/js/element/events/on_loaderstart)をご覧ください。 |
| `onReady`       | (optional) `(element: Element) => void`

  Element が完全にレンダリングされ、必須の `element.focus()` 呼び出しを受け付けられるようになるとトリガーされます。基盤となる Element インスタンスへの参照を使用して呼び出されます。                                                                                                                                                                                       |

### 使用可能な Element コンポーネント

支払い情報を収集するために便利な、さまざまな種類の Elements があります。以下は現時点で使用できる Elements です。

| コンポーネント                         | 用途                                                                                                                                                                                                                                                                  |
| ------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `AddressElement`                | 236 以上の地域フォーマットの住所の詳細を収集します。詳細については、[Address Element](https://docs.stripe.com/payments/advanced/collect-addresses.md?platform=web&client=react) のドキュメントを参照してください。                                                                                                   |
| `ExpressCheckoutElement`        | Apple Pay、Google Pay、Link、PayPal など、1 つまたは複数の決済ボタンでカードまたはウォレットによる決済を受け付けることができます。詳細については、[Express Checkout Element](https://docs.stripe.com/elements/express-checkout-element.md) のドキュメントを参照してください。                                                                 |
| `LinkAuthenticationElement`     | メールアドレスを収集し、ユーザーがリンクにログインできるようにします。詳細については、[リンクAuthentication Element](https://docs.stripe.com/payments/elements/link-authentication-element.md) のドキュメントを参照してください。                                                                                                  |
| `PaymentElement`                | 世界中の [25 以上の決済手段](https://docs.stripe.com/payments/payment-methods/integration-options.md) の支払い詳細を収集します。詳細については、[Payment Element](https://docs.stripe.com/payments/accept-a-payment.md?payment-ui=elements&api-integration=checkout&client=react) のドキュメントを参照してください。 |
| `PaymentMethodMessagingElement` | 利用可能な後払いプランを顧客に表示します。詳細については、[Payment Method Messaging Element](https://docs.stripe.com/elements/payment-method-messaging.md) のドキュメントを参照してください。                                                                                                                     |
| `TaxIdElement`                  | ビジネス名や納税者番号など、顧客から納税者識別情報を収集します。詳細については、[Tax ID Element](https://docs.stripe.com/elements/tax-id-element.md) のドキュメントを参照してください。                                                                                                                                      |

## useElements フック

#### `useElements(): Elements | null`

Payment Element によって収集された支払い情報を安全に Stripe API に渡すには、`Elements` インスタンスにアクセスし、それを [stripe.confirmPayment](https://docs.stripe.com/js/payment_intents/confirm_payment) とともに使用できるようにします。[React Hooks API](https://react.dev/reference/react) を使用する場合は、マウントされた Element へのアクセスに `useElements` を使用することをお勧めします。クラスコンポーネントから Element にアクセスする必要がある場合は、代わりに [ElementsConsumer](https://docs.stripe.com/sdks/stripejs-react.md#elements-consumer) を使用します。

> `Promise` を [Elements プロバイダー](https://docs.stripe.com/sdks/stripejs-react.md#elements-provider)に渡しても、`Promise` が解決されない場合、`useElements` は `null` を返します。

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

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

  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 result = await stripe.confirmPayment({//`Elements` instance that was used to create the Payment Element
      elements,
      confirmParams: {
        return_url: "https://example.com/order/123/complete",
      },
    });

    if (result.error) {
      // Show error to your customer (for example, payment details incomplete)
      console.log(result.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>
    </form>
  )
};

export default CheckoutForm;
```

## useStripe フック

#### `useStripe(): Stripe | null`

`useStripe` [フック](https://react.dev/reference/react)は、[Elements](https://docs.stripe.com/sdks/stripejs-react.md#elements-provider) プロバイダーに渡された [Stripe](https://docs.stripe.com/js/initializing) インスタンスへの参照を返します。クラスコンポーネントから Stripe オブジェクトにアクセスする必要がある場合には、代わりに [ElementsConsumer](https://docs.stripe.com/sdks/stripejs-react.md#elements-consumer) を使用します。

> `Promise` を [Elements プロバイダー](https://docs.stripe.com/sdks/stripejs-react.md#elements-provider)に渡しても、`Promise` が解決されない場合、`useStripe` は `null` を返します。

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

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

  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 result = await stripe.confirmPayment({
      //`Elements` instance that was used to create the Payment Element
      elements,
      confirmParams: {
        return_url: "https://example.com/order/123/complete",
      },
    });


    if (result.error) {
      // Show error to your customer (for example, payment details incomplete)
      console.log(result.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>
    </form>
  )
};

export default CheckoutForm;
```

## ElementsConsumer

Payment Element によって収集された支払い情報を Stripe API に安全に渡すには、`Elements` インスタンスにアクセスして、それを [stripe.confirmPayment](https://docs.stripe.com/js/payment_intents/confirm_payment) とともに使用できるようにします。クラスコンポーネントから Stripe オブジェクトまたは Element にアクセスする必要がある場合は、[useElements](https://docs.stripe.com/sdks/stripejs-react.md#useElements-hook) フックや [useStripe](https://docs.stripe.com/sdks/stripejs-react.md#useStripe-hook) フックの代わりに `ElementsConsumer` を使用します。

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

class CheckoutForm extends React.Component {
  handleSubmit = async (event) => {
    // We don't want to let default form submission happen here,
    // which would refresh the page.
    event.preventDefault();
const {stripe, elements} = this.props;

    if (!stripe || !elements) {
      // Stripe.js hasn't yet loaded.
      // Make sure to disable form submission until Stripe.js has loaded.
      return;
    }
const result = await stripe.confirmPayment({
      //`Elements` instance that was used to create the Payment Element
      elements,
      confirmParams: {
        return_url: "https://example.com/order/123/complete",
      },
    });

    if (result.error) {
      // Show error to your customer (for example, payment details incomplete)
      console.log(result.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`.
    }
  };

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <PaymentElement />
        <button disabled={!this.props.stripe}>Submit</button>
      </form>
    );
  }
}

export default function InjectedCheckoutForm() {
  return (<ElementsConsumer>
      {({stripe, elements}) => (
        <CheckoutForm stripe={stripe} elements={elements} />
      )}
    </ElementsConsumer>
  )
}
```

| プロパティ      | 説明                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
| ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `children` | (required) `({elements, stripe}) => ReactNode`

  このコンポーネントは、[関数を子として](https://reactjs.org/docs/render-props.html#using-props-other-than-render)受け取ります。提供する関数は、Element コンポーネントを管理している [Elements オブジェクト](https://docs.stripe.com/js/elements_object)と [<Elements>](https://docs.stripe.com/sdks/stripejs-react.md#elements-provider) に渡した [Stripe オブジェクト](https://docs.stripe.com/js/initializing) を指定することで呼び出されます。

  `Promise` を [Elements プロバイダー](https://docs.stripe.com/sdks/stripejs-react.md#elements-provider)に渡しても、`Promise` が解決されない場合、`stripe` と `elements` は `null` になります。 |

## カスタマイズとスタイリング

iframe の使用により、Element のスタイリングの難易度は高くなりますが、支払いデータを安全に処理する負担を Stripe に任せられるだけでなく、お客様のサイトの[業界規制への準拠](https://docs.stripe.com/security/guide.md#validating-pci-compliance)も維持することができます。

各 Element は、`iframe` にマウントされます。このため Elements は、お客様の既存のスタイルやコンポーネントのフレームワークとは連携しなくなります。ただし、サイトのデザインに合うように Elements を設定することはできます。Elements をカスタマイズするには、[イベントへの応答](https://docs.stripe.com/js/element/events)と、[appearance](https://docs.stripe.com/elements/appearance-api.md) オプションを使用した Elements の設定を行います。各 Element のレイアウトは変更できませんが、カラー、フォント、境界線、パディングなどを変更できます。

## 次のステップ

React Stripe.js および Elements を使用して組み込みを構築します。

- [支払いを受け付ける](https://docs.stripe.com/payments/quickstart.md)
- [Express Checkout Element で決済を受け付ける](https://docs.stripe.com/elements/express-checkout-element/accept-a-payment.md)
- [支払いリクエストボタンを追加する](https://docs.stripe.com/stripe-js/elements/payment-request-button.md)
- [Elements Appearance API についてもっと知る](https://docs.stripe.com/elements/appearance-api.md)
- [Stripe.js リファレンス](https://docs.stripe.com/js.md)