Paypal shows the amount as $3,574,989.00    when the actual current total_price is $35,749.89. Fix the issue: Cart.js: import styled from "styled-components";
import { useCartContext } from "./context/cart_context";
import CartItem from "./components/CartItem";
import { NavLink } from "react-router-dom";
import { Button } from "./styles/Button";
import FormatPrice from "./Helpers/FormatPrice";
import GooglePayButton from '@google-pay/button-react';
import { PayPalButtons, PayPalScriptProvider } from '@paypal/react-paypal-js';


const Cart = () => {
  const { cart, clearCart, total_price } = useCartContext();
  // console.log("🚀 ~ file: Cart.js ~ line 6 ~ Cart ~ cart", cart);


  if (cart.length === 0) {
    return (
      <EmptyDiv>
        <h3>No Cart in Item </h3>
      </EmptyDiv>
    );
  }

  return (
    <Wrapper>
      <div className="cart-cont">
        <div className="container">
            <div className="cart-user--profile">
              <h2 className="cart-user--name">Your Cart</h2>
            </div>

          <div className="cart_heading grid grid-five-column">
            <p>Item</p>
            <p className="cart-hide">Price</p>
            <p>Remove</p>
          </div>
          <hr />
          <div className="cart-item">
            {cart.map((curElem) => {
              return <CartItem key={curElem.id} {...curElem} />;
            })}
          </div>
          <hr />
          <div className="cart-two-button">
            <NavLink to="/products">
              <Button> continue Shopping </Button>
            </NavLink>
          </div>
        </div>
        {/* order total_amount */}
        <div className="order-total--amount">
          <div className="order-total--subdata">
            <div>
              <p>subtotal:</p>
              <p>
                <FormatPrice price={total_price} />
              </p>
            </div>
            <hr />
            <div>
              <p>order total:</p>
              <p>
                <FormatPrice price={total_price} />
              </p>
            </div>
            <div className="payment-buttons">
              <PayPalScriptProvider options={{ "client-id": "AaYNpLyiczSflrjiqZK8Zn8gcAtR5ZTmkn1tPVOH6oZf3wCeIXmOSpOCLANiT8_aF0J8sgYzwfoI4dMi" }}>
                  <PayPalButtons
                    style={{ layout: "vertical" }}
                  createOrder={(data, actions) => {
                    return actions.order.create({
                      purchase_units: [{
                        amount: {
                          value: total_price.toString(), // PayPal expects a string
                        },
                      }],
                    });
                  }}
                  onApprove={(data, actions) => {
                    // Capture the funds from the transaction
                    return actions.order.capture().then((details) => {
                      // Show a success message to your buyer
                      alert('Transaction completed by ' + details.payer.name.given_name);
                        // You can redirect to a success page
                      });
                  }}
                  />
              </PayPalScriptProvider>

              <GooglePayButton
                environment="TEST"
                  paymentRequest={{
                    apiVersion: 2,
                    apiVersionMinor: 0,
                    allowedPaymentMethods: [{
                      type: 'CARD',
                    parameters: {
                      allowedAuthMethods: ['PAN_ONLY'],
                    allowedCardNetworks: ['MASTERCARD', 'VISA'],
                          },
                    tokenizationSpecification: {
                      type: 'PAYMENT_GATEWAY',
                    // Check with your gateway on the parameters to include here
                    parameters: {
                              'gateway': 'example',
                    'gatewayMerchantId': 'exampleGatewayMerchantId'
                            },
                          },
                        }],
                    merchantInfo: {
                      // Add your merchant info here
                      merchantId: '12345678901234567890',
                    merchantName: 'Demo Merchant',
                        },
                    transactionInfo: {
                      totalPriceStatus: 'FINAL',
                      totalPriceLabel: 'Total',
                      totalPrice: total_price.toString(), // Google Pay expects string format
                      currencyCode: 'USD',
                      countryCode: 'US',
                      },
                    }}
                  onLoadPaymentData={paymentRequest => {
                    console.log('load payment data', paymentRequest);
                    }}
                  />
              </div>
          </div>
        </div>
      </div>
        
    </Wrapper>
  );
};

