pc端对接googlepay

对接googlepay 其实很简单， 官方文档也挺友好的
直接上代码：

import React, { useState, useEffect, useRef } from 'react';
import PropTypes from 'prop-types';
import * as _ from 'lodash';
import GooglePayButton from '@google-pay/button-react';
import {
 ButtonWrapper,
 ProgressWrapper,
} from 'pages/shared/CheckoutPage/PaypalButton/PaypalButton.styles';
import { CircularProgress, Box } from '@chakra-ui/react';
// Fin currently only supports these four types;
// allowedCardNetworks = ["AMEX", "DISCOVER", "MASTERCARD", "VISA"];

function GooglePay({ onSave, initiateResponse }) {
 const googleBtn = useRef(null);
 const [isLoading, setIsLoading] = useState(true);
 useEffect(() => {
   window.googleInterval = setInterval(() => {
     console.log(googleBtn.current);
     if (googleBtn.current?.elementRef.current.innerHTML) {
       setIsLoading(false);
       clearInterval(window.googleInterval);
     }
   }, 100);
   return () => clearInterval(window.googleInterval);
   // eslint-disable-next-line react-hooks/exhaustive-deps
 }, []);
 return (
   <Box h="48px">
     {/* {isLoading ? (
       <ProgressWrapper>
         <CircularProgress isIndeterminate color="#757575" />
       </ProgressWrapper>
     ) : ( */}
     {isLoading && (
       <ProgressWrapper>
         <CircularProgress isIndeterminate color="#757575" />
       </ProgressWrapper>
     )}
     <GooglePayButton
       ref={googleBtn}
       style={{
         borderRadius: '4px',
         width: '100%',
         display: isLoading ? 'none' : 'block',
       }}
       buttonColor="black"
       buttonLocale="us"
       buttonSizeMode="fill"
       buttonType="buy"
       environment="TEST"
       paymentRequest={{
         apiVersion: 2,
         apiVersionMinor: 0,
         allowedPaymentMethods: [
           {
             type: 'CARD',
             parameters: {
               allowedAuthMethods: ['PAN_ONLY', 'CRYPTOGRAM_3DS'],
               allowedCardNetworks: ['AMEX', 'DISCOVER', 'MASTERCARD', 'VISA'],
               billingAddressRequired: true,
             },
             tokenizationSpecification: {
               type: 'PAYMENT_GATEWAY',
               parameters: {
                 gateway: 'chase',
                 gatewayMerchantId: '190106',
               },
             },
           },
         ],

         // callbackIntents: ['SHIPPING_ADDRESS', 'PAYMENT_AUTHORIZATION'],
         merchantInfo: {
           // merchantId: '12345678901234567890',
           merchantName: 'Demo Merchant',
         },
         transactionInfo: {
           totalPriceStatus: 'FINAL',
           totalPriceLabel: 'Total',
           totalPrice: `${initiateResponse.totalToPay}`,
           currencyCode: 'USD',
           countryCode: 'US',
         },
       }}
       existingPaymentMethodRequired="false"
       onLoadPaymentData={(paymentRequest) => {
         console.log('Success11', paymentRequest);
         const {
           paymentMethodData: { description, info, tokenizationData },
         } = paymentRequest;
         const { protocolVersion, signature, signedMessage } =
           JSON.parse(tokenizationData.token) || {};
         onSave({
           billingAddressInfo: {
             active: false,
             addressLine1: info.billingAddress.address,
             addressLine2: '',
             city: info.billingAddress.city || '',
             commercial: false,
             country: info.billingAddress.countryCode || '',
             defaultShippingAddress: false,
             state: info.billingAddress.state || '',
             verified: false,
             zipCode: info.billingAddress.postalCode || '',
           },
           cardType:
             info.cardNetwork === 'MASTERCARD'
               ? 'MasterCard'
               : info.cardNetwork.substring(0, 1).toUpperCase() +
                 info.cardNetwork.substring(1).toLowerCase(),
           cartInfo: info.cardNetwork,
           digitalWalletLatitudeLongitude: '1,1',
           digitalWalletType: 'GooglePay',
           googlePayEncryptedPaymentBundle: {
             protocolVersion,
             signature,
             signedMessage,
           },
           traceNumber: info.cardDetails,
         });
       }}
       // onError={(error) => {
       //   if (error instanceof Error) {
       //     console.log('Error', error, error.message, error.stack);
       //   } else {
       //     console.log('Error', error.statusCode, error.statusMessage);
       //   }
       // }}
       // onPaymentAuthorized={(paymentData) => ({
       //   transactionState: 'ERROR',
       //   error: {
       //     reason: 'PAYMENT_DATA_INVALID',
       //     message: 'Insufficient funds',
       //     intent: 'PAYMENT_AUTHORIZATION',
       //   },
       // })}
       // onPaymentAuthorized={(paymentData) => {
       //   console.log('Payment Authorised Success', paymentData);
       //   return { transactionState: 'SUCCESS' };
       // }}
       // onPaymentDataChanged={(paymentData) => {
       //   console.log('On Payment Data Changed', paymentData);
       //   return {};
       // }}
     />
     {/* )} */}
   </Box>
 );
}

GooglePay.propTypes = {
 onSave: PropTypes.func.isRequired,
 initiateResponse: PropTypes.func.isRequired,
};

export default GooglePay;

直接使用的：@google-pay/button-react
还有一些对应的配置list 展示就查看官方文档吧，这方面的博客也多