Google Pay

import { usePayment, AuthData } from "@chargx/sdk";

const CreditCardForm = () => {
  const [isGooglePayAvailable, setIsGooglePayAvailable] = useState(false);

  const [authData, setAuthData] = useState<AuthData>();
  const [googlePayMethodData, setGooglePayMethodData] = useState(null);
  const [googlePaymentRequest, setGooglePaymentRequest] = useState<PaymentRequest>(null);
  
  const [isSubmitting, setIsSubmitting] = useState(false);

  const {
    pretransact,
    load,
    transact,
    dispatchData,
    checkCustomerLoyaltyPoints,
  } = usePayment("your-publishable-key-here", "https://api.chargx.io");

   useEffect(() => {
    pretransact().then((response) => {
      ...
      setAuthData(response.authData);
      setGooglePayMethodData((response as any).googlePay.methodData);
    });
  }, []);

  ...
};

if (window.PaymentRequest) {
  const details = {
    total: {
      label: "Total",
      amount: {
        currency: "USD",
        value: 10,
      },
    },
  };

   const request = new PaymentRequest(googlePayMethodData, details);
   const canMakePayment = await request.canMakePayment();
   if (canMakePayment) {
    setIsGooglePayAvailable(true);
    setGooglePaymentRequest(request);
   }

   // if canMakePayment is true then we can display GooglePay button
}

<button
  type="button"
  onClick={handleGooglePay}
  className="w-full bg-black text-white hover:bg-black/90"
>
  <svg
    className="h-5 w-5 mr-2"
    viewBox="0 0 24 24"
    fill="currentColor"
  >
    <path d="M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z" />
  </svg>
  Google Pay
</button>

const handleGooglePay = async () => {
  setIsSubmitting(true);

  try {
    const response = await googlePaymentRequest.show();

    // https://developers.google.com/pay/api/web/reference/response-objects#PaymentMethodData
    const paymentMethodData = response.details.paymentMethodData;
    //
    // An envelope containing a signed, encrypted payload, should be sent to PG to decrypt and process it
    const encryptedPaymentToken = paymentMethodData.tokenizationData.token;

    await transact({
      currency: "USD",
      amount: 10,
      type: "fiat",
      opaqueData: {
        dataDescriptor: "COMMON.GOOGLE.INAPP.PAYMENT",
        dataValue: window.btoa(encryptedPaymentToken),
      },
      customer: {
        name: "...",
        email: "...",
        phone: "...",
      },
      billingAddress: {
        street: "...",
        unit: "...",
        city: "...",
        state: "...",
        zipCode: "...",
        countryCode: "...",
        phone: "...",
      }
    })

    // Complete the payment
    await response.complete("success");
    //
  } catch (error: any) {
    console.error("Google Pay error:", error);
  } finally {
    setIsSubmitting(false);
  }
}