Prerequisites
This guide assumes you have already implemented the basic vaulting flow. If you haven’t done that yet, please start with the native vaulting guide. You should already have:- The Gr4vy SDK installed in your project.
- An initialized Gr4vy instance.
- A backend endpoint that generates a Checkout Session.
Implementation
To add 3DS support, you use the standardtokenize method (the vaulting method) and set the authenticate parameter to true. This tells the SDK to automatically manage the 3DS lifecycle: it performs device fingerprinting (Identify) and presents a native challenge UI (Challenge) if required by the card issuer.
Update SDK logic
Backend Authorization
Once the SDK returns a successful result, the 3DS verification data is securely stored within the Checkout Session. When your app notifies your backend, create the transaction by referencing the session ID in thepayment_method object.
The system automatically detects the 3DS data and ensures it is passed to your payment processor to satisfy SCA requirements.
Handling failed authentication
If a customer fails or cancels their 3DS authentication, you have the option to still process the payment using the vaulted card data. This is useful for scenarios where:- The customer wants to retry with a different payment method later
- You want to reduce friction by allowing offline card storage
- Your business model supports processing payments without 3DS authentication (subject to regional regulations and processor rules)
Theming
When a 3DS challenge is required, the Gr4vy SDK presents a native interface provided by the card issuer. You can customize the appearance of these screens to ensure they match your app’s branding and provide a consistent user experience. Customization is handled via auiCustomization object passed during the SDK initialization. This allows you to define colors, fonts, and button styles that are applied to the 3DS challenge modals.
- Text: Colors and font sizes for headings, body text, and input fields.
- Buttons: Background colors, text colors, and corner radii for “Continue” and “Cancel” actions.
- Navigation Bar: Background and title colors for the header.
- Input Fields: Border colors and focus states.
#007AFF).
Testing and validation
To test your implementation, use the 3DS Test Cards defined here in your sandbox environment.- Frictionless Flow: Use a card that is configured to skip the challenge phase. The SDK can return success immediately after the authentication call.
- Challenge Flow: Use a card that requires an SMS or Biometric challenge. The SDK can automatically present the native modal for you to complete.
Testing scenarios
Visa
| Card Number | Expected 3DS Outcome |
|---|---|
4000 0000 0000 0010 | Frictionless Success: Authenticated without user interaction. |
4000 0000 0000 0028 | Challenge Required: Triggers a native 3DS challenge UI. |
4000 0000 0000 0044 | Authentication Failed: Simulates a “Not Authenticated” result. |
4000 0000 0000 1042 | Rejected: The authentication request was explicitly rejected. |
Mastercard
| Card Number | Expected 3DS Outcome |
|---|---|
5100 0000 0000 0010 | Challenge Required: Triggers a native 3DS challenge UI. |
5200 0000 0000 2052 | Frictionless Success: Authenticated without user interaction. |
5200 0000 0000 1039 | Unavailable: Simulates a scenario where 3DS is not available for the card. |
5100 0000 0000 0065 | Suspected Fraud: Frictionless failure due to suspected fraud. |
American Express
| Card Number | Expected 3DS Outcome |
|---|---|
3415 0209 8634 895 | Frictionless Success: Authenticated without user interaction. |
3486 3826 7931 507 | Challenge Required: Triggers a native 3DS challenge UI. |
3456 9539 9207 589 | Authentication Failed: Frictionless failure. |
Challenge screen inputs
When a challenge is triggered, use the following values to simulate different transaction results within the native UI.OTP (One-Time Password)
When the challenge screen asks for a code, enter one of the following:| OTP Code | Resulting Transaction Status | Description |
|---|---|---|
1234 | Y | Success / Authenticated. |
1111 | N | Not Authenticated. |
2222 | R | Rejected. |
3333 | U | Unavailable / Unable to complete. |
Selection options
Some challenges may present a list of options (for example, “Select your favorite city”). Single-select- Paris or Nice: Returns Success (Y).
- Paris & Lyon: Returns Success (Y).
- Toulouse & Lyon: Returns Success (Y).
Best practices for testing
- Verify UI transitions: Ensure your app correctly transitions from the card entry screen to the native 3DS challenge modal and back.
- Test error states: Use the “Rejected” or “Failed” cards to ensure your app displays helpful messaging to the user when a card cannot be verified.
- Check Backend Session: After a successful test, verify that the checkout_session_id on your server reflects the successful authentication before attempting the final transaction.