Payment Request Button only fires token event

[ion-dev]

I've been trying to implement the Payment Request Button but the only even fired is the token event.

The docs say to use the paymentMethod event but this is never fired.

Has something changed?

[richnologies]

Hi @ion-dev,

I need some context in order to help. Can you please tell which version of angular and ngx-stripe are you using?

Also, if you could provide me some code examples of what have you tried that would great

Regards

R

[ion-dev]

Hi @richnologies, I followed the code examples in the docs but the only event triggered was token.

So I eventually found a work around by importing PaymentRequestTokenEvent instead of PaymentRequestPaymentMethodEvent, then replaced (paymentmethod)="onPaymentMethod($event)" with (token)="onPaymentMethod($event)".

However, for peace of mind it would be good to figure out why the paymentmethod event isn't fired.

My versions are:

angular: 14.2.2 ngx-stripe: 14.1.0 @stripe/stripe-js: 1.38.1

Thanks!

[1234831002]

Hi @richnologies i am also facing the same issue paymentmethod is not triggering or me too following is my package.json file

{ "name": "app-web-app", "version": "0.0.0", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build --prod", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e", "compodoc": "npx compodoc -p tsconfig.doc.json -s -w" }, "private": true, "dependencies": { "@angular/animations": "^13.1.1", "@angular/cdk": "^11.2.13", "@angular/common": "^13.1.1", "@angular/compiler": "^13.1.1", "@angular/core": "^13.3.12", "@angular/flex-layout": "^11.0.0-beta.33", "@angular/forms": "^13.1.1", "@angular/google-maps": "^13.3.9", "@angular/material": "^11.2.13", "@angular/material-moment-adapter": "^11.0.3", "@angular/platform-browser": "^13.1.1", "@angular/platform-browser-dynamic": "^13.1.1", "@angular/router": "^13.1.1", "@babel/runtime": "^7.21.0", "@compodoc/compodoc": "^1.1.18", "@googlemaps/js-api-loader": "^1.15.1", "@ngx-formly/bootstrap": "^6.1.3", "@ngx-formly/core": "^6.1.3", "@ngx-translate/core": "^14.0.0", "@ngx-translate/http-loader": "^7.0.0", "@stripe/stripe-js": "^1.54.2", "@techiediaries/ngx-qrcode": "^9.1.0", "@types/chart.js": "^2.9.35", "@types/w3c-web-usb": "^1.0.6", "ang-jsoneditor": "^1.10.5", "aws-sdk": "^2.820.0", "axios": "^1.2.1", "bootstrap4-toggle": "^3.6.1", "chart.js": "^2.9.4", "chartjs-plugin-annotation": "0.5.7", "chartjs-plugin-datalabels": "0.6.0", "jsoneditor": "^9.7.4", "jsprintmanager": "^4.0.4", "jwt-decode": "^3.1.2", "moment": "^2.29.3", "ng-thermal-print": "^1.0.3", "ng2-charts": "2.3.0", "ngx-stripe": "^13.4.0", "node-thermal-printer": "^4.1.2", "npm": "^7.24.2", "rxjs": "~6.6.0", "socket.io-client": "^4.2.0", "tslib": "^2.0.0", "webpack": "^5.75.0", "webusb": "^2.2.0", "xlsx": "^0.17.3", "zone.js": "~0.11.4" }, "devDependencies": { "@angular-devkit/build-angular": "^13.1.2", "@angular/cli": "^13.1.2", "@angular/compiler-cli": "^13.1.1", "@types/jasmine": "~3.6.0", "@types/node": "^12.19.11", "@types/socket.io-client": "^3.0.0", "codelyzer": "^0.0.28", "jasmine-core": "~3.6.0", "jasmine-spec-reporter": "~5.0.0", "karma": "~6.3.9", "karma-chrome-launcher": "~3.1.0", "karma-coverage": "~2.0.3", "karma-jasmine": "~4.0.0", "karma-jasmine-html-reporter": "^1.5.0", "protractor": "~7.0.0", "ts-node": "~8.3.0", "tslint": "~6.1.0", "typescript": "~4.5.4" } } I followed the docs. Can you help me?

Thanks

[richnologies]

Hey @1234831002, sure! Can you please share a snippet of what of your HTML? I'm interested in seeing the inputs and outputs you're using :)

[1234831002]

<ngx-stripe-payment-request-button [paymentOptions]="paymentRequestOptions" (paymentMethod)="onPaymentMethod($event)" (shippingaddresschange)="onShippingAddressChange($event)" (notavailable)="onNotAvailable()">

[richnologies]

Sorry, I'm having issues replicating. Can I see the paymentRequestOptions object?

Also, is this happening on every browser or one in particular?

[richnologies]

Also, can you create a separate issue? This is not exactly the same issue. Thanks!

[MikkelBeefit]

Heey @richnologies

I finally found another thread with this issue, but it seems this was closed and unfinished. Suddenly our checkout frontend has this same problem with the request button.

It doesn't emit the paymentMethod event. Seems like this happens with our upgrade to Angular 15 and thereby also the upgrade to ngx-stripe.

We use the following: "ngx-stripe": "^15.8.1", "@stripe/stripe-js": "^3.4.0"

I get the token event, and then 30 seconds later this warning message comes from the Stripe library: "Timed out waiting for a call to complete(). Once you have processed the payment in the "token" handler, you must call event.complete within 30 seconds."

All the logic to continue happens in the paymentMethod event, so t hat's the reason for the message. Please find attached images of the template and the request options.

Hope you have some ideas.