Widget UI 設定方法

Widget UIのカスタマイズ方法の紹介です

JavaScript
<script src="https://js.elepay.io/v1/elepay.js"></script>
<script>
  var elepay = new Elepay("<公開鍵>")
  var widget = elepay.createCodeWidget({
    "container": "<配置先のDOM要素のCSSセレクターを表す文字列>",
    "direction": "vertical",
    "theme": {
      "primaryColor": null,
      "borderColor": null
    },
    "icon": true,
    "parts": {
      "amount": true,
      "tip": true,
      "paymentLogo": true
    }
  })
  widget.on('success', function (event, codeObject) {
    // 決済完了後処理
  })
  widget.on('expired', function (event, codeObject) {
    // 新しいEasyQRコードを生成するなど
  })
  widget.on('error', function (event, error) {
    // エラー処理
  })
  widget.show("<EasyQR オブジェクトID>")
  // widget.destroy() // easyQRウィジェットを破棄します
</script>

公開鍵の設定

  • 参照コード行: javascript@3

[optional]金額を表示する

  • 参照コード行: javascript@13

[optional]案内文を表示する

  • 参照コード行: javascript@14

[optional]決済ブランドを表示する

  • 参照コード行: javascript@15

[optional]アイコンを表示する

  • 参照コード行: javascript@11

elepayの「簡単決済>設定>基本設定」でアイコンを調整できます。

[optional]QRコードの表示方式

  • 参照コード行: javascript@6

  • 縦向き:vertical

  • 横向き:horizontal

[optional]カラーの設定

  • 参照コード行: javascript@7-9

  • primaryColor:金額の色

  • borderColor:枠線の色

最終更新日

このページ