🚨 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

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} />