Radar

Overview

Stripe Radar is Stripe's machine learning-powered fraud prevention tool that helps businesses detect and prevent fraudulent transactions. When integrated with Vrio's API, Radar provides enhanced fraud detection capabilities for your payment processing.

What is Stripe Radar?

Stripe Radar uses machine learning algorithms trained on billions of transactions across the Stripe network to identify potentially fraudulent activity. It provides:

Real-time fraud scoring for every transaction
Rule-based blocking for specific risk scenarios
Dynamic authentication using 3D Secure when needed
Detailed analytics on fraud patterns and trends

Implementation Guide

Step 1: Enable Radar in Your Stripe Dashboard

Log in to your Stripe Dashboard
Navigate to Radar → Overview
Review and configure your fraud prevention rules
Note your Radar settings for different risk levels

Step 2: Create Payment Tokens with Radar Integration

To maximize fraud detection capabilities, create a Radar session and use it with Payment Elements to generate payment tokens. Here's a complete working example that shows both Radar session creation and payment token generation:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Stripe Radar + Payment Elements Example</title>
    <script src="https://js.stripe.com/v3/"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 600px;
            margin: 0 auto;
            padding: 20px;
        }
        .form-group {
            margin-bottom: 20px;
        }
        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }
        input, select {
            width: 100%;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-sizing: border-box;
        }
        #payment-element {
            width: 100%;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-sizing: border-box;
        }
        button {
            background-color: #007cba;
            color: white;
            padding: 12px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
        }
        button:disabled {
            background-color: #ccc;
            cursor: not-allowed;
        }
        .error {
            color: #e74c3c;
            margin-top: 5px;
        }
        .success {
            color: #27ae60;
            margin-top: 5px;
        }
        .info {
            background-color: #e8f4fd;
            border: 1px solid #bee5eb;
            border-radius: 4px;
            padding: 10px;
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <h1>Stripe Radar + Payment Elements Example</h1>
    
    <div class="info">
        <strong>Note:</strong> This example shows how to create both a Radar session for fraud detection and a payment token using Payment Elements. Radar sessions require "Advanced fraud detection" to be enabled in your Stripe Dashboard under Settings → Radar.
    </div>
    
    <form id="radar-form">
        <div class="form-group">
            <label for="publishable-key">Stripe Publishable Key:</label>
            <input type="text" id="publishable-key" placeholder="pk_test_..." required>
        </div>
        
        <div class="form-group">
            <label for="token-type">Token Type:</label>
            <select id="token-type" onchange="handleTokenTypeChange()">
                <option value="confirmation">Confirmation Token (Recommended)</option>
                <option value="payment-method">Payment Method Token</option>
            </select>
        </div>
        
        <button type="button" onclick="initializeStripe()">Initialize Stripe & Payment Elements</button>
        <div id="stripe-status" style="margin-top: 10px;"></div>
        
        <div class="form-group" style="margin-top: 20px;">
            <label for="cardholder-name">Cardholder Name:</label>
            <input type="text" id="cardholder-name" value="John Doe" required>
        </div>
        
        <div class="form-group">
            <label for="email">Email:</label>
            <input type="email" id="email" value="[email protected]" required>
        </div>
        
        <div id="payment-element-container" style="display: none; margin: 20px 0;">
            <label>Payment Information (Payment Element):</label>
            <div id="payment-element"></div>
            <div id="payment-errors" class="error"></div>
        </div>
        
        <button type="button" onclick="createRadarSession()" id="create-radar-button" disabled>1. Create Radar Session</button>
        <div id="radar-result" style="margin: 10px 0;"></div>
        
        <button type="button" onclick="createPaymentToken()" id="create-token-button" disabled>2. Create Payment Token</button>
        <div id="token-result" style="margin: 10px 0;"></div>
        
        <button type="submit" id="create-both-button" disabled>Create Both (Recommended)</button>
        <div id="combined-result"></div>
    </form>

    <script>
        let stripe;
        
        function initializeStripe() {
            const publishableKeyElement = document.getElementById('publishable-key');
            if (!publishableKeyElement) {
                console.error('Could not find publishable-key element');
                return;
            }
            
            const publishableKey = publishableKeyElement.value.trim();
            const statusDiv = document.getElementById('stripe-status');
            
            if (!statusDiv) {
                console.error('Could not find stripe-status element');
                return;
            }
            
            if (!publishableKey) {
                statusDiv.innerHTML = '<div class="error">Please enter a Stripe publishable key</div>';
                return;
            }
            
            try {
                stripe = Stripe(publishableKey);
                statusDiv.innerHTML = '<div class="success">Stripe initialized successfully</div>';
                document.getElementById('create-session-button').disabled = false;
                console.log('Stripe initialized with key:', publishableKey);
            } catch (error) {
                statusDiv.innerHTML = '<div class="error">Error initializing Stripe: ' + error.message + '</div>';
                console.error('Stripe initialization error:', error);
            }
        }
        
        // Handle form submission
        document.getElementById('radar-form').addEventListener('submit', async (event) => {
            event.preventDefault();
            
            if (!stripe) {
                alert('Please initialize Stripe first');
                return;
            }
            
            const submitButton = document.getElementById('create-session-button');
            const resultDiv = document.getElementById('radar-result');
            
            // Disable submit button during processing
            submitButton.disabled = true;
            submitButton.textContent = 'Creating Session...';
            resultDiv.innerHTML = '';
            
            try {
                console.log('=== Creating Radar Session ===');
                
                // Create Radar Session for fraud detection
                const {radarSession, error} = await stripe.createRadarSession();
                
                // Re-enable submit button
                submitButton.disabled = false;
                submitButton.textContent = 'Create Radar Session';
                
                if (error) {
                    console.error('Radar session error:', error);
                    resultDiv.innerHTML = `<div class="error">Error: ${error.message}<br><small>Make sure "Advanced fraud detection" is enabled in your Stripe Dashboard</small></div>`;
                } else {
                    console.log('Radar Session Created:', radarSession);
                    resultDiv.innerHTML = `
                        <div class="success">
                            <strong>Success!</strong><br>
                            Radar Session ID: <code>${radarSession.id}</code><br>
                            <small>Use this ID as stripe_radar_session in your Vrio API call</small>
                        </div>
                    `;
                }
                
            } catch (error) {
                console.error('Exception creating Radar session:', error);
                submitButton.disabled = false;
                submitButton.textContent = 'Create Radar Session';
                resultDiv.innerHTML = `<div class="error">Error: ${error.message}</div>`;
            }
        });
    </script>
</body>
</html>

For additional details on Radar session implementation, review the documentation from Stripe's Website here.

Sending to Vrio API

Once you have retrieved the Radar Session and payment token, you can process the payment through Vrio's API.

Step 1: Configure Your Merchant Account

Ensure your Stripe merchant account is properly configured in your Vrio dashboard with the appropriate API keys and has Radar enabled.

Step 2: Create an Order

First, create an order using Vrio's order creation endpoint ( NOTE: you can also pass the payment_token and stripe_radar_session in Step 1 if you are using the process=action when creating the order ):

curl -X POST "https://api.vrio.app/orders" \
  -H "Content-Type: application/json" \
  -H "X-API-KEY: YOUR_API_KEY" \
  -d '{
    "connection_id": 1,
    "campaign_id": 18,
    "offers": "[{\"offer_id\":89, \"order_offer_quantity\": 1,\"order_offer_price\":0.50}]",
    "email": "[email protected]",
    "bill_fname": "John",
    "bill_lname": "Doe",
    "bill_phone": "+1234567890",
    "bill_address1": "123 Main St",
    "bill_city": "Anytown",
    "bill_state": "NY",
    "bill_zipcode": "12345",
    "bill_country": "US",
    "ship_address1": "123 Main St",
    "ship_city": "Anytown",
    "ship_state": "NY", 
    "ship_zipcode": "12345",
    "ship_country": "US"
  }'

This will return an order object with an order_id.

Step 3: Process Payment with Radar Session

Use the order processing endpoint with your payment token and Radar session:

With Payment Token

curl -X POST "https://api.vrio.app/orders/{order_id}/process" \
  -H "Content-Type: application/json" \
  -H "X-API-KEY: YOUR_API_KEY" \
  -d '{
    "payment_method_id": 15,
    "payment_token": "pm_1Nxxxxxxxxxxxxxx",
    "merchant_id": 456,
    "stripe_radar_session": "rse_1Nxxxxxxxxxxxxxx"
  }'

With Raw Card Data

curl -X POST "https://api.vrio.app/orders/{order_id}/process" \
  -H "Content-Type: application/json" \
  -H "X-API-KEY: YOUR_API_KEY" \
  -d '{
    "payment_method_id": 1,
    "card_type_id": "1",
    "card_number": "4111111111111111",
    "card_cvv": "123",
    "card_exp_month": "01",
    "card_exp_year": "2027",
    "merchant_id": 456,
    "stripe_radar_session": "rse_1Nxxxxxxxxxxxxxx"
  }'