フォーム要素

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

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

AddressForm

国別の検証機能を備えた、請求先住所の詳細を収集するための事前構築済みフォーム。

PhoneInput

国コードセレクターと検証機能が統合された国際電話番号入力。

CountrySelect

国旗付きでモバイルフレンドリーなUIを備えた、国を選択するための検索可能なドロップダウン。

CurrencySelector

利用可能なオプションからユーザーが希望の支払い通貨を選択できるコンポーネント。

一般的な使用パターン

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

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

MyCustomForm.tsx

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から始めて、請求情報の収集方法を確認してください。