elepayCheckout on Device
Configure fixed devices to enable flexible payments.
- Effort: low code, ~40 minutes
- Implementation style: QR code embedded in page
- UI flexibility: limited
Three steps for customers or staff to operate the device and display a payment QR code.
Step 1: Create an EasyQR code for the product/service
Step 2: Configure the embedded UI style and apply it to the device
elepay provides UI customization within a certain scope and is suitable for common scenarios.
| Param | Type | Description |
|---|---|---|
| options | object | Widget options |
| options.container | string | CSS selector string of the target container DOM element |
| options.direction | string | Widget layout: vertical (default) or horizontal |
| options.icon | boolean | If true, show a QR code with brand icons. Default: false |
| options.parts.amount | boolean | If true, show amount. Default: true |
| options.parts.paymentLogo | boolean | If true, show payment method icons. Default: true |
| options.parts.tip | boolean | If true, show help message. Default: true |
| options.theme.primaryColor | boolean | Primary color |
| options.theme.borderColor | boolean | Widget border color. null: no border |
| options.theme.backgroundColor | boolean | Widget background color. Default: white |
For example
| Vertical | Horizontal | Hide payment methods | QR code only |
|---|---|---|---|
 |  |  |  |
Step 3: After the customer completes payment, handle the payment status
The widget provides events to detect payment progress.
| Status/Progress | |
|---|---|
| Payment succeeded | widget.on('success', function (event, codeObject) {// Handle after payment completes }); |
| Payment expired | widget.on('expired', function (event, codeObject) {// e.g., generate a new EasyQR code }); |
| Payment error | widget.on('error', function (event, error) { // Error handling }); |
| Destroy widget | widget.destroy(); |
Other settings
Customize the Checkout page UI
The Checkout page customers see can be customized under elepay [簡単決済>設定>基本設定], including icon and color scheme.
Configure payment methods
Under elepay [簡単決済>設定>決済方法管理], you can manage available payment methods (review, enable, disable). Newly added payment methods can be used immediately.
Add location information
You can add location information when creating the EasyQR code. It is also manageable under elepay [ロケーション].
Last updated on