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 (
   
     {/* {isLoading ? (
       
         
       
     ) : ( */}
     {isLoading && (
       
         
       
     )}
      {
         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 {};
       // }}
     />
     {/* )} */}
   
 );
}

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

export default GooglePay;

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