PHP调用JavaScript实现第三方交易确认及倒计时跳转开发需求

Here's a complete, human-readable implementation that meets your requirement: a loading state during transaction verification, a 5-second delay before checking status, and a countdown redirect to the success page once confirmed.

1. Frontend HTML/JavaScript #

This page handles the user-facing loading state, triggers the transaction check after 5 seconds, and manages the redirect countdown.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Processing Payment</title>
    <style>
        .loading-wrapper {
            text-align: center;
            margin: 80px auto;
            max-width: 600px;
            font-family: 'Arial', sans-serif;
        }
        .status-message {
            font-size: 1.1em;
            color: #333;
            margin-top: 15px;
        }
        .countdown {
            color: #27ae60;
            font-size: 1.3em;
            font-weight: bold;
            margin-top: 25px;
            display: none;
        }
    </style>
</head>
<body>
    <div class="loading-wrapper">
        <h2>Processing Your $50 Payment to Juma Joe</h2>
        <p class="status-message">Please wait while we verify your transaction (this may take up to 5 seconds)</p>
        <div class="countdown" id="countdown"></div>
    </div>

    <script>
        // Wait 5 seconds before initiating transaction status check
        setTimeout(checkTransactionStatus, 5000);

        async function checkTransactionStatus() {
            try {
                // Fetch verification result from PHP backend
                const response = await fetch('verify_transaction.php?transaction_id=YOUR_UNIQUE_TRANSACTION_ID');
                const data = await response.json();

                if (data.success) {
                    // Start redirect countdown if transaction is confirmed
                    startRedirectCountdown(5);
                } else {
                    // Update UI for failed verification
                    document.querySelector('.status-message').textContent = 
                        'Transaction verification failed. Please refresh and try again.';
                }
            } catch (error) {
                console.error('Status check error:', error);
                document.querySelector('.status-message').textContent = 
                    'An error occurred. Please check your payment and try again.';
            }
        }

        function startRedirectCountdown(seconds) {
            const countdownEl = document.getElementById('countdown');
            countdownEl.style.display = 'block';
            
            let remaining = seconds;
            updateCountdownText(remaining);

            const interval = setInterval(() => {
                remaining--;
                updateCountdownText(remaining);
                
                if (remaining <= 0) {
                    clearInterval(interval);
                    // Redirect to your success page
                    window.location.href = 'success_page.php';
                }
            }, 1000);
        }

        function updateCountdownText(seconds) {
            document.getElementById('countdown').textContent = 
                `Transaction successful! Redirecting to your confirmation page in ${seconds} seconds...`;
        }
    </script>
</body>
</html>

2. PHP Backend (verify_transaction.php) #

This script handles the actual third-party transaction verification (replace the placeholder logic with your real API call to Juma Joe's service).

<?php
// Initialize response array
$response = ['success' => false];

// Get the unique transaction ID passed from the frontend
$transactionId = $_GET['transaction_id'] ?? '';

// --------------------------
// Replace this section with your real third-party verification logic
// Example: Call Juma Joe's API to confirm the $50 payment
// --------------------------
// Simulate API delay for testing (remove in production)
sleep(1);

// Mock success condition (replace with actual API response check)
$isTransactionValid = true; // Set to false to test failure flow

if ($isTransactionValid && !empty($transactionId)) {
    $response['success'] = true;
}
// --------------------------

// Return JSON response to frontend
header('Content-Type: application/json');
echo json_encode($response);
?>

Key Details Explained #

• Loading State: The initial UI keeps users informed while we wait to check the transaction.
• 5-second Delay: Uses setTimeout to wait exactly 5 seconds before triggering the status check, as requested.
• PHP Integration: The frontend calls a PHP endpoint to handle the secure third-party API verification (never expose sensitive API calls directly in frontend JS).
• Countdown & Redirect: Once success is confirmed, a visible countdown starts before sending the user to the success page.
• Error Handling: Includes fallback messages for failed verification or network errors to keep users informed.

Quick Setup Tips #

• Transaction ID: Replace YOUR_UNIQUE_TRANSACTION_ID with the actual ID generated when the user initiated payment. You can also store this in a PHP session instead of passing it via query params for extra security.
• Third-Party API: Swap the mock verification logic in verify_transaction.php with your actual API call to Juma Joe's transaction confirmation endpoint.
• Styling: Adjust the CSS to match your application's brand and layout.

内容的提问来源于stack exchange，提问作者T.G.B