Integrating H5 Payment Request API for E-commerce
Jul 19, 2025 am 03:25 AM
To implement e-commerce payment requests, you can integrate mainstream payment methods through the Payment Request API and improve the experience, but you need to pay attention to details. 1. Confirm the supported payment methods and browser compatibility: Chrome and Edge support are better, WeChat built-in browsers are limited, and some Android manufacturers may have problems with browsers, so they can be detected if (window.PaymentRequest); 2. Prepare payment data structure: the product amount, total price, and payment method parameters cannot be wrong, such as total, displayItems and payment method format; 3. Initiate payment process: Create an instance → call show() → process results, pay attention to asynchronous processing and error capture, and consider mobile jump logic; 4. Key points of testing before going online: different browsers evoke situations, success/failure callbacks, user cancel processing, back-end verification of payment results, it is recommended to multiple rounds of testing in the sandbox environment.
It is actually not that difficult to implement e-commerce payment requests with H5, especially through the Payment Request API. It can help you quickly integrate mainstream payment methods and improve user payment experience. However, there are many details to pay attention to, such as compatibility and parameter configuration.
1. Confirm supported payment methods and browser compatibility
Not all browsers fully support the Payment Request API, especially some domestic customized browsers may perform inconsistently. Before starting, it is best to confirm whether the payment methods you want to support (such as Alipay, WeChat Pay, UnionPay, etc.) can be implemented through this API.
- Mainstream browsers such as Chrome and Edge have better support
- WeChat built-in browser has restrictions on some payment methods
- Some Android manufacturers may have compatibility issues with browsers
It is recommended to do a simple test:
if (window.PaymentRequest) {
// You can use PaymentRequest
} else {
// Prompt the user to use other payment methods}2. Prepare payment data structure: The basic parameters cannot be wrong
When calling the Payment Request API, an object containing payment information needs to be passed in, mainly including the product amount, total price, payment method, etc. If this part is written incorrectly, payment cannot be initiated.
The example structure is as follows:
const paymentDetails = {
Total: {
label: 'Total payable',
amount: { currency: 'CNY', value: '100.00' }
},
displayItems: [{
label: 'Product A',
amount: { currency: 'CNY', value: '100.00' }
}]
}; Pay special attention to the format of the payment method field. For example, WeChat payment generally uses basic-card or specific identifiers, and it depends on the platform documentation instructions for details.
3. Basic process for initiating payment requests
The entire process is roughly: Create a PaymentRequest instance → Display the payment interface → Process the user operation results. This process seems simple, but the prone to errors is asynchronous processing and error capture.
The process is as follows:
- Create an instance:
new PaymentRequest(methodData, details, options) - Call
show()method to pop up the payment interface - After the user completes the payment, he will get the response object for subsequent processing.
- Remember to add
.catch()to catch exceptions, such as user cancellation or network failure
It should be noted here that in the mobile H5 page, some browsers will jump to the external page to complete payment, and at this time, you should consider returning logic and order status updates.
4. Key points that must be tested before going online
Although it is not too complicated to develop, there are several key points that must be tested clearly before going online:
- Can the payment interface be activated normally under different browsers?
- Is the callback after successful/failed payment executed correctly?
- Whether the user cancellation was handled
- Is the backend able to correctly receive and verify payment results?
It is recommended to run the process several times in a sandbox environment, especially the parameters such as amount and currency units, so don’t make any mistakes.
Basically that's it. Payment Request API is a good tool. It can save a lot of trouble if you use it well, but don’t ignore the details, otherwise it will be easy to qualify for online problems.
The above is the detailed content of Integrating H5 Payment Request API for E-commerce. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undress AI Tool
Undress images for free
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
What platforms does e-commerce include?
Aug 24, 2023 am 11:05 AM
E-commerce platforms include Amazon, Alibaba, JD.com, eBay, Walmart, etc. Detailed introduction: 1. Amazon, one of the world's largest e-commerce platforms, provides online purchasing services for a variety of goods, and has its own logistics system that can quickly deliver goods; 2. Alibaba, China's largest e-commerce platform, has It has well-known brands such as Taobao and Tmall, providing consumers with a wealth of product choices; 3. JD.com, China’s second largest e-commerce platform, is also a comprehensive e-commerce enterprise; 4. eBay, Walmart and other internationally renowned e-commerce companies business platform and so on.
Teach you step by step how to subcontract uniapp and mini programs (pictures and text)
Jul 22, 2022 pm 04:55 PM
This article brings you relevant knowledge about uniapp cross-domain, and introduces issues related to subcontracting of uniapp and mini programs. Each mini program that uses subcontracting must contain a main package. The so-called main package is where the default startup page/TabBar page is placed, and some public resources/JS scripts are required for all sub-packages; while sub-packages are divided according to the developer's configuration. I hope it will be helpful to everyone.
Taobao platform changes dispute handling rules to promote rapid returns and refunds
Dec 31, 2023 pm 08:56 PM
According to news from this website on December 26, Taobao announced that it plans to change the relevant rules of the Taobao platform’s dispute handling rules, which will officially take effect today. Judging from the new regulations, if a seller has negative reviews or has too many violations, he or she may be directly judged to return or refund the product after receiving complaints. The core change point is that Taobao has added a new function based on the platform's own big data capabilities, which can identify multiple aspects of information, and formulate rules for quick refunds or returns based on the after-sales requirements initiated by buyers that meet the relevant circumstances. In order to solve the problem We need to supplement the rules for payment processing directions due to sellers' delayed shipments, forced shipments, and without the buyer's consent. For products that support 7-day no-reason returns or that are judged by the platform to be rejected by the buyer, we need to add If the buyer successfully refuses the visa, the refund office will be supported
How to use Vue to implement e-commerce product classification effects
Sep 19, 2023 am 11:54 AM
How to use Vue to implement e-commerce product classification effects In e-commerce websites, product classification is a very important function, which can help users quickly find the products they are interested in. Using the Vue framework to implement product classification effects can give users a good user experience when browsing products. This article will introduce how to use Vue to implement e-commerce product classification effects, and give detailed code examples. First, we need to create a Vue instance and define the structure of the product category in the template. Suppose our product classification has three levels, namely
Counterfeit Paris Olympic medals are selling well on e-commerce platforms, but lawyers say there is a risk of infringement
Aug 12, 2024 pm 01:30 PM
According to news from this website on August 12, the Paris Olympic Games has concluded. According to China Business News, a large number of imitation "Olympic medals" have appeared on multiple e-commerce platforms. These imitations are sold on platforms such as Pinduoduo, Taobao, JD.com and Douyin. Their appearance is almost the same as the medals won by athletes in the Paris Olympics, and the prices range from 111 yuan to 402 yuan. On Taobao, "an 'Olympic medal'" was purchased by more than 100 people within a week, and more than 1,000 people added it to their shopping carts. On Pinduoduo, an "Olympic medal" is priced at 117.99 yuan, and 231 pieces have been sold. The product on JD.com is directly labeled as "2024 Paris Olympic Games medal model collection 1:1 replica souvenir". Most merchants on Douyin avoid the words "Paris Olympics" and emphasize that it is
PHP e-commerce system development: user experience design
Jun 05, 2024 pm 08:21 PM
Yes, excellent user experience (UX) is crucial in PHP e-commerce systems. In order to create a system with great UX, follow these steps: Simplify navigation: use clear categories, search bar, and filtering options. Present product information: Use high-quality images, detailed descriptions, and customer reviews. Shopping Cart Usability: Simplify adding and removing products, provide shopping cart summary and checkout notifications. Checkout process: Supports multiple payment methods, shipping options, and order summary.
Is WordPress suitable for e-commerce?
May 13, 2025 am 12:05 AM
Yes, WordPress is very suitable for e-commerce. 1) With the WooCommerce plugin, WordPress can quickly become a fully functional online store. 2) Pay attention to performance optimization and security, and regular updates and use of caches and security plug-ins are the key. 3) WordPress provides a wealth of customization options to improve user experience and significantly optimize SEO.
Swoole e-commerce case practice: creating a high-concurrency flash sale system
Jun 13, 2023 pm 03:09 PM
With the continuous development of the e-commerce market, more and more companies are beginning to pay attention to the development of high-concurrency flash sale systems to improve user experience and increase sales. This article will explain how to build a high-concurrency flash sale system through Swoole e-commerce case practice. 1. What is a high-concurrency flash sale system? A high-concurrency flash sale system refers to a system that can run smoothly even when a large number of users access, submit orders, make payments and other operations at the same time in a short period of time. In e-commerce, it generally means that during an event, thousands of users may participate at the same time, and the system needs to be able to cope with this
