如何在AngularJS 1.6.4中集成PayUMoney测试环境？

Alright, let's tackle this PayUMoney integration issue in your AngularJS 1.6 app step by step. That error message is pretty clear once you break it down—you're hitting PayU's test environment URL, but using a production merchant key (or an invalid test key). Here's a complete, test-ready solution tailored for AngularJS 1.6:

1. First: Secure Correct Test Credentials #

The root of your error is mismatched environment credentials. Fix this first:

• Log into your PayU merchant dashboard and toggle on Test Mode (usually found in settings or a dedicated test environment tab)
• Grab your test-specific Merchant Key and Merchant Salt—these are completely separate from your production credentials, so don't mix them up!
• Confirm you're using the test URL: https://test.payu.in/_payment (never use the production https://secure.payu.in/_payment for testing)

2. AngularJS 1.6 Integration Steps #

a. Create a Reusable Payment Service #

Wrap payment logic in an AngularJS service to keep your controllers clean and maintainable:

angular.module('yourAppName').service('payuTestPaymentService', function($http, $window) {
    // Replace these with your actual test credentials
    const TEST_MERCHANT_KEY = "YOUR_TEST_MERCHANT_KEY";
    const TEST_MERCHANT_SALT = "YOUR_TEST_MERCHANT_SALT";
    const PAYU_TEST_URL = "https://test.payu.in/_payment";

    // ⚠️ IMPORTANT: Hash generation should happen on your BACKEND in production!
    // This frontend implementation is ONLY for testing purposes—never expose your salt publicly.
    this.generatePaymentHash = function(paymentData) {
        // Follow PayU's exact hash order: key|txnid|amount|productinfo|firstname|email|udf1|udf2|udf3|udf4|udf5||||||salt
        const hashString = `${TEST_MERCHANT_KEY}|${paymentData.txnid}|${paymentData.amount}|${paymentData.productinfo}|${paymentData.firstname}|${paymentData.email}|||||||||||${TEST_MERCHANT_SALT}`;
        return CryptoJS.SHA512(hashString).toString();
    };

    // Initiate payment by dynamically creating and submitting a form
    this.startTestPayment = function(paymentDetails) {
        // Add mandatory fields to payment data
        paymentDetails.key = TEST_MERCHANT_KEY;
        paymentDetails.hash = this.generatePaymentHash(paymentDetails);
        paymentDetails.surl = "https://your-test-domain.com/payment-success"; // Test success callback
        paymentDetails.furl = "https://your-test-domain.com/payment-failure"; // Test failure callback
        paymentDetails.service_provider = "payu_paisa";

        // Build hidden form and submit to PayU test environment
        const paymentForm = angular.element('<form>');
        paymentForm.attr('method', 'POST');
        paymentForm.attr('action', PAYU_TEST_URL);
        paymentForm.attr('target', '_blank'); // Open payment page in new tab

        // Populate form with payment data
        angular.forEach(paymentDetails, (value, key) => {
            const input = angular.element('<input type="hidden">');
            input.attr('name', key);
            input.attr('value', value);
            paymentForm.append(input);
        });

        // Attach form to DOM, submit, then clean up
        angular.element('body').append(paymentForm);
        paymentForm[0].submit();
        paymentForm.remove();
    };
});

b. Use the Service in Your Controller #

Call the payment service from your controller when the user triggers a payment:

angular.module('yourAppName').controller('PaymentController', function($scope, payuTestPaymentService) {
    $scope.triggerTestPayment = function() {
        const testPaymentData = {
            txnid: `TEST_TXN_${Date.now()}`, // Unique transaction ID (use your own logic in production)
            amount: '10.00', // Test amount (can be any value for testing)
            productinfo: 'Test AngularJS Product',
            firstname: 'Test User',
            email: 'test-user@example.com',
            phone: '9999999999'
        };

        // For production: Replace this with an API call to your backend to get the hash
        // $http.post('/api/generate-payu-hash', testPaymentData)
        //     .then(res => {
        //         testPaymentData.hash = res.data.hash;
        //         payuTestPaymentService.startTestPayment(testPaymentData);
        //     });

        // For testing only: Use frontend-generated hash
        payuTestPaymentService.startTestPayment(testPaymentData);
    };
});

c. Add Required Dependencies #

• If using frontend hash generation (only for testing), include CryptoJS:
  Add this script tag to your HTML: <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.9-1/crypto-js.min.js"></script>
• Ensure AngularJS 1.6 is properly loaded in your app

3. Test the Payment Flow #

1. Click your payment button to trigger triggerTestPayment()
2. A new tab will open with PayU's test payment page
3. Use PayU's test card details to complete the transaction:
   • Card number: 4111111111111111
   • Expiry date: Any future month/year (e.g., 12/28)
   • CVV: 123
4. You'll be redirected to your test success/failure URL based on the test transaction outcome

4. Troubleshooting Tips #

• Still getting key errors? Double-check that your Merchant Key is from the test environment, not production. Regenerate test credentials in your PayU dashboard if needed.
• Hash mismatch errors? Verify the hash string follows PayU's exact parameter order—even a small deviation will break the signature.
• Form not submitting? Ensure AngularJS isn't blocking DOM manipulation; test the form creation logic in isolation if needed.

内容的提问来源于stack exchange，提问作者Mohammad Zeeshan