引言

Payment Request API提供了一個跨瀏覽器標(biāo)準(zhǔn)，允許您從客戶那里收集付款、地址和聯(lián)系信息。然后，您可以使用這些信息來處理他們的訂單。

它還促進了瀏覽器和網(wǎng)站之間交換這些信息。這背后的基本思想是通過讓用戶輕松在瀏覽器中存儲付款和聯(lián)系信息來改善用戶的在線購物體驗。

Payment Request API瀏覽器支持

Payment Request API仍在積極開發(fā)中，僅受現(xiàn)代瀏覽器的最后幾個版本的支持。

在開始提出付款請求之前，您應(yīng)該進行功能檢測，以確保瀏覽器支持API：

if (window.PaymentRequest) {
  // Yes, we can use the API
} else {
  // No, fallback to the checkout page
  window.location.href = '/checkout'
}

請注意，您只能在超過https服務(wù)的網(wǎng)站上使用# Payment Request API。

現(xiàn)在讓我們看看這個有用的API是如何工作的。

如何創(chuàng)建PaymentRequest對象

付款請求始終通過使用PaymentRequest()構(gòu)造函數(shù)創(chuàng)建PaymentRequest的新對象來啟動。構(gòu)造函數(shù)接受兩個強制性參數(shù)和一個可選參數(shù)：

• paymentMethods定義接受哪種付款方式。例如，您只能接受Visa和MasterCard信用卡。
• paymentDetails包含應(yīng)付付款總額、稅款、運費、顯示項目等。
• options是一個可選參數(shù)，用于向用戶請求其他詳細信息，例如姓名、電子郵件、電話等。

接下來，我們將創(chuàng)建一個僅包含所需參數(shù)的新付款請求。

How to use the paymentMethods parameter

const paymentMethods = [  {    supportedMethods: ['basic-card']
  }
]
const paymentDetails = {
  total: {
    label: 'Total Amount',
    amount: {
      currency: 'USD',
      value: 8.49
    }
  }
}
const paymentRequest = new PaymentRequest(paymentMethods, paymentDetails)

Notice the supportedMethods parameter in the paymentMethods object. When it is set to basic-card, both debit and credit cards of all networks will be accepted.

但您可以限制受支持的網(wǎng)絡(luò)和卡片類型。例如，只有以下Visa、MasterCard和Discover信用卡被接受：

const paymentMethods = [  {    supportedMethods: ['basic-card'],
    data: {
      supportedNetworks: ['visa', 'mastercard', 'discover'],
      supportedTypes: ['credit']
    }
  }
]
// ...

How to use the paymentDetails object

傳遞給PaymentRequest構(gòu)造函數(shù)的第二個參數(shù)是付款詳細信息對象。它包含訂單總數(shù)和可選的顯示項目數(shù)組。total參數(shù)必須包括一個label參數(shù)和一個帶有currency和value``amount參數(shù)。

您還可以添加其他顯示項目，以提供總數(shù)的高級細分：

const paymentDetails = {
  total: {
    label: 'Total Amount',
    amount: {
      currency: 'USD',
      value: 8.49
    }
  },
  displayItems: [
    {
      label: '15% Discount',
      amount: {
        currency: 'USD',
        value: -1.49
      }
    },
    {
      label: 'Tax',
      amount: {
        currency: 'USD',
        value: 0.79
      }
    }
  ]
}

displayItems參數(shù)并不意味著顯示一長長的項目列表。由于移動設(shè)備上瀏覽器的支付用戶界面的空間有限，您應(yīng)該使用此參數(shù)僅顯示頂級字段，如小計、折扣、稅費、運費等。

Keep in mind that the PaymentRequest API does not perform any calculations. So your web application is responsible for providing the pre-calculated total amount.

如何使用options參數(shù)請求更多詳細信息

您可以使用第三個可選參數(shù)向用戶請求其他信息，例如姓名、電子郵件地址和電話號碼：

// ...
const options = {
  requestPayerName: true,
  requestPayerPhone: true,
  requestPayerEmail: true
}
const paymentRequest = new PaymentRequest(paymentMethods, paymentDetails, options)

默認(rèn)情況下，所有這些值都是false的，但將它們中的任何一個值為true``options對象中將導(dǎo)致付款UI中的額外步驟。如果用戶已經(jīng)在瀏覽器中存儲了這些詳細信息，它們將被預(yù)先填充。

如何顯示付款用戶界面

創(chuàng)建PaymentRequest對象后，您必須調(diào)用show()方法向用戶顯示付款請求UI。

show()方法返回一個承諾，如果用戶成功填寫了詳細信息，則該promise將使用aPaymentResponse對象解決。如果出現(xiàn)錯誤或用戶關(guān)閉用戶界面，則承諾將被拒絕。

// ...
const paymentRequest = new PaymentRequest(paymentMethods, paymentDetails, options)
paymentRequest
  .show()
  .then(paymentResponse => {
    // close the payment UI
    paymentResponse.complete().then(() => {
      // TODO: call REST API to process the payment at the backend server
      // with the data from `paymentResponse`.
    })
  })
  .catch(err => {
    // user closed the UI or the API threw an error
    console.log('Error:', err)
  })

使用上述代碼，瀏覽器將向用戶顯示付款用戶界面。一旦用戶填寫了詳細信息并單擊“Pay”按鈕，您將在show()承諾中收到PaymentResponse對象。

當(dāng)您調(diào)用PaymentResponse.complete()方法時，付款請求UI會立即關(guān)閉。此方法返回一個新的承諾，以便您可以使用收集的信息調(diào)用后端服務(wù)器并處理付款。

如果您想在付款用戶界面顯示旋轉(zhuǎn)器時致電后端服務(wù)器處理付款，您可以延遲調(diào)用complete()）。

Let's create a mock function for payment processing with the backend server. It takes paymentResponse as a parameter and returns a promise after 1.5 seconds that resolves to a JSON object:

const processPaymentWithServer = paymentResponse => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve({ status: true })
    }, 1500)
  })
}
//...
paymentRequest
  .show()
  .then(paymentResponse => {
    processPaymentWithServer(paymentResponse).then(data => {
      if (data.status) {
        paymentResponse.complete('success')
      } else {
        paymentResponse.complete('fail')
      }
    })
  })
  .catch(err => {
    console.log('Error:', err)
  })

在上面的示例中，瀏覽器支付UI將顯示一個處理屏幕，直到processPaymentWithServer()方法返回的承諾得到解決。我們還使用“成功”和“失敗”字符串來告訴瀏覽器交易結(jié)果。如果您調(diào)用complete('fail')瀏覽器將向用戶顯示錯誤消息。

如何取消付款請求

如果您想取消付款請求，因為沒有活動或任何其他原因，您可以使用PaymentRequest.abort()方法。它立即關(guān)閉付款請求UI，并拒絕show()承諾。

// ...
setTimeout(() => {
  paymentRequest
    .abort()
    .then(() => {
      // aborted payment request
      console.log('Payment request aborted due to no activity.')
    })
    .catch(err => {
      // error while aborting
      console.log('abort() Error: ', err)
    })
}, 5000)

結(jié)論

這就是JavaScript# Payment Request API快速介紹的結(jié)束。它提供了一種基于瀏覽器的方法來收集客戶付款和聯(lián)系信息，這些信息可以發(fā)送到后端服務(wù)器以處理付款。

以上就是JavaScrip如何安全使用Payment Request API詳解的詳細內(nèi)容，更多關(guān)于JavaScrip Payment Request API的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論