React-dipay-web-sdk NPM

React Dipay Integration

Installation and usage

Install with npm:

npm i react-dipay-web-sdk

Then import styles to your app:

// Import style in Root Component such as <App>
import 'react-dipay-web-sdk/dist/index.css'

Example

import React, { useState, useEffect } from 'react'
import { DipayLogin, DipayPay, getUser } from 'react-dipay-web-sdk'
import 'react-dipay-web-sdk/dist/index.css' // Import style in your Root file such as <App>

const App = () => {
  const [open1, setOpen1] = useState(false);
  const [open2, setOpen2] = useState(false);

  useEffect(() => {
    getUser("{YOUR_CLIENT_ID}}", "{SECRET_KEY}")
      .then(res => {
        console.log('Get User Success', res)
      })
      .catch(err => {
        console.log('Get User Error', err)
      })
  }, [])
  
  return (
    <div>
      <button onClick={e => setOpen1(true)}>Activate Dipay</button>
      <button onClick={e => setOpen2(true)}>Pay with Dipay</button>
      <DipayLogin
        clientId="{YOUR_CLIENT_ID}" // Contact us for your Client ID
        open={open1}
        onClose={() => setOpen1(false)}
        identificationNumber={1234567890}
        onSuccess={data => console.log('Response', data)}
      />
      <DipayPay
        clientId="{YOUR_CLIENT_ID}" // Contact us for your Client ID
        secretKey="{SECRET_KEY}" // To determine user
        open={open2}
        onClose={() => setOpen2(false)}
        onSuccess={data => console.log('Response', data)}
        productCode="PRODUCT_TEST_ID"
        amount={100000}
      />
    </div>
  )
}

export default App

Component

`DipayLogin` Props

Key	Required	Type	Description
`clientId`	`true`	`string`	As credential to integrate with Dipay
`open`	`true`	`boolean`	Control whether the menu is open
`onClose`	`true`	`function`	Subscribe to close events
`onSuccess`	`false`	`function`	Subscribe to Login Success event
`identificationNumber`	`false`	`number`	Is optional for compare identification number from dipay
`dev`	`false`	`boolean`	Set development modeDefault `process.env.NODE_ENV` or `true`
`immediate`	`false`	`string (phoneNumber)`	Bypass prelogin step by set this input phone number

`DipayPay` Props

Key	Required	Type	Description
`clientId`	`true`	`string`	As credential to integrate with Dipay
`secretKey`	`true`	`string`	As credential to integrate with Dipay
`open`	`true`	`boolean`	Control whether the menu is open
`onClose`	`true`	`function`	Subscribe to close events
`onSuccess`	`false`	`function`	Subscribe to Login Success event
`productCode`	`true`	`string`	Product code / id to be saved in Dipay
`amount`	`true`	`number`	Amount to be paid
`dev`	`false`	`boolean`	Set development modeDefault `process.env.NODE_ENV` or `true`