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 in your application where Devdraft sends users after they complete specific actions like payments, authentication, or checkout processes. These URLs ensure users return to the appropriate pages in your application with relevant transaction information.
Redirect URLs management dashboard showing configured URLs and controls

​
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

​
Video Tutorial: Redirect URL Configuration

Watch this tutorial to see how to set up and manage redirect URLs:

​
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

Start URL Creation

Go to App Settings → Redirect URLs and click Add Redirect URL.
Add Redirect URL button location in settings
2

Configure URL Details

URL Name: Provide a descriptive name to identify this redirect URLExamples:
  • “Payment Success - E-commerce Store”
  • “Authentication Callback - Mobile App”
  • “Payment Failed - Checkout Flow”
  • “Order Confirmation - Subscription Service”
Redirect URL: Enter the full URL where users should be redirected
  • Must be a valid HTTP or HTTPS URL
  • Should be owned and controlled by you
  • Must be publicly accessible
  • Include any necessary query parameters
Redirect URL creation form with name and URL fields
Use descriptive names that clearly indicate the purpose and context of each redirect URL.
3

URL Validation

Automatic Validation:
  • System checks URL format and accessibility
  • Verifies protocol (HTTP/HTTPS)
  • Ensures URL is reachable
  • Prevents malformed entries
Ensure your redirect URLs are accessible and properly handle the parameters Devdraft will include.
4

Save and Test

Click Add Redirect URL to save the entry to your configuration.
The redirect URL is immediately available for use in payment flows and API calls.

​
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.