


How to create a simple shopping cart in HTMLCSSand JS with Payment integration
If you want to create your own shopping cart in HTM5, CSS3, and JS, you are in the right place! This is how to create a shopping cart. This also includes Payment integration from the Payment Request API!
1. Create the files
Create a folder and put these files in it:
- index.html
- style.css
- script.js
2. Add HTML
Put this in index.html:
<meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Shopping Cart</title> <link rel="stylesheet" href="styles.css"> <div class="products"> <div class="product"> <h2 id="Product">Product 1</h2> <p>$10</p> <button onclick="addToCart('Product 1', 10)">Add to Cart</button> </div> <!-- Add more products as needed --> </div> <div class="cart"> <h2 id="Shopping-Cart">Shopping Cart</h2> <ul id="cart-items"></ul> <p>Total: $<span id="cart-total">0</span></p> </div> <script src="script.js"></script>
3. Add CSS
Put this in style.css:
.products, .cart { margin: 20px; } .product, .cart-item { margin-bottom: 10px; }
4. Add Javascript
Put this in script.js:
let cart = []; function addToCart(name, price) { const item = cart.find(product => product.name === name); if (item) { item.quantity++; } else { cart.push({ name, price, quantity: 1 }); } updateCart(); } function removeFromCart(name) { cart = cart.filter(product => product.name !== name); updateCart(); } function updateCart() { const cartItems = document.getElementById('cart-items'); const cartTotal = document.getElementById('cart-total'); cartItems.innerHTML = ''; let total = 0; cart.forEach(product => { const li = document.createElement('li'); li.textContent = `${product.name} - $${product.price} x ${product.quantity}`; const removeButton = document.createElement('button'); removeButton.textContent = 'Remove'; removeButton.onclick = () => removeFromCart(product.name); li.appendChild(removeButton); cartItems.appendChild(li); total += product.price * product.quantity; }); cartTotal.textContent = total; } const paymentRequest = new PaymentRequest( [ { supportedMethods: 'basic-card', data: { supportedNetworks: ['visa', 'mastercard'], }, }, ], { total: { label: 'Total', amount: { currency: 'USD', value: '10.00' }, }, } ); paymentRequest.show().then((paymentResponse) => { // Process the payment console.log(paymentResponse); // Complete the payment paymentResponse.complete('success').then(() => { console.log('Payment completed successfully'); }); }).catch((error) => { console.error('Payment failed', error); });
5. Explaining the JS file
1. Shopping cart functionality
- Initialize the cart
let cart = [];
- cart: An empty array to store items added to the cart.
2 Add items to the cart
function addToCart(name, price) { const item = cart.find(product => product.name === name); if (item) { item.quantity++; } else { cart.push({ name, price, quantity: 1 }); } updateCart(); }
- addToCart(name, price): Function to add items to the cart.
- cart.find(product => product.name === name): Searches for an item in the cart by name.
- if(item): If an item is found, it increments the quantity.
- else: If the item is not found, it adds a new item to the cart with the specified name, price, and a quantity of 1.
- updateCart(): Calls the updateCart function to refresh the cart display.
3 Remove items from the cart
function removeFromCart(name) { cart = cart.filter(product => product.name !== name); updateCart(); }
- removeFromCart(name): Function to remove items from the cart.
- cart.filter(product => product.name !== name): Filters out the item with the specified name from the cart.
- updateCart(): Calls the updateCart function to refresh the cart display.
4 Update the cart display
function updateCart() { const cartItems = document.getElementById('cart-items'); const cartTotal = document.getElementById('cart-total'); cartItems.innerHTML = ''; let total = 0; cart.forEach(product => { const li = document.createElement('li'); li.textContent = `${product.name} - $${product.price} x ${product.quantity}`; const removeButton = document.createElement('button'); removeButton.textContent = 'Remove'; removeButton.onclick = () => removeFromCart(product.name); li.appendChild(removeButton); cartItems.appendChild(li); total += product.price * product.quantity; }); cartTotal.textContent = total; }
- updateCart(): Function that updates the cart display.
- cartItems: Gets the HTML element with the ID cart-items.
- cartTotal: Gets the HTML element with the ID cart-total.
- cartItems.innerHTML = '': Clears the current cart items display.
- let total = 0: Initializes the total amount to 0.
- cart.forEach(product => { ... }): Iterates over each product in the cart.
- document.createElement('li'): Creates a new list item element.
- li.textContent = ${product.name} - $${product.price} x ${product.quantity}: Sets the text content of the list item.
- document.createElement(‘button’): Creates a new button element.
- removeButton.textContent = 'Remove': Sets the text content of the button.
- removeButton.onclick = () => removeFromCart(product.name): Sets the button’s click event to call removeFromCart.
- li.appendChild(removeButton): Adds the button to the list item.
- cartItems.appendChild(li): Adds the list item to the cart items display.
- total += product.price * product.quantity: Adds the product's total price to the total amount.
- cartTotal.textContent = total: Updates the total amount display.
Payment Request API
- Create a Payment Request object
const paymentRequest = new PaymentRequest( [ { supportedMethods: 'basic-card', data: { supportedNetworks: ['visa', 'mastercard'], }, }, ], { total: { label: 'Total', amount: { currency: 'USD', value: '10.00' }, }, } );
- PaymentRequest: Creates a new payment request.
- supportedMethods: Specifies the payment methods supported (e.g., ‘basic-card’).
- data: Contains additional information about the payment method, such as supported networks.
- total: Represents the total amount to be charged.
2 Show the Payment Request
paymentRequest.show().then((paymentResponse) => { // Process the payment console.log(paymentResponse); // Complete the payment paymentResponse.complete('success').then(() => { console.log('Payment completed successfully'); }); }).catch((error) => { console.error('Payment failed', error); });
- show(): Displays the payment interface to the user.
- then((paymentResponse) => { ... }): If the user approves the payment, this promise resolves with a paymentResponse object.
- paymentResponse: Contains the user’s payment details.
- console.log(paymentResponse): Logs the payment response for processing.
- catch((error) => { ... }): If the payment fails or is canceled, this promise catches the error and logs it.
Summary
This code manages a shopping cart by adding, removing, and updating items, and then processes a payment using the Payment Request API. If you have any more questions or need further clarification, feel free to ask in the comments!
Conclusion
That concludes my article about creating a shopping cart with payment integration in HTML5, CSS3, and JS! Make sure to leave a comment and a reaction and check out more of my stuff!
The above is the detailed content of How to create a simple shopping cart in HTMLCSSand JS with Payment integration. For more information, please follow other related articles on the PHP Chinese website!

Custom cursors with CSS are great, but we can take things to the next level with JavaScript. Using JavaScript, we can transition between cursor states, place dynamic text within the cursor, apply complex animations, and apply filters.

Interactive CSS animations with elements ricocheting off each other seem more plausible in 2025. While it’s unnecessary to implement Pong in CSS, the increasing flexibility and power of CSS reinforce Lee's suspicion that one day it will be a

Tips and tricks on utilizing the CSS backdrop-filter property to style user interfaces. You’ll learn how to layer backdrop filters among multiple elements, and integrate them with other CSS graphical effects to create elaborate designs.

Well, it turns out that SVG's built-in animation features were never deprecated as planned. Sure, CSS and JavaScript are more than capable of carrying the load, but it's good to know that SMIL is not dead in the water as previously

Yay, let's jump for text-wrap: pretty landing in Safari Technology Preview! But beware that it's different from how it works in Chromium browsers.

This CSS-Tricks update highlights significant progress in the Almanac, recent podcast appearances, a new CSS counters guide, and the addition of several new authors contributing valuable content.

Most of the time, people showcase Tailwind's @apply feature with one of Tailwind's single-property utilities (which changes a single CSS declaration). When showcased this way, @apply doesn't sound promising at all. So obvio

Deploying like an idiot comes down to a mismatch between the tools you use to deploy and the reward in complexity reduced versus complexity added.


Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

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

Atom editor mac version download
The most popular open source editor

MinGW - Minimalist GNU for Windows
This project is in the process of being migrated to osdn.net/projects/mingw, you can continue to follow us there. MinGW: A native Windows port of the GNU Compiler Collection (GCC), freely distributable import libraries and header files for building native Windows applications; includes extensions to the MSVC runtime to support C99 functionality. All MinGW software can run on 64-bit Windows platforms.

Zend Studio 13.0.1
Powerful PHP integrated development environment

WebStorm Mac version
Useful JavaScript development tools
