Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/napolab/react-native-gmo-payment
https://github.com/napolab/react-native-gmo-payment
gmo-payment react-native webview
Last synced: 6 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/napolab/react-native-gmo-payment
- Owner: napolab
- Created: 2023-09-19T20:15:56.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2023-10-15T15:32:06.000Z (over 1 year ago)
- Last Synced: 2024-12-31T21:12:10.447Z (about 1 month ago)
- Topics: gmo-payment, react-native, webview
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/react-native-gmo-payment
- Size: 466 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# GMO Multipayment Library for React Native
このライブラリは、React Native アプリケーションで GMO ペイメントゲートウェイの Multipayment API を簡単に利用できるように設計されました。通常、Multipayment API はブラウザ環境を対象としていますが、このライブラリを使用することで、React Native アプリケーションから WebView 経由で API を呼び出すことが可能になります。
## インストール
```bash
npm install react-native-gmo-payment
# または
yarn add react-native-gmo-payment
```
## 使い方
### 1. `GMOMultipaymentProvider` の設定
アプリケーションのルートコンポーネントで `GMOMultipaymentProvider` を設定します。このプロバイダーは、GMO Multipayment の環境設定とショップIDを受け取ります。
```jsx
import { GMOMultipaymentProvider } from "react-native-gmo-payment";
function App() {
return (
console.log("GMO Multipayment is ready")}
>
{/* 他のアプリケーションコンポーネント */}
);
}
export default App;
```
### 2. ペイメントトークンの取得
`getMultiPaymentToken` 関数を使用してペイメントトークンを取得します。この関数は、カード情報とトークンの取得数をパラメータとして受け取ります。
```jsx
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 クライアントの状態を監視できます。この関数はコールバック関数を受け取り、クライアントの状態が変更されるたびに呼び出されます。
```jsx
import { watchClientState } from "react-native-gmo-payment";
const subscription = watchClientState((state) => {
console.log("Client state:", state);
});
// サブスクリプションを後で解除する場合
subscription.unsubscribe();
```
## API ドキュメント
### Types
- `PaymentResultCode`: ペイメント処理の結果コードを表します。
- `PaymentTokenObject`: ペイメントトークンの詳細情報を含むオブジェクトです。
- `PaymentResult`: ペイメントトークン取得の結果を表すオブジェクトです。
- `Payment`: カード情報とトークン取得数を含むオブジェクトです。
- `MultipaymentConfig`: Multipayment API の設定を表すオブジェクトです。
- `State`: クライアントの現在の状態を表します。この型は "loading" または "ready" のいずれかの値を取ります。
- `GMOMultipaymentProviderProps`: `GMOMultipaymentProvider` コンポーネントのプロパティを表します。
### Functions
- `getClientState`: GMO Multipayment クライアントの現在の状態を取得します。この関数は非同期であり、状態を表
す文字列を返します。
- `getMultiPaymentConfig`: 現在の Multipayment API の設定を取得します。
- `getMultiPaymentToken`: カード情報を使用してペイメントトークンを取得します。
- `initMultiPayment`: ショップIDを使用して Multipayment API を初期化します。
- `watchClientState`: クライアントの状態変更を監視する関数です。状態が変更されるたびにコールバック関数が呼び出されます。
詳細な型情報については、ソースコードを参照してください。
## ライセンス
MIT