Why are my card input fields not loading for the Card Component or Drop-in?

In case you are receiving the Invalid client key or unknown origin error in the iFrames of the card input fields in your Drop-in or Card Component, this is related to an incorrect key for your client-side authentication. Depending on your integration, this can either be the client key or the origin key. You can generate these keys in the Customer Area by navigating to Developers > API Credentials, where you can select the API Credential for which you want to generate the key.

In case you are authenticating using a client key, please check the following:

1. Are you using the correct client key in your integration?
2. Are all the domains on which the card input fields are loaded added to the “Allowed Origins” field, as explained here?
3. Are you using the client key in the correct environment (test/live)?

In case you are authenticating using an origin key, please check the following:

1. Are you using the correct origin key in your integration? Try generating the origin key again for the domains on which you are loading the Card Component or Drop-in.
2. Is the origin key generated for the domain on which the card fields are hosted? You can find the origin of your page by checking window.location.origin in the browser console as explained here.
3. Is the origin key generated in the correct environment (test/live)?