React-native-gmo-payment NPM

GMO Multipayment Library for React Native

このライブラリは、React Native アプリケーションで GMO ペイメントゲートウェイの Multipayment API を簡単に利用できるように設計されました。通常、Multipayment API はブラウザ環境を対象としていますが、このライブラリを使用することで、React Native アプリケーションから WebView 経由で API を呼び出すことが可能になります。

インストール

npm install react-native-gmo-payment
# または
yarn add react-native-gmo-payment

使い方

1. `GMOMultipaymentProvider` の設定

アプリケーションのルートコンポーネントで GMOMultipaymentProvider を設定します。このプロバイダーは、GMO Multipayment の環境設定とショップIDを受け取ります。

import { GMOMultipaymentProvider } from "react-native-gmo-payment";

function App() {
  return (
    <GMOMultipaymentProvider
      env="production"
      shopId="YOUR_SHOP_ID"
      onReady={() => console.log("GMO Multipayment is ready")}
    >
      {/* 他のアプリケーションコンポーネント */}
    </GMOMultipaymentProvider>
  );
}

export default App;

2. ペイメントトークンの取得

getMultiPaymentToken 関数を使用してペイメントトークンを取得します。この関数は、カード情報とトークンの取得数をパラメータとして受け取ります。

import { getMultiPaymentToken } from "react-native-gmo-payment";

async function fetchPaymentToken() {
  try {
    const paymentData = {
      cardno: "4111111111111111",
      expire: "2302",
      securitycode: "123",
      holdername: "TARO YAMADA",
      tokennumber: 1,
    };

    const result = await getMultiPaymentToken(paymentData);
    console.log("Payment Token Result:", result);
  } catch (error) {
    console.error("Error fetching payment token:", error);
  }
}

3. クライアント状態の監視

新しい watchClientState 関数を使用して GMO Multipayment クライアントの状態を監視できます。この関数はコールバック関数を受け取り、クライアントの状態が変更されるたびに呼び出されます。

import { watchClientState } from "react-native-gmo-payment";

const subscription = watchClientState((state) => {
  console.log("Client state:", state);
});

// サブスクリプションを後で解除する場合
subscription.unsubscribe();