Configure redirect URLs to control where users are sent after completing payments, authentication flows, or other interactions with your Devdraft integration. Properly configured redirect URLs ensure seamless user experiences and secure transaction flows.

​
What are Redirect URLs?

Redirect URLs are predefined endpoints where users are automatically redirected after completing specific actions in your Devdraft-powered applications. They provide seamless user experience by directing users to appropriate pages based on transaction outcomes or user actions.

​
Quick Setup

Configure redirect URLs in under 2 minutes:
1

Access Redirect URL Settings

Navigate to App Settings → Redirect URLs in your dashboard
2

Add Redirect URL

Click Add Redirect URL and provide your application URL
3

Configure URL Details

Provide a descriptive name and verify the URL format
4

Test and Activate

Verify your URLs handle redirects correctly

​
Redirect URL Types

Successful Transaction Redirects:
  • Where users go after successful payments
  • Include transaction confirmation details
  • Show payment receipt or order confirmation
  • Enable next steps in user journey
Example: https://yourapp.com/payment/success

​
Adding Redirect URLs

1

Access Redirect Settings

Navigate to App Settings → Redirect URLs.
2

Create New Redirect

Click Add URL and configure:
  • URL destination
  • Purpose/description
  • Status (Active/Inactive)
3

Test and Save

Verify the URL format and save the redirect configuration.

​
Managing Redirect URLs

​
URL Parameters

Transaction Information:
https://yourapp.com/success?
  transaction_id=txn_123456&
  amount=1000&
  currency=USD&
  status=completed&
  customer_id=cust_789
Common Parameters:
  • transaction_id - Unique transaction identifier
  • amount - Transaction amount
  • currency - Transaction currency
  • status - Transaction status
  • customer_id - Customer identifier

​
Security Considerations

HTTPS Recommended

Use HTTPS URLs for sensitive redirects to protect user data and prevent interception

State Validation

Implement state parameter validation to prevent CSRF attacks in authentication flows

Domain Verification

Only use redirect URLs from domains you own and control to maintain security

Parameter Sanitization

Validate and sanitize all parameters received in redirect URLs before processing

​
Implementation Examples

import { useEffect, useState } from 'react';
import { useSearchParams } from 'react-router-dom';

function PaymentSuccess() {
  const [searchParams] = useSearchParams();
  const [transaction, setTransaction] = useState(null);

  useEffect(() => {
    const transactionId = searchParams.get('transaction_id');
    const amount = searchParams.get('amount');
    const currency = searchParams.get('currency');
    const status = searchParams.get('status');

    if (transactionId && status === 'completed') {
      setTransaction({
        id: transactionId,
        amount: parseFloat(amount),
        currency,
        status
      });
    }
  }, [searchParams]);

  return (
    <div>
      <h1>Payment Successful!</h1>
      {transaction && (
        <div>
          <p>Transaction ID: {transaction.id}</p>
          <p>Amount: {transaction.amount} {transaction.currency}</p>
        </div>
      )}
    </div>
  );
}

​
Best Practices

1

Plan Your User Flow

Design Considerations:
  • Map out complete user journeys for different scenarios
  • Consider mobile and desktop experiences
  • Plan for error handling and recovery
  • Design clear success and failure states
Create wireframes or mockups of your redirect pages before implementing the URLs.
2

Implement Robust Error Handling

Error Management:
  • Handle missing or invalid parameters gracefully
  • Provide clear error messages and next steps
  • Implement fallback redirects for edge cases
  • Log errors for debugging and analysis
// Example error handling
app.get('/payment/callback', (req, res) => {
  try {
    const transactionId = req.query.transaction_id;
    
    if (!transactionId) {
      throw new Error('Missing transaction ID');
    }
    
    // Process successful callback
    processPaymentCallback(req.query);
    res.redirect('/success');
    
  } catch (error) {
    console.error('Callback error:', error);
    res.redirect('/error?message=' + encodeURIComponent(error.message));
  }
});
3

Test All Scenarios

Comprehensive Testing:
  • Test success, failure, and cancellation flows
  • Verify parameter handling and validation
  • Test with different browsers and devices
  • Validate security measures and CSRF protection
Always test redirect URLs in staging environments before deploying to production.
Redirect URLs are critical for user experience and security. Ensure they are properly configured, tested, and monitored to provide seamless transaction flows.