WIX网站集成Authorize.net Accept Hosted API跳转支付页遇阻求助

Let's break down why your current approaches aren't working and walk through a reliable solution that fits Wix's environment.

Why Your Current Methods Fail #

1. wixLocation.to() with GET URL: Authorize.net's Accept Hosted requires a POST request to their payment endpoint (even though the test URL looks like it accepts GET). Wix might also block cross-origin GET redirects to payment gateways as a security measure.
2. Raw HTML Form: Wix doesn't allow injecting raw HTML forms directly into functions, so that static HTML snippet won't work as-is.
3. Fetch POST Request: Fetch runs in the background and doesn't trigger a browser page load—you're getting a "Successful" response because the API call works, but it won't redirect the user to the payment page.

Working Solution: Dynamically Create & Submit a Form #

The way around Wix's restrictions is to generate a form dynamically using JavaScript, then trigger a submit to Authorize.net's endpoint. Here's how to implement this in your Wix frontend code:

// After you've retrieved your valid token from getHostedPaymentPageRequest
const processPayment = (token) => {
  // Create a hidden form element
  const form = document.createElement('form');
  form.method = 'POST';
  form.action = 'https://test.authorize.net/payment/payment';
  form.style.display = 'none'; // Hide the form from view

  // Add the token as a hidden input
  const tokenInput = document.createElement('input');
  tokenInput.type = 'hidden';
  tokenInput.name = 'token';
  tokenInput.value = token;
  form.appendChild(tokenInput);

  // Add the form to the page and submit it
  document.body.appendChild(form);
  form.submit();
};

// Call this function with your retrieved token
processPayment(objToken.token);

Key Checks to Ensure Success #

• Validate Your Token: Double-check that the objToken.token value you're using is a valid, unexpired token from Authorize.net's API. Log it to the console to confirm it's not empty or malformed.
• Wix Security Settings: Ensure Wix's Content Security Policy (CSP) allows requests to test.authorize.net. You can verify this by checking your browser's DevTools Console for CSP-related errors.
• Test in Live Mode: Sometimes Wix's preview environment has stricter restrictions—test your code in a published version of your site to rule out preview-specific issues.

Why This Works #

By dynamically creating a form and submitting it, you're mimicking the behavior of a traditional HTML form submit, which triggers a browser redirect to Authorize.net's payment page. This bypasses Wix's restrictions on raw HTML and aligns with how Authorize.net expects to receive the token.

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