https://github.com/jonoise/sinpe-react
React wrapper around the Sinpe Móvil workflow to send money via sms.
https://github.com/jonoise/sinpe-react
react reactjs sinpe
Last synced: about 1 month ago
JSON representation
React wrapper around the Sinpe Móvil workflow to send money via sms.
- Host: GitHub
- URL: https://github.com/jonoise/sinpe-react
- Owner: jonoise
- License: mit
- Created: 2021-09-23T22:04:37.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2021-10-11T02:17:59.000Z (over 4 years ago)
- Last Synced: 2025-06-20T00:08:45.501Z (12 months ago)
- Topics: react, reactjs, sinpe
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/sinpe-react
- Size: 3.84 MB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
#### 🚨 This package lacks TESTS
#### 🙏 Collaborations are highly appreaciated. Feel free to fork and submit PR's ♥.
⚠🚨 This tools IS in DEVELOPMENT ⚠🚨
```bash
This tools is NOT suitable for production.
```
# Sinpe React Component
## What is Sinpe React?
Sinpe-React is a React wrapper around the SINPE Móvil flow to send money via sms. It's just an automation that provide a basic API.
## Docs.
Para una versión en español y más detallada ve a [**la documentación**](https://soloamilkar.github.io/sinpe-react).
## Features
- Send money via sms using Sinpe Móvil (Costa Rica only).
- Connect to your backend or CMS.
- User friendly.
- Styling highly customizable.
- Written in Typecript.
## Quickstart
```bash
npm i sinpe-react
--OR
yarn add sinpe-react
```
```js
import React from 'react';
import SinpeReact from 'sinpe-react';
import "sinpe-react/dist/sinpe-react.cjs.development.css"
function App() {
const order={"..."}
const myNumber={"..."}
return (
);
}
```
## Using NextJS.
If using NextJS import styles in \_app.js file.
```js
// _app.js
import '../styles/globals.css'
import type { AppProps } from 'next/app'
// add this
import 'sinpe-react/dist/sinpe-react.cjs.development.css'
function MyApp({ Component, pageProps }: AppProps) {
return
}
export default MyApp
```
## Custom Styling.
You can add custom styling to both button and modal components using `btnClass` and `modalClass` respectively as props of SinpeReact component.
```js
import React from 'react';
import SinpeReact from 'sinpe-react';
import "sinpe-react/dist/sinpe-react.cjs.development.css"
function App() {
const vendorOptions={"..."}
const customerOptions={"..."}
const styles = {
modalClass: "myModalClass",
btnClass: "myBtnClass"
}
return (
);
}
```
## API
| Props | Type | Required | Description |
| ----------------- | -------- | -------- | -------------------------------------------------------------------- |
| vendorPhoneNumber | string | ✔ | The number that receives the transfer. |
| order | object | ✔ | Options related to your customer. |
| callbackFunction | function | | Fires after customer confirm order receipt number. |
| redirectUrl | string | | Url you want to redirect the user after the purchase, eg: /thankyou. |
| styles | object | | Custom stylings classes. |
## Troubleshooting
### Typing error from env variable -> conf: {{api_key: process.env.SINPE_API_KEY}}
When getting an Environment Variable you need to specify the type of value that variable is.
```js
declare var process: {
env: {
SINPE_API_KEY: string
}
}
// and call the conf
conf={api_key:process.env.SINPE_API_KEY}
```