Google pay integration using Authorize.net

Question

I have a code for this but not able to save card details as it is giving error while saving the card details. Can anyone please help me to know why I am not able to save and do successful payment.

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/AdminMaster.Master" AutoEventWireup="true"
    CodeBehind="GooglePay.aspx.cs" Inherits="PaymentProcessor.Web.Views.Profile.GooglePay" %>

<asp:Content ID="Content2" ContentPlaceHolderID="MCPH" runat="server">

<script type="text/javascript">
const baseRequest = {
  apiVersion: 2,
    apiVersionMinor: 0,
};
const allowedCardNetworks = ["AMEX", "DISCOVER", "INTERAC", "JCB", "MASTERCARD", "VISA"];

const allowedCardAuthMethods = ["PAN_ONLY", "CRYPTOGRAM_3DS"];

const tokenizationSpecification = {
  type: 'PAYMENT_GATEWAY',
  parameters: {
    'gateway': 'example',
    'gatewayMerchantId': 'exampleGatewayMerchantId'
  }
};

const baseCardPaymentMethod = {
  type: 'CARD',
  parameters: {
    allowedAuthMethods: allowedCardAuthMethods,
    allowedCardNetworks: allowedCardNetworks
  }
};

const cardPaymentMethod = Object.assign(
  {},
  baseCardPaymentMethod,
  {
    tokenizationSpecification: tokenizationSpecification
  }
);
let paymentsClient = null;

function getGoogleIsReadyToPayRequest() {
  return Object.assign(
      {},
      baseRequest,
      {
        allowedPaymentMethods: [baseCardPaymentMethod]
      }
  );
}

function getGooglePaymentDataRequest() {
  const paymentDataRequest = Object.assign({}, baseRequest);
  paymentDataRequest.allowedPaymentMethods = [cardPaymentMethod];
  paymentDataRequest.transactionInfo = getGoogleTransactionInfo();
  paymentDataRequest.merchantInfo = {
    // @todo a merchant ID is available for a production environment after approval by Google
    // See {@link https://developers.google.com/pay/api/web/guides/test-and-deploy/integration-checklist|Integration checklist}
    // merchantId: '12345678901234567890',
    merchantName: 'Example Merchant'
  };
  return paymentDataRequest;
}

function getGooglePaymentsClient() {
  if ( paymentsClient === null ) {
    paymentsClient = new google.payments.api.PaymentsClient({environment: 'TEST'});
  }
  return paymentsClient;
}

function onGooglePayLoaded() {
  const paymentsClient = getGooglePaymentsClient();
  paymentsClient.isReadyToPay(getGoogleIsReadyToPayRequest())
      .then(function(response) {
        if (response.result) {
          addGooglePayButton();
          // @todo prefetch payment data to improve performance after confirming site functionality
          // prefetchGooglePaymentData();
        }
      })
      .catch(function(err) {
        // show error in developer console for debugging
        console.error(err);
      });
}

function addGooglePayButton() {
  const paymentsClient = getGooglePaymentsClient();
  const button =
      paymentsClient.createButton({
        onClick: onGooglePaymentButtonClicked,
        allowedPaymentMethods: [baseCardPaymentMethod]
      });
  document.getElementById('container').appendChild(button);
}

function getGoogleTransactionInfo() {
  return {
    countryCode: 'US',
    currencyCode: 'USD',
    totalPriceStatus: 'FINAL',
    // set to cart total
    totalPrice: '1.00'
  };
}

function prefetchGooglePaymentData() {
  const paymentDataRequest = getGooglePaymentDataRequest();
  // transactionInfo must be set but does not affect cache
  paymentDataRequest.transactionInfo = {
    totalPriceStatus: 'NOT_CURRENTLY_KNOWN',
    currencyCode: 'USD'
  };
  const paymentsClient = getGooglePaymentsClient();
  paymentsClient.prefetchPaymentData(paymentDataRequest);
}

/**
 * Show Google Pay payment sheet when Google Pay payment button is clicked
 */
function onGooglePaymentButtonClicked() {
  const paymentDataRequest = getGooglePaymentDataRequest();
  paymentDataRequest.transactionInfo = getGoogleTransactionInfo();

  const paymentsClient = getGooglePaymentsClient();
  paymentsClient.loadPaymentData(paymentDataRequest)
      .then(function(paymentData) {
        // handle the response
        processPayment(paymentData);
      })
      .catch(function(err) {
        // show error in developer console for debugging
        console.error(err);
      });
}

function processPayment(paymentData) {
  paymentToken = paymentData.paymentMethodData.tokenizationData.token;
}</script>
    
<script type="text/javascript" src="https://pay.google.com/gp/p/js/pay.js"  onload="onGooglePayLoaded()"></script>
</asp:Content>

I want to save card details successfully

Payments - Integration - google pay 1. Initialize a PaymentClient object within your .NET web application to serve as the interface for handling Google Pay interactions. This client will facilitate communication with Google Pay services. 2. Call the ReadyToPay API to assess the user's readiness for making a payment. Using this Api you can determine whether the user has a valid payment method on file and is in a supported browser. 3. If the ReadyToPay api returns false,it is recommended not to render the google pay button. 4. If the user is ready to make payment we have to call second Api (createButton).Implement the createButton API to ensure the proper integration of the Google Pay branding according to the latest guidelines. This step ensures consistency and adherence to Google's branding requirements. 5. Once we add the button to the site and the user clicks on the button you will call the loadPaymentData to open up the payment sheet. 6. Construct a PaymentDataRequest object that encapsulates the necessary payment configurations for the transaction. This includes specifying the amount to be charged and any additional metadata required for processing. 7. Configure tokenization parameters within the PaymentDataRequest object to encrypt sensitive user card information securely. This encryption ensures that payment data remains protected during transmission and processing. 8. Follow the integration guidelines provided by the payment processor to finalize the payment transaction. This may involve additional steps or specific configurations required by the processor for seamless integration with their system. 9. Initiate the payment sheet by passing the constructed PaymentDataRequest object to the loadPaymentData function. This asynchronous call will open the payment sheet, allowing the user to select their preferred payment method and complete the transaction. 10. Upon user confirmation and selection of a payment method, retrieve the paymentData object containing relevant metadata and a payment token. This token can then be used to finalize the transaction securely, completing the payment process within your .NET web application.