引言

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

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

Payment Request API瀏覽器支持

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

在開(kāi)始提出付款請(qǐng)求之前，您應(yīng)該進(jìn)行功能檢測(cè)，以確保瀏覽器支持API：

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

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

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

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

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

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

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

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ò)和卡片類(lèi)型。例如，只有以下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ù)的第二個(gè)參數(shù)是付款詳細(xì)信息對(duì)象。它包含訂單總數(shù)和可選的顯示項(xiàng)目數(shù)組。total參數(shù)必須包括一個(gè)label參數(shù)和一個(gè)帶有currency和value``amount參數(shù)。

您還可以添加其他顯示項(xiàng)目，以提供總數(shù)的高級(jí)細(xì)分：

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ù)并不意味著顯示一長(zhǎng)長(zhǎng)的項(xiàng)目列表。由于移動(dòng)設(shè)備上瀏覽器的支付用戶界面的空間有限，您應(yīng)該使用此參數(shù)僅顯示頂級(jí)字段，如小計(jì)、折扣、稅費(fèi)、運(yùn)費(fèi)等。

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ù)請(qǐng)求更多詳細(xì)信息

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

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

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

如何顯示付款用戶界面

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

show()方法返回一個(gè)承諾，如果用戶成功填寫(xiě)了詳細(xì)信息，則該promise將使用aPaymentResponse對(duì)象解決。如果出現(xiàn)錯(cuò)誤或用戶關(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)
  })

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

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

如果您想在付款用戶界面顯示旋轉(zhuǎn)器時(shí)致電后端服務(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將顯示一個(gè)處理屏幕，直到processPaymentWithServer()方法返回的承諾得到解決。我們還使用“成功”和“失敗”字符串來(lái)告訴瀏覽器交易結(jié)果。如果您調(diào)用complete('fail')瀏覽器將向用戶顯示錯(cuò)誤消息。

如何取消付款請(qǐng)求

如果您想取消付款請(qǐng)求，因?yàn)闆](méi)有活動(dòng)或任何其他原因，您可以使用PaymentRequest.abort()方法。它立即關(guān)閉付款請(qǐng)求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é)束。它提供了一種基于瀏覽器的方法來(lái)收集客戶付款和聯(lián)系信息，這些信息可以發(fā)送到后端服務(wù)器以處理付款。

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