search

capacitor-community / stripe

Stripe Mobile SDK wrapper for Capacitor
MIT License
185 stars 74 forks source link

Error with present after send payment intent #151

Closed jonatasoli closed 2 years ago

jonatasoli commented 2 years ago

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 commented 2 years ago

Thanks for issue. Android Emulator can't use GooglePay. Please run on real device: https://github.com/tipsi/tipsi-stripe/issues/356#issuecomment-417942799

travisBradfield commented 2 years ago

I'm having a similar problem on iOS...

I'm able to create the payment sheet, but then when I hit presentPaymentSheet() I get the following error:

TO JS {"error":"There was an unexpected error -- try again in a few seconds"} ⚡️ TO JS {"paymentResult":"paymentSheetFailed"}

It works perfectly on web browser on dev machine.

rdlabo commented 2 years ago

@travisBradfield This may be API issue: https://github.com/stripe/stripe-ios/issues/1832

Please check api implement.

travisBradfield commented 2 years ago

Hey @rdlabo,

I've followed this thread and it seems we're doing all of the things they're suggesting. Which docs should I be referring to to check my API implementation?

travisBradfield commented 2 years ago

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!

jonatasoli commented 2 years ago

Thanks for issue. Android Emulator can't use GooglePay. Please run on real device: tipsi/tipsi-stripe#356 (comment)

Hello, I try run in my phone but I have the same problem with the same error.

rdlabo commented 2 years ago

@travisBradfield @jonatasoli Did https://github.com/capacitor-community/stripe/issues/90#issuecomment-913278953 or demo code help you?

Or please share the repository where you reproduced the error.

Thanks.

jonatasoli commented 2 years ago

@travisBradfield @jonatasoli Did #90 (comment) or demo code help you?

Or please share the repository where you reproduced the error.

Thanks.

https://github.com/jonatasoli/test-stripe

server:

rdlabo commented 2 years ago

@jonatasoli https://github.com/jonatasoli/test-stripe/blob/main/src/components/payment/Payment.vue#L59 is correct?? Not require JSON.stringify data. Please check demo code: https://github.com/capacitor-community/stripe/blob/master/demo/angular/src/app/tab1/tab1.page.ts#L208

jonatasoli commented 2 years ago

@jonatasoli https://github.com/jonatasoli/test-stripe/blob/main/src/components/payment/Payment.vue#L59 is correct?? Not require JSON.stringify data. Please check demo code: https://github.com/capacitor-community/stripe/blob/master/demo/angular/src/app/tab1/tab1.page.ts#L208

@rdlabo when I use in PaymentSheet is code found.

rdlabo commented 2 years ago

@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.

rdlabo commented 2 years ago

Has this problem been resolved? No action taken, so this Issue is closed. If you continue to have problems, please create a new Issue.