@wepin/pin-js

⚠️ Notice:

This package is only available for web environments and cannot be used in Android or iOS hybrid apps (Webview).

If you are using this package in a Server Side Rendering (SSR) environment, make sure to load the package only on the Client Side Rendering (CSR) side.

Please refer to the following code for implementation:

const initWepinPin = async () => {
   const { WepinPin } = await import('@wepin/pin-js');
   const wepinPin = new WepinPin({
       appKey: '',
   });
   await wepinPin.init();
}

⏩ Document

⏩ Get App Key

After signing up for Wepin Workspace, go to the development tools menu and enter the information for each app platform to receive your App ID and App Key.

⏩ Install

To install the Wepin Pin Pad Library, you can use npm, yarn, or a CDN: Using npm:

npm install @wepin/pin-js

Using yarn:

yarn add @wepin/pin-js

Using CDN: You can also include the library directly via CDN by adding the following script tag to your HTML file:

<script src="https://cdn.jsdelivr.net/npm/@wepin/pin-js/dist/umd/wepin-pin-pad.umd.js"></script>

⏩ Import SDK

Using npm or yarn:

import { WepinPin } from '@wepin/pin-js'

Using CDN:

const { WepinPin } = window.WepinPinPad

⏩ Initialize

Create a new instance of WepinPin and initialize it with your application's key

• defaultLanguage: The language to be displayed on the widget (default: 'en') Currently, only 'ko', 'en' and 'ja' are supported.

const wepinPin = new WepinPin({
  appKey: 'your-wepin-app-key',
})

Or you can also pass in the WepinLogin library you created.

const wepinLogin = new WepinLogin()
const wepinPin = new WepinPin({
  appKey: 'your-wepin-app-key',
  wepinLogin,
})

// initialization
await wepinPin.init({
  defaultLanguage: 'ko',
})

Then use login to log in to wepin.

const loginRes = await wepinPin.login.loginWithEmailAndPassword(...)
await wepinPin.login.loginWepin(loginRes)

isInitialized

wepinPin.isInitialized()

The isInitialized() method checks WepinPin is initialized.

changeLanguage

wepinPin.changeLanguage(language)

Changes the language displayed on the PIN pad screen. Currently, only 'ko', 'en', and 'ja' are supported.

Parameters

• language <string>
  • The language to be displayed on the PIN pad screen. Currently, only 'ko', 'en' and 'ja' are supported.

Returns

• void

Example

wepinPin.changeLanguage('ko')

⏩ Examples

Open Pinpad For Register

• generateRegistrationPINBlock

const pinBlock = await wepinPin.generateRegistrationPINBlock()

fetch({
  url: 'https://sdk.wepin.io/v1/app/register',
  method: 'POST',
  // Omit authentication headers
  body: {
    // Omit other bodies
    UVD: pinBlock.UVD,
    hint: pinBlock.hint,
  }
})

Open PinPad for sign

• generateAuthPINBlock

const pinBlock = await wepinPin.generateAuthPINBlock(count)
// Sort seqNum of uvd in ascending order from 1 because I need to write it in order starting from 1
pinBlock.UVDs.sort((a, b) => (a.seqNum ?? 0) - (b.seqNum ?? 0))

const resArray: any[] = []
for (const encUVD of pinBlock.UVDs) {
  await fetch({
    url: 'https://sdk.wepin.io/v1/tx/sign',
    method: 'POST',
    body: {
      userId: await getUserId(),
      walletId: await getWalletId(),
      accountId: (await getEthereumAccount()).accountId,
      type: 'msg_sign',
      txData: {
        data: '0x0',
      },
      pin: encUVD,
      otpCode: {
        code: pinBlock.otp,
      },
    }
  })
}

Open Pinpad for change pin

• generateChangePINBlock

const pinBlock = await wepinPin.generateChangePINBlock()
const res = await fetch({
  url: 'https://sdk.wepin.io/v1/wallet/pin/change'
  body: {
    userId: await getUserId(),
    walletId: await getWalletId(),
    UVD: pinBlock.UVD,
    newUVD: pinBlock.newUVD,
    hint: pinBlock.hint,
    otpCode: {
      code: pinBlock.otp
    }
  }
})

Open OTP for failed verify otp

• generateAuthOTP

let res = await getWepinSignMessage(pinBlocks.UVDs, pinBlock.otp)
if (res.body[0].message === 'OTP_MISMATCH_WRONG_CODE') {
  const otp = await wepinPin.generateAuthOTP()
  res = await getWepinSignMessage(pinBlocks.UVDs, otp.code)
}

finalize

wepinPin.finalize()

The finalize() method finalizes the WepinPin.