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:
<!DOCTYPE html>
<html lang="en">
<head>
<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">
</head>
<body>
<div class="products">
<div class="product">
<h2>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>Shopping Cart</h2>
<ul id="cart-items"></ul>
<p>Total: $<span id="cart-total">0</span></p>
</div>
<script src="script.js"></script>
</body>
</html>
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
updateCartfunction 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
updateCartfunction 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
paymentResponseobject. - 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!
Top comments (0)