@blocklet/payment-react/docs/overview.ja.md

Reusable react components for payment kit v2

# 概要

`@blocklet/payment-react` は、支払いフロー、サブスクリプション、および寄付システムの blocklet への統合を効率化するために設計された、包括的な React コンポーネントライブラリです。[Payment Kit](https://www.arcblock.io/docs/arcblock-payment-kit) を基盤として構築されており、事前に構築済みでカスタマイズ可能、かつ本番環境ですぐに利用できる一連のコンポーネントを提供し、最小限の労力で強力な決済体験を構築するのに役立ちます。

## 主な機能

<x-cards data-columns="3">
  <x-card data-title="構築済みのUIコンポーネント" data-icon="lucide:layout-template">
    チェックアウトフォーム、価格表、寄付ウィジェットなど、一般的な決済シナリオをすぐにカバーできる豊富なコンポーネントセットが含まれています。
  </x-card>
  <x-card data-title="カスタマイズ可能なテーマ" data-icon="lucide:palette">
    Material-UI テーマを使用して決済フローの外観を完全に制御し、一貫したユーザーエクスペリエンスを保証します。
  </x-card>
  <x-card data-title="i18n サポート" data-icon="lucide:languages">
    組み込みの国際化サポートにより、グローバルなユーザー向けにコンポーネントのテキストを簡単にローカライズできます。
  </x-card>
  <x-card data-title="包括的な決済操作" data-icon="lucide:credit-card">
    サブスクリプション、返金、請求書管理、従量課金など、複雑な決済ロジックを簡単に処理します。
  </x-card>
  <x-card data-title="最適化されたパフォーマンス" data-icon="lucide:package-minus">
    遅延読み込みと動的コンポーネントインポートの組み込みサポートにより、アプリケーションのバンドルサイズを最適化し、パフォーマンスを向上させます。
  </x-card>
</x-cards>

## 仕組み

このライブラリは、プロバイダーコンポーネントモデルを中心に設計されています。`PaymentProvider` はライブラリの中核であり、認証、API通信、状態を管理するコンテキストを作成します。他のすべての決済コンポーネントは、正しく機能するためにこのプロバイダーでラップする必要があります。これにより、決済ロジックが一元化され、個々のコンポーネントは軽量で特定の機能に集中できます。

```d2 高レベルアーキテクチャ
direction: down

User: {
  shape: c4-person
}

Your-Application: {
  label: "あなたのアプリケーション"
  shape: rectangle

  PaymentProvider: {
    label: "PaymentProvider"
    shape: rectangle

    Payment-Components: {
      label: "決済コンポーネント"
      shape: rectangle
      grid-columns: 2

      CheckoutForm: { label: "CheckoutForm" }
      CheckoutTable: { label: "CheckoutTable" }
      CheckoutDonate: { label: "CheckoutDonate" }
      CustomerInvoiceList: { label: "CustomerInvoiceList" }
    }
  }
}

Payment-Kit-Backend: {
  label: "Payment Kit バックエンド"
  shape: cylinder
}

User -> Your-Application.PaymentProvider.Payment-Components: "UIと対話する"
Your-Application.PaymentProvider -> Payment-Kit-Backend: "API通信を処理する"
Payment-Kit-Backend -> Your-Application.PaymentProvider: "データを返す"
Your-Application.PaymentProvider.Payment-Components -> User: "UIの更新をレンダリングする"

```

## 構築できるもの

- **サブスクリプションサービス:** `CheckoutTable` を使用して、SaaS製品の価格ページとチェックアウトフローを迅速に実装します。
- **Eコマースチェックアウト:** `CheckoutForm` を使用して、商品を販売するための一回限りの支払いフォームを構築します。
- **寄付システム:** `CheckoutDonate` を使用して、クリエイターや活動を支援するための柔軟な寄付ウィジェットを追加します。
- **カスタマーポータル:** `CustomerInvoiceList` やその他の履歴コンポーネントを使用して、ユーザーの請求履歴を表示し、支払い方法を管理します。

## 次のステップ

`@blocklet/payment-react` が提供する機能の概要を理解したところで、何かを構築してみることが最善の学習方法です。

[はじめに](./getting-started.md) ガイドを参考にしてライブラリをインストールし、数分で最初の支払いフォームを作成してみましょう。