Google Pay Autofill won't work on chrome mobile

2022-05-03 20:38 Colfah imported from Stackoverflow

When I use chrome, google pay automatically suggests I pay using one of my saved cards.

This is working for my site on desktop but on mobile it is not.

1. It asks me to select my card

2. then to put in my CCV code

3. it then checks that it is correct

4. but it does not appear on the form when the google pay box disappears.

Is there a way to fix this or to disable google pay from suggesting using saved credit cards?

The site is live here: https://www.ticketglen.com/events/627169277aa4727312497eaf

My backend code:

const checkout = (req,res,next)=>{
    console.log("Entered checkout");
   const amount = req.body.orderAmount;
   console.log("IN checkout name,phone number and address are:"+req.body.user,req.body.phoneNumber,req.body.address);
    stripe.customers.create({
      name:req.body.user,
      phone:req.body.phoneNumber,
      metadata:{'Address':req.body.address}

    }).then(customer=>{
    console.log("Customer created successfully:"+customer.id);

    stripe.ephemeralKeys.create(
      {customer: customer.id},
      {apiVersion: '2020-08-27'}
    );  
   stripe.paymentIntents.create({
        amount: amount,
        currency: "inr",
        customer : customer.id,
        automatic_payment_methods: {
          enabled: true,
        },
        
         
      }).then(paymentIntent=>{
       
      console.log("Entered Payment intent creation:",paymentIntent.client_secret);

        res.send({
          publishableKey: publishable_key, 
          paymentIntent: paymentIntent.client_secret,
          customer: customer.id,
         // ephemeralKey: ephemeralKey.secret
        });
      }).catch(error=>{
        console.log("Entered paymentIntent creation failed:",error);
        res.send({status:error});
      })
      });
      
      }

const payment=(req,res,next)=>{
  try {
    let intent;
    console.log("Entered server payment");
    if (req.body.payment_method_id) {
      // Create the PaymentIntent
      stripe.paymentIntents.create({
        payment_method: req.body.payment_method_id,
        amount: req.body.amount,
        currency: 'inr',
        confirmation_method: 'manual',
        confirm: true
      }).then(paymentIntent=>
        {
          intent=paymentIntent;
          console.log("Entered first time payment_method:payment_intent:");
          res.send(generateResponse(intent));
        })
    } else if (req.body.payment_intent_id) {
      stripe.paymentIntents.confirm(
        req.body.payment_intent_id
      ).then(payment_Intent=>{
        intent=payment_Intent
        console.log("Entered second time payment_method:payment_intent for otp code:",intent);
        res.send(generateResponse(intent));
    })
    }
 
  } catch (e) {
    // Display error on client
    console.log("Entered error statement:",e.message);
    return res.send({ error: e.message });
  }
}

const generateResponse = (intent) => {
  // Note that if your API version is before 2019-02-11, 'requires_action'
  // appears as 'requires_source_action'.
  console.log("Entered generateResponsestatus and next action type:");
  if (
    intent.status === 'requires_action' &&
    intent.next_action.type === 'use_stripe_sdk'
  ) {
    // Tell the client to handle the action
    console.log("Entered requires_action:");
    return {
      requires_action: true,
      payment_intent_client_secret: intent.client_secret
    };
  } else if (intent.status === 'succeeded') {
    // The payment didn’t need any additional actions and completed!
    // Handle post-payment fulfillment
    console.log("Entered successfull Payment:");

    return {
      success: true

    };
  } else {
    // Invalid status
    console.log("Entered invalidStatus");
    return {
      error: 'Invalid PaymentIntent status'
    }
  }
  
};

Frontend code:

