Add Payment Button Doesn't do anything

Hey all, new user here and love a lot about the software but when i tried to get a client o make a payment, they couldn’t add their card as the “add payment method” doesn’t work, similarly clicking an invoice and trying to pay results in only being prompted for the card holder name and nothing else, and the “pay now” box doesn’t do anything either when clicked, no network requests, no logs, nothing.

  1. Using docker compose setup followed the instructions from your github repo.
  2. Using stripe, appears to be correctly configured with it showing as “active” in the payment settings. I’ve added the publishable key and api key, and have required all the fields.
    3.This is the client portals “payment methods”, it doesn’t prompt for any of the other required fields, just asks for a card holder name, when entered and clicking “add payment method” nothing happens.No suspicious docker compose logs, no network requests made in the chrome dev tools, no console.logs printed on the front end either.

I can only post one image since i’m a new account, but can provide more in replies

Tried on both firefox and chrome with no extensions and same behavior.

If i had to guess, i’m thinking that there might be some required behavior i need to do or populate on the client to get it function correctly? but after going through your youtube videos and the docs, i can’t figure out what it is.

Also, i’m using a regular stripe api key not a restricted key, so i think it has full permissions granted to it?

Any help greatly appreciated as i love this software so far, excellent work on it all, i just want to get credit processing up for the client!

Hi,

Are there any errors in the browser console?

unfortunately nothing at all, no console errors, all endpoints in the docker compose logs are 200, and not even any network requests being made when the button is clicked. I thought initially maybe some javascript wasn’t loading on the frontend due to extensions, but i disabled them all and tested and the same thing, nothing happens on clicking the add “pay now” or the “add payment” button in the add payment methods tab to add a credit card there.

it seems like in my screen shot, the box under “card holder name” is possibly a partially loaded input box for the rest of the credit card information? but clicking into it doesn’t do anything either

@david do you have any suggestions?

here’s the add payment methods view, similarly, there’s no fields to add the CC number or anything and the add payment button doesn’t actually do anything when clicked, just like trying to add it in the pay now modal

Sorry it only lets me post one image per post, so here’s another with my
here’s my stripe config

here’s another

am i missing some key configurational setting that’s causing it? i feel like i am given how this is a core feature that just seems to be disabled in my instance

Progress! So as an update, if i switch to the flutter app in the main invoice ninja app, and THEN go to the client portal to try and make a payment that’s assigned to a test user, i do see the portion to input the card number appears correctly instead of it being that blank white box in my first image

if i switch to the react app and navigate to the this page, i get the same image as in my first post. So weird!

Do you see a difference between the two client portal links?

@david do you have any ideas?

All of the URLs look the same for both applications, and i don’t see any query parameters or unique IDs being passed in the URLs to begin with, but i did notice,

on the working as normal page (when i use the flutter version of the app then go to client portal) and i correctly see the “add card number” widget that uses Link, this element appears in the html DOM

image

where as when i use the react app home page and go to client portal, that div with the px-4 py-5 class is there, but its empty, and in the working example you can see it’s loading an iframe with the stripe payment processing widget/Link widget, but that same widget is missing in the react home page > client portal causing the entire thing to break.

I really have no idea why in the react home page > client portal that element is missing and in the flutter home page > client portal it’s there causing the entire thing to work, but as a react dev myself, is there some config setting that’s necessary in the react home page that i forgot to set (like making sure client doesn’t have XYZ data field blank) that isn’t required in the flutter version which is causing it to not render? or a stripe config parameter?

when i configured stripe i used the publishable key and pasted it in with the pk_live_ prefix still on it, and same with the secret key sk_live_, was i supposed to use a restricted key and set the permissions on it manually?

I also can see when i use the happy path of flutter homepage > client portal and the widget loads, i do get a corresponding successful stripe event that corresponds to embedding the payment widget i’m guessing, and no such event occurs when i do the react home page > client portal approach.

So i think i’ve figured it out, for some reason it wasn’t connecting over HTTPS to the payment portal via the react frontend when you clicked the “client portal” but for the flutter app it was, so ultimately a config error on my end i think but i think the flutter app forces the connection over https since i didn’t specify in my config file and just put the root domain.

now that i’ve updated the env file to specify https, it’s working correctly as the stripe component wouldn’t load over http!

Glad to hear it, thanks for the update!

cc @david