Error with present after send payment intent

Describe the bug I’m working capacitor with vuejs. When I try doing payment with google pay I have error in present step, but the intent is sended to stripe.

To Reproduce Steps to reproduce the behavior: My code:

<template>
    <h1>Payments</h1>
 <div>
    <button @click="googlePayment">Pay now!</button>
    <button @click="present_g_play">Present</button>
  </div>
</template>

<script setup language="ts">
import { Stripe } from '@capacitor-community/stripe'
import axios from 'axios'

const publishableKey = "mykey"
const isAvailable = Stripe.isGooglePayAvailable().catch(() => undefined)

async function googlePayment() {
  console.log("start")
  Stripe.initialize({
    publishableKey: "mykey",
  });
  const intent = await axios.get('http://192.168.1.180:8000/intent', {header: {'content-type': 'application/json'}})
  const intent_json = intent.data
  const paymentIntent = intent_json.paymentIntent
  const customer = intent_json.customer
  const ephemeralKey = intent_json.ephemeralKey

  await Stripe.createGooglePay({
    paymentIntentClientSecret: JSON.stringify(intent.data),
    customerId: intent.data.customer,
  });
  console.log("finish")
}

async function present_g_play() {
  console.log("init present")
  const result = await Stripe.presentGooglePay();
  if (result.paymentResult === GooglePayEventsEnum.Completed) {
    // Happy path
    console.log("Happy Path")
  }
  console.log("finish present")
}
</script>

1. Click on ‘Pay now’ button and waiting finish response log “finish”
2. Click on ‘Present’ button
3. See error in line const result = await Stripe.presentGooglePay();

2022-02-03 08:40:16.141 1737-2218/com.simbioseventures V/Capacitor/Plugin: To native (Capacitor plugin): callbackId: 44916382, pluginId: Stripe, methodName: presentGooglePay
2022-02-03 08:40:16.141 1737-2218/com.simbioseventures V/Capacitor: callback: 44916382, pluginId: Stripe, methodName: presentGooglePay, methodData: {}
2022-02-03 08:40:16.142 1737-2040/com.simbioseventures E/Capacitor: Serious error executing plugin
    java.lang.reflect.InvocationTargetException
        at java.lang.reflect.Method.invoke(Native Method)
        at com.getcapacitor.PluginHandle.invoke(PluginHandle.java:121)
        at com.getcapacitor.Bridge.lambda$callPluginMethod$0$Bridge(Bridge.java:592)
        at com.getcapacitor.-$$Lambda$Bridge$25SFHybyAQk7zS27hTVXh2p8tmw.run(Unknown Source:8)
        at android.os.Handler.handleCallback(Handler.java:938)
        at android.os.Handler.dispatchMessage(Handler.java:99)
        at android.os.Looper.loop(Looper.java:223)
        at android.os.HandlerThread.run(HandlerThread.java:67)
     Caused by: java.lang.NullPointerException: Attempt to invoke virtual method 'void com.stripe.android.googlepaylauncher.GooglePayLauncher.presentForPaymentIntent(java.lang.String)' on a null object reference
        at com.getcapacitor.community.stripe.googlepay.GooglePayExecutor.presentGooglePay(GooglePayExecutor.java:53)
        at com.getcapacitor.community.stripe.StripePlugin.presentGooglePay(StripePlugin.java:177)
        at java.lang.reflect.Method.invoke(Native Method) 
        at com.getcapacitor.PluginHandle.invoke(PluginHandle.java:121) 
        at com.getcapacitor.Bridge.lambda$callPluginMethod$0$Bridge(Bridge.java:592) 
        at com.getcapacitor.-$$Lambda$Bridge$25SFHybyAQk7zS27hTVXh2p8tmw.run(Unknown Source:8) 
        at android.os.Handler.handleCallback(Handler.java:938) 
        at android.os.Handler.dispatchMessage(Handler.java:99) 
        at android.os.Looper.loop(Looper.java:223) 
        at android.os.HandlerThread.run(HandlerThread.java:67) 
    
    
    --------- beginning of crash
