@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通信、状態を管理するコンテキストを作成します。他のすべての決済コンポーネントは、正しく機能するためにこのプロバイダーでラップする必要があります。これにより、決済ロジックが一元化され、個々のコンポーネントは軽量で特定の機能に集中できます。

<!-- DIAGRAM_IMAGE_START:architecture:16:9::1765377042 -->
![Overview](assets/diagram/overview-01.ja.jpg)
<!-- DIAGRAM_IMAGE_END -->

## 構築できるもの

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

## 次のステップ

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

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