Getting an error: Failed to load resource: paymentMethods

API Q&A
1

Hi,
I’m integrating a new form for payments. Everything is going well for me until the form is submitted. Then I get the following error in the console:

Failed to load resource: paymentMethods the server responded with a status of 400 ()

actions.js:199 POSThttps://…infusionsoft.com/app/public/spa/v1/sales/paymentMethods 400 (Bad Request) (anonymous) @ browserapierrors.js:155
(anonymous) @ xhr.js:128
(anonymous) @ xhr.js:187
dp @ xhr.js:13
nQ @ dispatchRequest.js:53
Promise.then
fc.request @ Axios.js:88
fc. @ Axios.js:140
(anonymous) @ bind.js:9
rZ @ actions.js:199
SAVE_PUBLIC_PAYMENT_METHOD @ actions.js:57
(anonymous) @ vuex.esm-bundler.js:305
Xn.dispatch @ vuex.esm-bundler.js:1032
Xn.dispatch @ vuex.esm-bundler.js:914
savePaymentMethod @ PaymentMethodPage.vue:194
submit @ PaymentMethodPage.vue:167
(anonymous) @ PaymentMethodPage.vue:106
r @ helpers.js:90

How can I fix it?

2

400 is a bad request, so you’re not passing the data correctly.

I can duplicate the 400 response when the contact Id is not passed, or not passed correctly.

{
    "code": 400,
    "message": "contact_id is invalid",
    "status": "Bad Request",
    "details": [
        {
            "domain": "paymentmethodconfig",
            "resource": "POST /rest/v2/paymentMethodConfigs"
        }
    ]
}
3

This is an embedded iframe form that handles adding credit cards. I do not process any data. This code is executed by an embedded JS file.

4

Are we talking about this new JavaScript bundle?

The iframe that gets loaded requires a session key, that is acquired by passing the contact ID to an the API end point in the documenation, which you can then use to load the payment fields.

Check out this documentation for more information.
https://help.keap.com/help/upgrade-to-keaps-new-payments-api-integration-configuration

Even if we’re not talking about the same thing, I wonder if the API end point you’re using is affected by this change.

5

Yes, that’s right, we’re talking about this package. I get the session_key and insert it into the tag. There is no problem with that, however, an error appears after clicking on the form submit button.

6

I’ve been rushing through this process and stopped to pay a little more attention to the session key. I realized it’s a base64 encoded string, and when decoded it’s a JSON object.

Here’s an example:

{"contact_id":"123","tenant_id":"app123","environment":"Production","token":"really long string or random chars"}

When you get your session key back, you could decode it and make sure that the contact id and tenant id match your data.

I would open a support ticket here:

Track the date/time/time zone that you run your test and get the failure.
I would also capture the session key and send that along w/ the 400 error you’re getting.

I thought you were getting the 400 error trying to create the session key. In your case because the 400 is happening after the payment form is submitted back to Keap they’ll have to resolve the error.

There is another thread that was started to talk about this integration:

I’m going to link back to this thread from there as well to inform anyone in that thread about this issue.