2022-02-03 08:40:16.149 1737-2040/com.simbioseventures E/AndroidRuntime: FATAL EXCEPTION: CapacitorPlugins
    Process: com.simbioseventures, PID: 1737
    java.lang.RuntimeException: java.lang.reflect.InvocationTargetException
        at com.getcapacitor.Bridge.lambda$callPluginMethod$0$Bridge(Bridge.java:601)
        at com.getcapacitor.-$$Lambda$Bridge$25SFHybyAQk7zS27hTVXh2p8tmw.run(Unknown Source:8)
        at android.os.Handler.handleCallback(Handler.java:938)
        at android.os.Handler.dispatchMessage(Handler.java:99)
        at android.os.Looper.loop(Looper.java:223)
        at android.os.HandlerThread.run(HandlerThread.java:67)
     Caused by: java.lang.reflect.InvocationTargetException
        at java.lang.reflect.Method.invoke(Native Method)
        at com.getcapacitor.PluginHandle.invoke(PluginHandle.java:121)
        at com.getcapacitor.Bridge.lambda$callPluginMethod$0$Bridge(Bridge.java:592)
        at com.getcapacitor.-$$Lambda$Bridge$25SFHybyAQk7zS27hTVXh2p8tmw.run(Unknown Source:8) 
        at android.os.Handler.handleCallback(Handler.java:938) 
        at android.os.Handler.dispatchMessage(Handler.java:99) 
        at android.os.Looper.loop(Looper.java:223) 
        at android.os.HandlerThread.run(HandlerThread.java:67) 
     Caused by: java.lang.NullPointerException: Attempt to invoke virtual method 'void com.stripe.android.googlepaylauncher.GooglePayLauncher.presentForPaymentIntent(java.lang.String)' on a null object reference
        at com.getcapacitor.community.stripe.googlepay.GooglePayExecutor.presentGooglePay(GooglePayExecutor.java:53)
        at com.getcapacitor.community.stripe.StripePlugin.presentGooglePay(StripePlugin.java:177)
        at java.lang.reflect.Method.invoke(Native Method) 
        at com.getcapacitor.PluginHandle.invoke(PluginHandle.java:121) 
        at com.getcapacitor.Bridge.lambda$callPluginMethod$0$Bridge(Bridge.java:592) 
        at com.getcapacitor.-$$Lambda$Bridge$25SFHybyAQk7zS27hTVXh2p8tmw.run(Unknown Source:8) 
        at android.os.Handler.handleCallback(Handler.java:938) 
        at android.os.Handler.dispatchMessage(Handler.java:99) 
        at android.os.Looper.loop(Looper.java:223) 
        at android.os.HandlerThread.run(HandlerThread.java:67) 
2022-02-03 08:40:16.189 1737-1737/com.simbioseventures D/Capacitor: App paused
2022-02-03 08:40:16.203 1737-2040/com.simbioseventures I/Process: Sending signal. PID: 1737 SIG: 9

Expected behavior I try use this methods with PaymentSheet and found correctly, but when I change to Google Pay I receive the error above. But the payment intent is send to stripe api.

Desktop (please complete the following information):

• OS: Arch Linux
• Browser chromium
• Version 98.0.4758.80

Smartphone (please complete the following information):

• Device: Emulator Android “Nexus One” API 30
• OS: Android R 11.0 x86

