Passkeys in 3DS challenges

Card schemes and issuers are starting to offer passkeys as a way to complete a 3DS challenge. Examples are Visa Payment Passkey and Mastercard's passkey offering. Instead of waiting for a one-time code by SMS or switching to a banking app, the cardholder confirms the payment with the same biometric or device PIN they use to unlock their phone or computer.

The issuer decides whether to offer a passkey. It only does so when the cardholder has enrolled a passkey with them and the browser supports it. Otherwise the challenge falls back to the issuer's usual method, such as a one-time code.

Passkeys at ProcessOut

You don't need to enable anything. ProcessOut supports passkeys in every 3DS challenge it displays:

ProcessOut.js allows passkeys in the 3DS challenge iframe. Make sure you load it from our CDN, as described in setting up your environment, so you always get the latest updates.
ProcessOut hosted pages, including the 3DS hosted page and Dynamic Checkout, allow passkeys in every frame they use to display the issuer's challenge.

🚧
If your checkout runs inside your own iframe
Browsers only let a page use passkeys inside an iframe if every frame above it allows them. If you embed your payment page, or a ProcessOut page, inside an iframe on your own site, you must allow passkeys on that iframe too. Otherwise the browser blocks the passkey and the issuer falls back to a one-time code.

Allowing passkeys in your own iframe

Add the allow attribute to any iframe that contains your checkout:

<iframe
  src="https://your-site.example/checkout"
  allow="payment *; publickey-credentials-get *; publickey-credentials-create *">
</iframe>

The * is needed because the 3DS challenge is served by the cardholder's issuer, and you can't know in advance which domain that will be.

Checking your Permissions-Policy header

If your site sends a Permissions-Policy HTTP header, make sure it doesn't disable passkeys. For example, this header blocks passkeys in every frame on the page, including the 3DS challenge:

Permissions-Policy: publickey-credentials-get=()

Either remove publickey-credentials-get from the header, or allow it for all origins:

Permissions-Policy: publickey-credentials-get=*

If your site doesn't send a Permissions-Policy header, you don't need to change anything.