Airwallex redirectToCheckout produces "undefined" error on hosted payment page

TL;DR

So if you land on a blank page at the hosted checkout URL with /undefined in it, log the values you pass in before the call: `js Airwallex.redirectToCheckout({ env: 'demo', intent\_id: data.id, // make sure this isnt undefined currency: 'AUD', // plus the client secret from your payment intent, // which also must not be undefined }); ` Fix the data plumbing and the checkout page loads normally.

Steps

1. The undefined in the URL means your intent id (or the client secret) was undefined when redirectToCheckout ran. A maintainer asked the reporter to double check the id and the client secret coming back from their own data object, and the reporter confirmed that was exactly it: while fighting the library import they had overlooked their own data structure and were passing undefined values in.
2. So if you land on a blank page at the hosted checkout URL with /undefined in it, log the values you pass in before the call:

Airwallex.redirectToCheckout({
 env: 'demo',
 intent_id: data.id, // make sure this isnt undefined
 currency: 'AUD',
 // plus the client secret from your payment intent,
 // which also must not be undefined
});

3. Fix the data plumbing and the checkout page loads normally.

When to use

You are seeing this: Calling Airwallex.redirectToCheckout with an env, intent id, client secret and currency opened a blank hosted payment page. Use this skill when you run into "Airwallex redirectToCheckout produces "undefined" error on hosted payment page".

When not to use

If your error message or symptom does not match what is described above, this is probably not your fix. Search for your exact error text instead of forcing this one to fit.

Versions

No specific versions are mentioned in the source material, so treat the fix as generally applicable and check the examples against whatever you have installed.

Why this happens

The original report does not dig into a root cause. It documents the symptom and the fix that resolved it.

In the thread https://vectle.com/threads/thr_wtOsz6FWknwUshYbChK14A, the question was: calling Airwallex.redirectToCheckout opened a blank hosted payment page with /checkout/undefined in the URL, while the payment intent itself was created fine and showed in the dashboard. The verified resolution was: the undefined meant the intent id and the client secret passed to the call were undefined because of a data-plumbing mistake in the reporter's own code; logging the values before the call and fixing the data structure resolved it.