Error with present after send payment intent
See original GitHub issueDescribe 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>
- Click on ‘Pay now’ button and waiting finish response log “finish”
- Click on ‘Present’ button
- 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;
Issue Analytics
- State:
- Created 2 years ago
- Comments:12 (6 by maintainers)
Top Results From Across the Web
Payment status updates | Stripe Documentation
Check PaymentIntent status on the client ; Resolves with an error, Customer's payment failed on your checkout page, Display error message and prompt...
Read more >Stripe payment intent problem during payment - Stack Overflow
List all Payment Intents and pass the customer parameter, which will return only Payment Intents associated with that Customer object.
Read more >Stripe.PaymentIntent — Striped v0.5.0 - HexDocs
If any actions are required for the payment, the PaymentIntent will return to the requires_confirmation state after those actions are completed. Your server ......
Read more >Error handling & rate limits - Chargebee API documentation
These errors may occur when trying to store the payment method details(such as card, paypal, ACH etc) or when trying to collect a...
Read more >Checkout Session | Amazon Pay
If you do not provide a checkoutCancelUrl , Amazon Pay will redirect the buyer using the following logic: Payment and address selection hosted...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
@jonatasoli Sorry, I misunderstood this problem as about Google Pay. I see, first you should check to be able to use this test environment:
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.
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!