const initializePaymentSheet = async () => {

    const {
      publishable_key,
      paymentIntent,
      customer,
    } = fetchPaymentSheetParams();
  
};
const openPaymentSheet = async (e) => {
e.preventDefault();
  console.log("Entered openPaymentSheet");
  
  AsyncStorage.removeItem('paymentAmount');
  setLoading(false);
  createPaymentMethod({
    type: 'card',

    billing_details: {
      // Include any additional collected billing details.
      name: user,
    },
    
  }).then(stripePaymentMethodHandler)
  .catch(error=>{console.log("Entered openpaymentSheet error block:",error)})
    }




    function stripePaymentMethodHandler(result) {
      console.log("Entered stripePaymentHandler");
      if (result.error) {
        console.log("Payment not happened:",result.error);
        alert("Payment not happened--",result.error);
      } else {
        // Otherwise send paymentMethod.id to your server (see Step 4)
          fetch(API_URL+'/v1/payment', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({
            payment_method_id: result.paymentMethod.id,
            amount:orderAmount,
          })
        }).then(function(result) {
          result.json().then(response=> {
            
          console.log("Result in stripePaymentMethodHandler:",response);
            handleServerResponse(response);
          })
        })
        .catch(error=>{console.log("Entered fetch in stripePaymentHandler catch block:",error)})
      }
    }
    

    function handleServerResponse(response) {
      if (response.error) {
        // Show error from server on payment form
        //alert("Payment cannot be proceeded:",response.error);
        Alert.alert("Payment cannot be proceeded--",
        "",
       [
         {
         text:"OK",
        onPress:()=>{
          navigation.navigate('DrawerNavigationRoutes',{screen:'profileScreenStack'})
      
         }
      
         },
      ]
      );
      } else if (response.requires_action) {
        // Use Stripe.js to handle required card action
        handleCardAction(
          response.payment_intent_client_secret
        ).then(handleStripeJsResult);
      } else {
      console.log("Entered handleServerREsponse else block");
      navigation.navigate(PaymentSuccessForm);
      }
    }

    function handleStripeJsResult(result) {
      if (result.error) {
        // Show error in payment form
        Alert.alert("Payment cannot be proceeded.",
        "",
       [
         {
         text:"OK",
        onPress:()=>{
          navigation.navigate('DrawerNavigationRoutes',{screen:'profileScreenStack'})
      
         }
      
         },
      ]
      );
      } else {
        
        // The card action has been handled
        // The PaymentIntent can be confirmed again on the server
        console.log("Entered HandleJSReturn reconfirmation and order amount:",result,orderAmount);
        fetch(API_URL+'/v1/payment', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ payment_intent_id: result.paymentIntent.id ,amount:orderAmount})
        })
        /*.then(function(confirmResult) {
          return confirmResult.json();
        })*/
        .then(function(result) {
          // Handle server response (see Step 4)
          result.json().then(response=> {
            console.log("Entered reconfirmation then block:",response);
            handleServerResponse(response);
          })
        })
      
        .catch(e=>{
          console.log("Entered in HandleStripeJsResult catch block:",e);
          Alert.alert("Payment cannot be proceeded.",
        "",
       [
         {
         text:"OK",
        onPress:()=>{
          navigation.navigate('DrawerNavigationRoutes',{screen:'profileScreenStack'})
      
         }
      
         },
      ]
      );
        })
     
    }
  }



useFocusEffect(React.useCallback(() => {
  initializePaymentSheet();
  
  //initStripe({publishableKey:publishable_Key});
  return()=>{
    AsyncStorage.removeItem('paymentAmount');
    console.log("Leaving Payment screen");
  }
  

}, [])
);

android/build.gradle

import org.apache.tools.ant.taskdefs.condition.Os

// Top-level build file where you can add configuration options common to all sub-projects/modules.

buildscript {
    ext {
        buildToolsVersion = "31.0.0"
        minSdkVersion = 21
        compileSdkVersion = 31
        targetSdkVersion = 31

        if (System.properties['os.arch'] == "aarch64") {
            // For M1 Users we need to use the NDK 24 which added support for aarch64
            ndkVersion = "24.0.8215888"
        } else if (Os.isFamily(Os.FAMILY_WINDOWS)) {
            // For Android Users, we need to use NDK 23, otherwise the build will
            // fail due to paths longer than the OS limit
            ndkVersion = "23.1.7779620"
        } else {
            // Otherwise we default to the side-by-side NDK version from AGP.
            ndkVersion = "21.4.7075529"
        }
    }
    repositories {
        google()
        jcenter()
        mavenCentral()
    }
    dependencies {
        classpath("com.android.tools.build:gradle:4.1.0")
        classpath("de.undercouch:gradle-download-task:4.1.2")
        

        // NOTE: Do not place your application dependencies here; they belong
        // in the individual module build.gradle files
    }
}

allprojects {
    repositories {
        maven {
            // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
            url("$rootDir/../node_modules/react-native/android")
        }
        maven {
            // Android JSC is installed from npm
            url("$rootDir/../node_modules/jsc-android/dist")
        }



        mavenCentral {
            // We don't want to fetch react-native from Maven Central as there are
            // older versions over there.
            
        }
        google()
        jcenter()
        maven { url 'https://www.jitpack.io' }
    }
}

