Troubleshooting Kount Device Data Collection with Recurly.js React

When using the Recurly.js React library with Kount Fraud Management, device data may fail to appear on test or live transactions if the RiskDataCollector component is not implemented correctly.

This article explains the most common cause of missing Kount device data when using React and provides the correct implementation pattern.

Common Symptoms

• Kount dashboard shows transactions with no device fingerprint data
• Recurly transactions indicate device data was not captured
• Fraud rules relying on device data do not trigger as expected
• Issue occurs only when using React (non-React Recurly.js works)

Root Cause

The RiskDataCollector component relies on being able to attach to the nearest ancestor HTMLFormElement.

If the component is rendered outside of the payment form, device data collection will silently fail and no data will be sent to Kount.

Correct Implementation

Ensure that the RiskDataCollector component is rendered inside the same <form> element that submits payment details.

<form
  ref={formRef}
  onSubmit={handlePurchaseSubmit}
>
  <RiskDataCollector
    strategy="kount"
    onError={handleError}
  />

  <CardElement />
</form>
    

How to Verify

1. Submit a test transaction using the updated implementation.
2. Open the transaction in the Recurly Admin UI.
3. Confirm device data is present on the transaction record.
4. Check the Kount dashboard to ensure the device fingerprint is visible.

Additional Notes

• This requirement applies specifically to the React wrapper for Recurly.js.
• Standard (non-React) Recurly.js implementations are not affected.
• This behavior applies in both sandbox and production environments.