将购物车价值整合到 google pay 中的 react js

Question

am stuck with a problem, I want to integrate shopping cart value in my google pay when I click pay with google button , I want to display amount those I selected, can anyone tell me how can I do it??

Here am using react-use-cart package for add to cart product for integrate google pay i used @google-pay/button-react npm package

import React from 'react';
import { useCart } from 'react-use-cart';
import GooglePayButton from '@google-pay/button-react';

const Cart = () => {

    const {
        isEmpty,
        totalUniqueItems,
        items,
        totalItems,
        cartTotal,
        updateItemQuantity,
        removeItem,
        emptyCart,
    } = useCart();
    if (isEmpty) return <h1 className="text-center">Your Cart is Empty</h1>
    return (
        <section className="py-4 container">
            <div className="row justify-content-center">
                <div className="col-12">
                    <h5 className="mb-5">Cart({totalUniqueItems}) total Items:({totalItems})</h5>
                    <table className="table table-light table-hover m-0  shadow p-2 mb-3">
                        <tbody>
                            {items.map((fruit, index) => {
                                return (
                                    <tr key={index} >
                                        <td>
                                            <img className="img-fluid" src={fruit.img} style={{ height: '5rem', marginRight: '10px' }} />
                                        </td>
                                        <td>
                                            {fruit.title}
                                        </td>
                                        <td>
                                            {fruit.price}
                                        </td>
                                        <td>
                                            Quantity({fruit.quantity})
                                        </td>
                                        <td>
                                            <button className="btn btn-info ms-2 mr-2 " onClick={() => updateItemQuantity(fruit.id, fruit.quantity - 1)}>-</button>
                                            <button className="btn btn-info ms-2 mr-2" onClick={() => updateItemQuantity(fruit.id, fruit.quantity + 1)}>+</button>
                                            <button className="btn btn-danger ms-2" onClick={() => removeItem(fruit.id)}>Remove Item</button>
                                        </td>
                                    </tr>
                                )
                            })}
                        </tbody>
                    </table>
                </div>
                <div className="col-auto mx-auto">
                    <h2>Total Price: ${cartTotal}</h2>
                </div>
                <div className="col-auto"  >
                    <button className="btn btn-danger btn-block mt-2" onClick={() => emptyCart()}>Clear cart</button>
                    <GooglePayButton
                        environment="TEST"
                        paymentRequest={{
                            apiVersion: 2,
                            apiVersionMinor: 0,
                            allowedPaymentMethods: [
                                {
                                    type: 'CARD',
                                    parameters: {
                                        allowedAuthMethods: ['PAN_ONLY', 'CRYPTOGRAM_3DS'],
                                        allowedCardNetworks: ['MASTERCARD', 'VISA'],
                                    },
                                    tokenizationSpecification: {
                                        type: 'PAYMENT_GATEWAY',
                                        parameters: {
                                            gateway: 'example',
                                            gatewayMerchantId: 'exampleGatewayMerchantId',
                                        },
                                    },
                                },
                            ],
                            merchantInfo: {
                                merchantId: '12345678901234567890',
                                merchantName: 'Demo Merchant',
                            },
                            transactionInfo: {
                                totalPriceStatus: 'FINAL',
                                totalPriceLabel: 'Total',
                                totalPrice: '100.00',
                                currencyCode: 'USD',
                                countryCode: 'US',
                            },
                        }}
                        onLoadPaymentData={paymentRequest => {
                            alert('Payment success', paymentRequest);
                        }}
                    />
                </div>
            </div>
        </section>
    )
}

export default Cart

Answer 1

You need to set the transactionInfo.totalPrice field based your cartTotal .

Based on your example, it would look something like this:

<GooglePayButton
    environment="TEST"
    paymentRequest={{
        apiVersion: 2,
        apiVersionMinor: 0,
        allowedPaymentMethods: [
            {
                type: 'CARD',
                parameters: {
                    allowedAuthMethods: ['PAN_ONLY', 'CRYPTOGRAM_3DS'],
                    allowedCardNetworks: ['MASTERCARD', 'VISA'],
                },
                tokenizationSpecification: {
                    type: 'PAYMENT_GATEWAY',
                    parameters: {
                        gateway: 'example',
                        gatewayMerchantId: 'exampleGatewayMerchantId',
                    },
                },
            },
        ],
        merchantInfo: {
            merchantId: '12345678901234567890',
            merchantName: 'Demo Merchant',
        },
        transactionInfo: {
            totalPriceStatus: 'FINAL',
            totalPriceLabel: 'Total',
            totalPrice: cartTotal,
            currencyCode: 'USD',
            countryCode: 'US',
        },
    }}
    onLoadPaymentData={paymentRequest => {
        alert('Payment success', paymentRequest);
    }}
/>

Notice that it includes a single line change: totalPrice: cartTotal .

Answer 2

transactionInfo: {
                                totalPriceStatus: 'FINAL',
                                totalPriceLabel: 'Total',
                                totalPrice: '<!Look description below!>',
                                currencyCode: 'USD',
                                countryCode: 'US',
                            },

You should put the total-price from cart state to string totalPrice in your code (transactionInfo parapeters)