@blocklet/payment-react/docs/components-ui-form-elements.ja.md

Reusable react components for payment kit v2

# フォーム要素

`@blocklet/payment-react` ライブラリは、カスタムの支払いフォームと連絡先情報フォームの作成を簡素化するために設計された、粒度の細かい入力コンポーネントのコレクションを提供します。これらの要素は、検証とユーザーエクスペリエンスを念頭に置いて構築されており、`react-hook-form`とスムーズに統合して、データ収集のための堅牢で柔軟なソリューションを提供します。

各コンポーネントは自己完結型のユニットとして設計されており、特定の要件に合わせて複雑なフォームに組み立てることができます。以下は、利用可能なフォーム要素の概要です。

<x-cards data-columns="2">
  <x-card data-title="AddressForm" data-icon="lucide:map-pin" data-href="/components/ui/form-elements/address-form">
    国別の検証機能を備えた、請求先住所の詳細を収集するための事前構築済みフォーム。
  </x-card>
  <x-card data-title="PhoneInput" data-icon="lucide:phone" data-href="/components/ui/form-elements/phone-input">
    国コードセレクターと検証機能が統合された国際電話番号入力。
  </x-card>
  <x-card data-title="CountrySelect" data-icon="lucide:globe" data-href="/components/ui/form-elements/country-select">
    国旗付きでモバイルフレンドリーなUIを備えた、国を選択するための検索可能なドロップダウン。
  </x-card>
  <x-card data-title="CurrencySelector" data-icon="lucide:coins" data-href="/components/ui/form-elements/currency-selector">
    利用可能なオプションからユーザーが希望の支払い通貨を選択できるコンポーネント。
  </x-card>
</x-cards>

## 一般的な使用パターン

これらのフォーム要素は、`react-hook-form`の`FormProvider`内で使用することを目的としています。これらを組み合わせて、取引に必要なすべての情報を取得する包括的なフォームを構築できます。各コンポーネントには独自のプロパティセットがありますが、共通の統合パターンを共有しています。

以下は、複数のフォーム要素を組み合わせてユーザー情報フォームを作成する方法の基本的な例です。

```jsx MyCustomForm.tsx icon=logos:react
import { FormProvider, useForm } from 'react-hook-form';
import { AddressForm, PhoneInput, CurrencySelector } from '@blocklet/payment-react';
import { Button, Stack } from '@mui/material';

// Assume `availableCurrencies` is fetched from your backend
const availableCurrencies = [
  {
    id: 'usd_xxx',
    name: 'USD',
    symbol: 'USD',
    logo: 'url/to/usd_logo.png',
    method: { id: 'stripe', name: 'Stripe' },
  },
  // ... other currencies
];

function MyCustomForm() {
  const methods = useForm({
    defaultValues: {
      currency: 'usd_xxx',
      phone_number: '',
      billing_address: {
        line1: '',
        city: '',
        state: '',
        postal_code: '',
        country: 'US', // Use ISO2 code
      },
    },
  });

  const onSubmit = (data) => {
    console.log('Form data submitted:', data);
  };

  return (
    <FormProvider {...methods}>
      <form onSubmit={methods.handleSubmit(onSubmit)}>
        <Stack spacing={2}>
          <CurrencySelector
            value={methods.watch('currency')}
            currencies={availableCurrencies}
            onChange={(currencyId) => methods.setValue('currency', currencyId)}
          />
          <PhoneInput name="phone_number" label="Phone Number" required />
          <AddressForm mode="required" stripe={false} />
          <Button type="submit" variant="contained">
            Submit
          </Button>
        </Stack>
      </form>
    </FormProvider>
  );
}
```

この例では、`CurrencySelector`、`PhoneInput`、および`AddressForm`が単一のフォーム内に組み合わされています。`CurrencySelector`はフォームの状態に結び付けられた制御コンポーネントとして使用され、`PhoneInput`と`AddressForm`は、フィールドと検証ルールを`react-hook-form`コンテキストに自動的に登録する非制御コンポーネントです。

## 次のステップ

各コンポーネントの具体的なプロパティと実装の詳細については、個別のドキュメントページをご覧ください。

まず[AddressForm](./components-ui-form-elements-address-form.md)から始めて、請求情報の収集方法を確認してください。