const EmptyDiv = styled.div`
  display: grid;
  place-items: center;
  height: 50vh;

  h3 {
    font-size: 4.2rem;
    text-transform: capitalize;
    font-weight: 300;
    color: black;
  }
`;

const Wrapper = styled.section`
  padding: 15rem 0px 15rem;

  p, h3 {
    color: black;
  }

  button, btn {
    color: white;
    border-radius: 10px;
  }

  .cart-cont {
    display: grid;
    justify-content: center;
    grid-template-columns: 1.5fr 0.7fr;
    margin: 0px auto;
  }

  .payment-buttons {
    display: flex !important;
    flex-direction: column-reverse;
  }

  .container{ 
    max-width: 70%;
  }

  button:hover, btn:hover {
    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
  }

  .grid-four-column {
    grid-template-columns: repeat(4, 1fr);
  }

  .grid-five-column {
    grid-template-columns: repeat(3, 1fr) 0.4fr;
    text-align: center;
    align-items: center;
  }
  .cart-heading {
    text-align: center;
    text-transform: uppercase;
  }
  hr {
    margin-top: 1rem;
  }
  .cart-item {
    padding: 3.2rem 0;
    display: flex;
    flex-direction: column;
    gap: 3.2rem;
  }

  .cart-user--profile {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 1.2rem;
    margin-bottom: 5.4rem;

    img {
      width: 8rem;
      height: 8rem;
      border-radius: 50%;
    }
    h2 {
      font-size: 2.4rem;
    }
  }
  .cart-user--name {
    text-transform: capitalize;
    color: black;
  }
  .cart-image--name {
    /* background-color: red; */
    align-items: center;
    display: grid;
    gap: 1rem;
    grid-template-columns: 0.4fr 1fr;
    text-transform: capitalize;
    text-align: left;
    img {
      max-width: 15rem;
      height: auto;
      object-fit: contain;
      color: transparent;
      border-radius: 10px;
    }

    .color-div {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 1rem;

      .color-style {
        width: 1.4rem;
        height: 1.4rem;

        border-radius: 50%;
      }
    }
  }

  .cart-two-button {
    margin-top: 2rem;
    display: flex;
    justify-content: space-between;

    .btn-clear {
      background-color: #e74c3c;
    }
  }

  .amount-toggle {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2.4rem;
    font-size: 1.4rem;

    button {
      border: none;
      background-color: #fff;
      cursor: pointer;
    }

    .amount-style {
      font-size: 2.4rem;
      color: ${({ theme }) => theme.colors.btn};
    }
  }

  .remove_icn {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .remove_icon {
    font-size: 1.6rem;
    color: #e74c3c;
    cursor: pointer;
  }

  .order-total--amount {
    max-width: 100%;
    margin: 12rem auto;
    text-transform: capitalize;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-end;

    .order-total--subdata {
      border: 0.1rem solid #f0f0f0;
      box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
      border-radius: 24px;
      display: flex;
      flex-direction: column;
      gap: 1.8rem;
      padding: 4.2rem;
    }
    div {
      display: flex;
      gap: 3.2rem;
      justify-content: space-between;
    }

    div:last-child {
      background-color: #fafafa;
    }

    div p:last-child {
      font-weight: bold;
      color: black;
    }
  }

  @media (max-width: ${({ theme }) => theme.media.mobile}) {
    padding: 15rem 0px 6rem;

    .grid-five-column {
      grid-template-columns: 1fr 1fr 0.5fr;
    }

    .cart-cont {
      display: grid;
      justify-content: center;
      grid-template-columns: 1fr;
      margin: 0px auto;
    }

    .container{ 
      max-width: 80%;
    }

    .cart-two-button {
      margin-top: 2rem;
      display: flex;
      justify-content: space-between;
      gap: 2.2rem;
    }

    .order-total--amount {
      width: 70%;
      text-transform: capitalize;
      justify-content: flex-start;
      align-items: flex-start;

      .order-total--subdata {
        width: 100%;
        border: 0.1rem solid #f0f0f0;
        display: flex;
        flex-direction: column;
        gap: 1.8rem;
        padding: 3.2rem;
      }
    }
  }
`;

export default Cart;