はじめに | ArcBlock

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

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

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

Installation Command

npm install @blocklet/payment-react

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

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

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

App.tsx

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のドキュメントをご覧ください。

ステップ3：CheckoutFormの追加

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

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

完全な例

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

PaymentPage.tsx

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: CheckoutFormのプロパティとカスタマイズオプションについてさらに詳しく学びます。
Providers: ライブラリを支えるコンテキストプロバイダーについて詳しく学びます。
Components: 利用可能なUIおよびビジネスロジックコンポーネントの全範囲を発見します。