irffan

[olive juniper]

What specific issue are you encountering? How are you integrating?

[tropic rapids]

here is the code

export default function CheckoutForm() {
  const stripe = useStripe();
  const elements = useElements();
  const [paymentRequest, setPaymentRequest] = useState<any>(null);

  const [message, setMessage] = useState<string | null>(null);
  const [isProcessing, setIsProcessing] = useState(false);

  const handleSubmit = async (e: { preventDefault: () => void }) => {
    e.preventDefault();
    console.log('submit handler called');
    if (!stripe || !elements) {
      return;
    }

    setIsProcessing(true);

    const { error } = await stripe.confirmPayment({
      elements,
      confirmParams: {
        // Make sure to change this to your payment completion page
        return_url: `${window.location.origin}/completion`,
      },
    });

    if (error.type === 'card_error' || error.type === 'validation_error') {
      setMessage('error.message');
    } else {
      setMessage('An unexpected error occurred.');
    }

    setIsProcessing(false);
  };

  useEffect(() => {
    // Check if Stripe.js has loaded yet. Form will not be rendered until Stripe.js has loaded to prevent errors.
    if (stripe) {
      console.log('stripe works');
      const pr = stripe.paymentRequest({
        country: 'IN',
        currency: 'usd',
        total: {
          label: 'Demo total',
          amount: 1099,
        },
        requestPayerName: true,
        requestPayerEmail: true,
        wallets: ['googlePay', 'applePay'],
      });

 }

      console.log('pr--', pr);

      pr.canMakePayment()
        .then((result) => {
          pr.show();
          console.log('result - ', result);
          if (result) {
            setPaymentRequest(pr);
          }
        })
        .catch((err) => {
          console.log('can make payment error - ', err);
        });
    }
  }, [stripe]);

  return (
    <form id="payment-form" onSubmit={handleSubmit}>
      <Flex
        pt="4rem"
        mx="auto"
        maxW="18rem"
        h="60vh"
        gap="2rem"
        flexDir={'column'}
      >
        {paymentRequest && (
          <PaymentRequestButtonElement
            options={{
              paymentRequest,
              style: {
                paymentRequestButton: {
                  type: 'default',
                  // One of 'default', 'book', 'buy', or 'donate'
                  // Defaults to 'default'
                  theme: 'dark',
                  // One of 'dark', 'light', or 'light-outline'
                  // Defaults to 'dark'
                  height: '64px',
                  // Defaults to '40px'. The width is always '100%'.
                },
              },
            }}
          />
        )}
        <Center w={'full'} minH="15rem">
          <PaymentElement id="payment-element" />
        </Center>
        <Button
          onClick={handleSubmit}
          w="full"
          disabled={isProcessing || !stripe || !elements}
          id="submit"
          display={'flex'}
          alignItems="center"
          justifyContent={'center'}
          isLoading={isProcessing}
  
        >
          Pay now
        </Button>
        {/* Show any error or success messages */}
        {message && <div id="payment-message">{message}</div>}
      </Flex>{' '}
    </form>
  );

[olive juniper]

Do you meet the prerequisites for both Apple and Google Pay? Are you in a supported region?

[tropic rapids]

yes google pay works in my region

yes i am in a supported region for google pay

[olive juniper]

Where are you located? Do you have active cards in your wallets?

[tropic rapids]

can you give me a link for code where i can find google pay implemented for subscription

I am located in India. I dont use apple pay but i use google pay

[olive juniper]

We don't support Google Pay (or Apply Pay) in India I'm afraid

[tropic rapids]

so i cant develop for customers outside of india

[olive juniper]

There's no way to test it, no

[tropic rapids]

Thanks for the help

Can you suggest some other methods which i can integrate other than credit card to accept payments