@blocklet/payment-react/docs/getting-started.ja.md

Reusable react components for payment kit v2

# はじめに

このガイドでは、`@blocklet/payment-react`をインストールし、基本的で機能的な支払いフォームをアプリケーションに統合するための重要な手順を説明します。わずか数分で、動作するチェックアウト体験を構築できます。

## ステップ1：インストール

まず、npmまたはお好みのパッケージマネージャーを使用して、ライブラリをプロジェクトに追加します。

```bash Installation Command icon=lucide:terminal
npm install @blocklet/payment-react
```

## ステップ2：PaymentProviderのセットアップ

このライブラリのほとんどのコンポーネントは、共有の支払いコンテキストへのアクセスを必要とします。`PaymentProvider`コンポーネントがこのコンテキストを提供し、支払いが処理されるアプリケーションまたはコンポーネントツリーのルートに配置する必要があります。

正しく動作するためには、アプリケーションの認証コンテキストから`session`オブジェクトと`connect` API関数が必要です。

```tsx App.tsx icon=logos:react
import { PaymentProvider } from '@blocklet/payment-react';
// これはアプリの認証コンテキストフックのプレースホルダーです。
// 現在のユーザーセッションとAPIコネクタを返す必要があります。
import { useSessionContext } from './contexts/session'; 

function App({ children }) {
  const { session, connectApi } = useSessionContext();

  return (
    <PaymentProvider session={session} connect={connectApi}>
      {/* 支払コンポーネントはここに配置されます */}
      {children}
    </PaymentProvider>
  );
}
```

> セッションコンテキストの設定や高度な`PaymentProvider`の設定に関する詳細については、[PaymentProviderのドキュメント](./providers-payment-provider.md)をご覧ください。

## ステップ3：CheckoutFormの追加

`CheckoutForm`は、支払いフローをレンダリングするための主要なコンポーネントです。支払いリンクから開始される一回限りの支払いとサブスクリプションの両方を処理できます。

使用するには、単に`PaymentProvider`内に配置し、支払いリンク（`plink_...`）またはチェックアウトセッション（`cs_...`）の必須`id`を渡します。

## 完全な例

上記の手順を組み合わせた、完全で最小限の例を以下に示します。このコードを統合の開始点として使用できます。

```tsx PaymentPage.tsx icon=logos:react
import { PaymentProvider, CheckoutForm } from '@blocklet/payment-react';
// これはアプリの認証コンテキストフックのプレースホルダーです。
import { useSessionContext } from './contexts/session'; 

function PaymentPage() {
  const { session, connectApi } = useSessionContext();

  // 支払いリンクIDは、Payment Kitダッシュボードから生成されます。
  const paymentLinkId = 'plink_xxx'; 

  return (
    <PaymentProvider session={session} connect={connectApi}>
      <CheckoutForm 
        id={paymentLinkId}
        mode="inline" // フォームをページに直接埋め込みます
        showCheckoutSummary={true}
        onChange={(state) => console.log('Checkout State Changed:', state)}
        onPaid={(result) => console.log('Payment Successful:', result)}
      />
    </PaymentProvider>
  );
}

export default PaymentPage;
```

この設定により、`CheckoutForm`は完全な支払いUIをレンダリングし、ユーザー入力を処理し、トランザクションをシームレスに処理します。

## 次のステップ

おめでとうございます！最初の支払いフォームの統合に成功しました。これで、より高度な機能やコンポーネントを探求する準備が整いました。

- **[CheckoutForm](./components-checkout-checkout-form.md)**: `CheckoutForm`のプロパティとカスタマイズオプションについてさらに詳しく学びます。
- **[Providers](./providers.md)**: ライブラリを支えるコンテキストプロバイダーについて詳しく学びます。
- **[Components](./components.md)**: 利用可能なUIおよびビジネスロジックコンポーネントの全範囲を発見します。