Can you help me if there is anything blocking in my code. Thanks in advance

Async task getting value off of JSON return, XAML/WPF app

I am trying to get a single value off of a JSON return.

My call is doing an HttpClient call to a webservice, it returns me my Json object. I need to now get a value off of the Json return in my class so I can pass it to another method in my class as a parameter.

Current code:

var url = "https://localhost:9999/create_payment_intent";
var terminalAmount = new PaymentIntentCreateRequest();
terminalAmount.Amount = "2300";

var json = JsonConvert.SerializeObject(terminalAmount);
var data = new StringContent(json, Encoding.UTF8, "application/json");
using (var client = new HttpClient())
{
    client.DefaultRequestHeaders.Accept.Clear();
    client.DefaultRequestHeaders.Accept.Add(new MediaTypeWithQualityHeaderValue("application/json"));

    var response = await client.PostAsync(url, data); //The resulting response

    if (response.IsSuccessStatusCode)
    {
        var paymentIntentResponse = response.Content.ReadAsStringAsync().Result;

        var jsonObject = JsonConvert.DeserializeObject<object>(paymentIntentResponse.ToString());
        //jsonObject returns some values {"id": "pi_xxxxxxxxx", some other data.....}
        //  PaymentIntentId = jsonObject.Id;  // I NEED THE ID VALUE OFF OF THE JSON OBJECT

        //PaymentIntentId = result.Id;
        //Call next function if result has an ID if not jump out and try again or return error
    }

    //Successful payment intent ready?
    //pass the payment intent amount to the variable

    //await response;
    Console.WriteLine(response);
}

Google pay option is not coming in stripe

backend

    @app.route('/create-payment-intent', methods=['POST'])
    def create_payment():
        try:
            data = json.loads(request.data)
            # Create a PaymentIntent with the order amount and currency
            intent = stripe.PaymentIntent.create(
                amount=calculate_order_amount(data['items']),
                currency='usd',
                automatic_payment_methods={
                    'enabled': True,
                },
            )
            return jsonify({
                'clientSecret': intent['client_secret']
            })
        except Exception as e:
            return jsonify(error=str(e)), 403

frontend

    export default function App() {
    const [clientSecret, setClientSecret] = useState("");

    useEffect(() => {
        // Create PaymentIntent as soon as the page loads
        fetch("/create-payment-intent", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ items: [{ id: "xl-tshirt" }] }),
        })
        .then((res) => res.json())
        .then((data) => setClientSecret(data.clientSecret));
    }, []);

    const appearance = {
        theme: "stripe",
    };
    const options = {
        clientSecret,
        appearance,
    };

    return (
        <div className="App">
        {clientSecret && (
            <Elements options={options} stripe={stripePromise}>
            <CheckoutForm />
            </Elements>
        )}
        </div>
    );
    }

here is my stripe code where i am expecting google pay to come but it is not coming in my localhost. I am using live stripe acccount for testing . Is google pay btn not coming because of localhost ?

Please check the screenshot how it is coming .

Not sure what this mean in there doc

Google transactions is waiting for userInput and then leaves the conversation

I am trying to create an action for the google assistant using google transactions, when I take it out of Development Sandbox to allow real orders and transactions, it will prepare the order and the receipt. Then it is supposed to check if the order will be accepted or rejected and wait for the user to say that they want to make the order, however, it waits for the user but then closes the action straight away and doesn't let the user input anything.
Multi page form - Chrome mobile issue

I have a multi page form. When I open it on desktop browser or with Samsung mobile, everything is working fine (https://ibb.co/PrJ2hrQ).

When I open it on the Android version of Chrome it opens normally, but as I tap the textbox, it moves and opens half of the next page (https://ibb.co/5rXFCGn).

I can't figure out how to fix it. The css code is here: https://drive.google.com/uc?export=view&id=1ri3hR9FsS8yV-ejUzqVK2zNU4eORatnD
React web app does not work and keeps refreshing on mobile browser

This web App(reactjs) works fine on desktop and tablets.

However, when trying it on mobile browser(like Safari), the progress bar keeps flickering and refreshing like:

Please click to view the gif

I have tried on Safari and Chrome(e.g. iOS12-14 & Android 10-12), all display the same result.

Anyone know why this happened?

Or why the progress bar keeps flickering and refreshing on mobile browsers, but works well on desktop?

Related questions

Google Pay Autofill won't work on chrome mobile

See also questions close to this topic

My backend code:

Frontend code:

android/build.gradle