My package.json

  "name": "my-app",
  "version": "0.0.0",
  "private": true,
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "{src,cypress,tests}/**/*.{js,mjs,vue,js}": [
      "prettier --write",
      "cross-env NODE_ENV=production eslint --quiet --fix",
      "eslint --quiet --fix --ext .ts,.vue ./src"
    ]
  },
  "engines": {
    "node": "16",
    "yarn": ">=1.22"
  },
  "scripts": {
    "setup": "./scripts/setup.sh",
    "dev": "vite",
    "serve": "vite preview",
    "build": "vue-tsc --noEmit && vite build",
    "test": "jest",
    "build:update-bulma-colors": "bulma-css-vars",
    "serve-mock-api": "json-server --watch mock/dev.json",
    "test:unit": "vue-cli-service test:unit",
    "test:e2e": "vue-cli-service test:e2e",
    "lint": "eslint --ext .ts,.vue ./src",
    "mock-api-dev": "json-server --watch mock/dev.json",
    "prepare": "husky install",
    "storybook": "start-storybook -p 6006 -c .storybook watch-css  -s ./public",
    "build-storybook": "build-storybook"
  },
  "dependencies": {
    "@capacitor-community/stripe": "^3.5.3",
    "@capacitor/android": "^3.4.0",
    "@capacitor/cli": "^3.4.0",
    "@capacitor/core": "^3.4.0",
    "@ckeditor/ckeditor5-build-classic": "^31.1.0",
    "@ckeditor/ckeditor5-vue": "^2.0.1",
    "@iconify/iconify": "^2.1.0",
    "@iconify/json": "^1.1.443",
    "@sipec/vue3-tags-input": "^3.0.4",
    "@stripe-elements/stripe-elements": "^1.0.0",
    "@types/object-path": "^0.11.1",
    "@vue-stripe/vue-stripe": "^4.4.1",
    "@vueform/multiselect": "^2.2.1",
    "@vueform/slider": "^2.0.8",
    "@vuelidate/core": "^2.0.0-alpha.32",
    "@vuelidate/validators": "^2.0.0-alpha.25",
    "axios": "^0.21.4",
    "axios-mock-adapter": "^1.20.0",
    "bulma": "^0.9.3",
    "bulma-css-vars": "^0.7.0",
    "cpf-cnpj-validator": "^1.0.3",
    "creditcard.js": "^3.0.13",
    "cross-env": "^7.0.3",
    "deepmerge": "^4.2.2",
    "dotenv": "^10.0.0",
    "eslint-plugin-import": "^2.25.3",
    "lodash": "^4.17.21",
    "moment": "^2.29.1",
    "notyf": "^3.10.0",
    "rollup-plugin-purgecss": "^4.0.3",
    "simple-datatables": "3.1.2",
    "tree-sitter": "^0.20.0",
    "tree-sitter-vue": "^0.2.1",
    "v-calendar": "^3.0.0-alpha.6",
    "vee-validate": "^4.5.2",
    "vue": "^3.2.16",
    "vue-accessible-color-picker": "^3.1.0",
    "vue-axios": "^3.4.0",
    "vue-cal": "^4.2.0",
    "vue-class-component": "^8.0.0-0",
    "vue-imask": "^6.2.2",
    "vue-inline-svg": "^2.1.0",
    "vue-router": "^4.0.0-0",
    "vue3-tabs": "^0.1.12",
    "vuex": "^4.0.0-0"
  },
  "devDependencies": {
    "@babel/core": "^7.16.0",
    "@open-wc/webpack-import-meta-loader": "^0.4.7",
    "@storybook/addon-actions": "^6.4.8",
    "@storybook/addon-essentials": "^6.4.8",
    "@storybook/addon-links": "^6.4.8",
    "@storybook/preset-scss": "^1.0.3",
    "@storybook/vue3": "^6.4.8",
    "@types/jest": "^27.0.3",
    "@typescript-eslint/eslint-plugin": "^4.18.0",
    "@typescript-eslint/parser": "^4.18.0",
    "@vitejs/plugin-vue": "^1.9.3",
    "@vue/cli-plugin-unit-jest": "5.0.0-beta.2",
    "@vue/eslint-config-prettier": "^6.0.0",
    "@vue/eslint-config-typescript": "^7.0.0",
    "@vue/test-utils": "^2.0.0-rc.9",
    "@vueuse/core": "^7.4.0",
    "array-sort": "^1.0.0",
    "babel-jest": "^26.5.6",
    "babel-loader": "^8.2.3",
    "eslint": "^6.7.2",
    "eslint-config-prettier": "^8.3.0",
    "eslint-import-resolver-alias": "^1.1.2",
    "eslint-plugin-jsdoc": "^37.1.0",
    "eslint-plugin-prettier": "^3.3.1",
    "eslint-plugin-sort-destructure-keys": "^1.4.0",
    "eslint-plugin-sort-exports": "^0.6.0",
    "eslint-plugin-vue": "^8.2.0",
    "husky": "^7.0.4",
    "jest": "^26.5.6",
    "json-server": "^0.17.0",
    "lint-staged": "^12.1.2",
    "prettier": "^2.5.1",
    "purge-icons-webpack-plugin": "^0.7.0",
    "resolve-url-loader": "^4.0.0",
    "sass": "^1.26.5",
    "sass-loader": "^10.1.1",
    "storybook-vue3-router": "^2.1.1",
    "ts-jest": "^26.5.6",
    "typescript": "^4.4.3",
    "vite": "^2.6.4",
    "vite-plugin-purge-icons": "^0.7.0",
    "vue-jest": "^5.0.0-alpha.10",
    "vue-loader": "^16.8.3",
    "vue-tsc": "^0.3.0",
    "vuex-module-decorators": "^1.0.1"
  },
  "_moduleAliases": {
    "@": "./src",
    "~": "./src/assets"
  }
}

My capacitor config -> capacitor.config.ts

import { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'com.simbioseventures',
  appName: 'fastcrud',
  webDir: 'dist',
  bundledWebRuntime: false,
  "server": {
    "cleartext": true
  }
};

export default config;

[rdlabo]

@jonatasoli Sorry, I misunderstood this problem as about Google Pay. I see, first you should check to be able to use this test environment:

publishableKey: 'pk_test_YssveZBA1kucfaTfZbeDwauN'
endpoint: https://j3x0ln9gj7.execute-api.ap-northeast-1.amazonaws.com/dev/payment-sheet

Example: https://github.com/capacitor-community/stripe/blob/master/demo/angular/src/app/tab1/tab1.page.ts#L146-L152

If be fixed, your issue is api implements. If not, issue is app implements. Thanks.

[travisBradfield]

So! I had the API implementation wrong. We were returning the ephemeralKayID and not the ephemeralKeySecret!

Easy mistake but working now. Next step: Apple & Google Pay!