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

Methods

| Name | Return | Description | ---- | ------ | ----------- | | getUser(clientId, secretKey, dev) | Promise | Get user datadev default value process.env.NODE_ENV or true

License

MIT © jackson1028