/sinpe-react

React wrapper around the Sinpe Móvil workflow to send money via sms.

Primary LanguageTypeScriptMIT LicenseMIT

🚨 This package lacks TESTS

🙏 Collaborations are highly appreaciated. Feel free to fork and submit PR's ♥.

⚠🚨 This tools IS in DEVELOPMENT ⚠🚨

This tools is NOT suitable for production.

Sinpe React Component

Banner image with Sinpe-React Logo

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.

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

npm i sinpe-react
--OR
yarn add sinpe-react
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 (
   <SinpeReact
    vendorPhoneNumber={myNumber}
    order={order}
   />
  );
}

Using NextJS.

If using NextJS import styles in _app.js file.

// _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 <Component {...pageProps} />
}
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.

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 (
   <SinpeReact
    vendorOptions={vendorOptions}
    customerOptions={customerOptions}
    styles={styles}
   />
  );
}

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.

declare var process: {
  env: {
    SINPE_API_KEY: string
  }
}

// and call the conf
conf={api_key:process.env.SINPE_API_KEY}
<SinpeReact conf={conf} />