Overview

When making payment using Stripe as a payment gateway, the error "There was a problem with your card" appears. This article explains why this error occurs and how you can resolve it by adding the correct API key.

Back to top

Diagnosis

Upon making a payment using Stripe as a payment gateway you got the following error:

There was a problem with your card

This error usually when you are not using the production credentials/Live API keys.

Back to top

Solution

Logon to your Stripe Dashboard and Navigate to Developers -> API Keys on the left-hand panel:

The default view when you click on this button is your live keys.
In order to view your test keys, in the top right, click on the toggle button next to the text View test data:

This will show you your test keys, indicated by an orange border along the panel, and the text will now say Viewing test data:
Reveal and copy the test Secret key by clicking on Reveal test key token:

Note: You can check the following video for a demonstration of toggling between test/live keys and finding/copying them:
In your app, Navigate to Create > Build and choose the relevant feature where you need to setup the payment gateway (e.g. Food Ordering feature as shown below), select Payment options, choose Stripe as the Payment Gateway and paste the API Secret test key in the Key field.
Save the changes by clicking save in the upper right corner:
Make a test purchase via the app using one of the native preview apps or the direct PWA link from your dashboard. You may use a test credit card, eg. 4242 4242 4242 4242 is a US Visa card, to keep personal details private and also ensure that there won't be any actual charges made on a real card. You will be able to proceed with the payment and you won't receive the There was a problem with your card error.
For further verification, check order Transactions in your app dashboard under Manage > Transactions and ensure that there are no errors:Check the Stripe account dashboard for the transaction record and any indication of problems.
If there are no issues, revisit the Stripe Developer Dashboard and use the toggle button to switch to the Live API Keys. Reveal and copy the Secret Key to then replace the existing Test Key in step 4 with the live API key.