html 前端de KANPAI！ ＃02 - エンジョイ！フロントエンド - 「付款请求APIで実现できる网决済の体験」

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html 前端de KANPAI！ ＃02 - エンジョイ！フロントエンド - 「付款请求APIで実现できる网决済の体験」相关的知识，希望对你有一定的参考价值。

'use strict'

document.addEventListener('DOMContentLoaded', () => {
  init()
}, false)

function init () {
  document.querySelectorAll('.buyButton').forEach((e) => {
    e.addEventListener('click', () => {
      onBuyClicked(e.getAttribute('data-price'))
    }, false)
  })
}

function onBuyClicked (_price) {
  // ブラウザがPayment Requestに対応していない場合はページ遷移する
  if (!window.PaymentRequest) {
    location.href = '/checkout'
    return
  }

  // 支払い方法の設定
  const supportedInstruments = [{
    supportedMethods: ['basic-card'],
    data: {
      supportedNetworks: [
        'visa', 'mastercard', 'amex', 'discover',
        'diners', 'jcb', 'unionpay'
      ]
    }
  }]

  // 取引の詳細を設定
  const price = Number(_price)
  const shipping = 500
  const total = price + shipping
  const details = {
    displayItems: [{
      label: '小計',
      amount: {currency: 'JPY', value: price}
    }, {
      label: '送料',
      amount: {currency: 'JPY', value: shipping}
    }],
    total: {
      label: 'ご請求額',
      amount: {currency: 'JPY', value: total}
    }
  }

  // Payment Requestインスタンスを作成
  const request = new PaymentRequest(supportedInstruments, details)

  // 支払いのUIを表示
  request.show()
    // 決済処理を行う
    .then((result) => {
      console.log(result)
      // resultに支払い情報が入っている。カード番号とかも入っているので取り扱いに注意
      // 本来ならトークン化するなどしてサーバにPOSTする
      // 今回はそのままサーバにPOSTする（POST先がないのでエラーになる）
      return fetch('/pay', {
        method: 'POST',
        credentials: 'include',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify(result.toJSON())
      }).then((respnse) => {
        // 決済結果を表示する
        if (response.status === 200) {
          return result.complete('success');
        } else {
          return result.complete('fail');
        }
      }).catch(() => {
        return result.complete('fail');
      })
    })
}
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Payment Request API Test</title>

  <style>
    body {
      color: #333;
      padding: 20px;
    }

    h1 {
      margin: 40px 20px 0;
    }

    ul {
      display: flex;
      list-style-type: none;
      justify-content: space-between;
      margin: 60px 0 0;
      padding: 0;
    }

    li {
      background-color: #eee;
      width: 100%;
      margin: 0 20px;
      padding: 20px;
    }

    .buyButton {
      margin-top: 20px;
      text-align: center;
      background-color: #FF5252;
      color: #fff;
      padding: 10px 20px;
      cursor: pointer;
    }
    .buyButton:hover {
      opacity: 0.7;
    }
  </style>

  <script src="./prapi.js"></script>
</head>
<body>
  <h1>Payment Request API Test</h1>
  <ul>
    <li>
      <div>商品A</div>
      <div>3,980円</div>
      <div class="buyButton" data-price="3980">購入する</div>
    </li>
    <li>
      <div>商品B</div>
      <div>1,980円</div>
      <div class="buyButton" data-price="1980">購入する</div>
    </li>
    <li>
      <div>商品C</div>
      <div>680円</div>
      <div class="buyButton" data-price="680">購入する</div>
    </li>
  </ul>
</body>
</html>

以上是关于html 前端de KANPAI！ ＃02 - エンジョイ！フロントエンド - 「付款请求APIで実现できる网决済の体験」的主要内容，如果未能解决你的问题，请参考以下文章

javascript Exemplo arquivo de client查询前端graphql

Jquery.validate.js实现前端表单验证

前端 网络三剑客之html 02

大前端 一HTML

大前端 一HTML

前端分类目录