search
HomeWeb Front-endCSS TutorialHow to create a simple shopping cart in HTMLCSSand JS with Payment integration

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

  1. 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

  1. 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!

Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Next Level CSS Styling for CursorsNext Level CSS Styling for CursorsApr 23, 2025 am 11:04 AM

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.

Worlds Collide: Keyframe Collision Detection Using Style QueriesWorlds Collide: Keyframe Collision Detection Using Style QueriesApr 23, 2025 am 10:42 AM

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

Using CSS backdrop-filter for UI EffectsUsing CSS backdrop-filter for UI EffectsApr 23, 2025 am 10:20 AM

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.

SMIL on?SMIL on?Apr 23, 2025 am 09:57 AM

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

'Pretty' is in the eye of the beholder'Pretty' is in the eye of the beholderApr 23, 2025 am 09:40 AM

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.

CSS-Tricks Chronicles XLIIICSS-Tricks Chronicles XLIIIApr 23, 2025 am 09:35 AM

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.

Tailwind's @apply Feature is Better Than it SoundsTailwind's @apply Feature is Better Than it SoundsApr 23, 2025 am 09:23 AM

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

Feeling Like I Have No Release: A Journey Towards Sane DeploymentsFeeling Like I Have No Release: A Journey Towards Sane DeploymentsApr 23, 2025 am 09:19 AM

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.

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

Atom editor mac version download

Atom editor mac version download

The most popular open source editor

MinGW - Minimalist GNU for Windows

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

Zend Studio 13.0.1

Powerful PHP integrated development environment

WebStorm Mac version

WebStorm Mac version

Useful JavaScript development tools