How to Integrate a Payment Gateway on Wix Using Velo

🎯 Introduction

Many Wix website owners find the default Wix payment options limiting when it comes to handling complex payment needs. Custom payment gateways offer more flexibility, especially for businesses managing subscriptions, invoicing, or international transactions. Integrating a payment gateway using Wix Velo allows you to create a tailored payment experience that fits your business model perfectly.

This post explains how to build a secure payment flow on Wix using Velo, focusing on popular gateways like Adyen, GoCardless, and Stripe. Whether you want to accept international card payments or recurring bank payments, this guide will help you get started.

!Eye-level view of a laptop screen showing Wix Velo code editor with payment integration code

🛠️ What You Will Build

You will create a secure payment flow that includes:

• A payment form on your Wix site to collect payment details.

• Backend code using Velo to interact with the payment gateway API securely.

• Handling payment status updates with success and failure pages.

• Webhooks to update payment status in your Wix database automatically.

  
  

This setup ensures sensitive API keys stay hidden on the backend, and your customers have a smooth checkout experience.

✅ Prerequisites

Before you start, make sure you have:

• Wix Dev Mode (Velo) enabled on your site.

• An account with your chosen payment gateway (Adyen, GoCardless, or Stripe) with API credentials ready.

• Basic knowledge of JavaScript and how to work with Wix Velo backend and frontend code.

  

  
  

📦 Step 1 — Choose Your Gateway

Selecting the right payment gateway depends on your business needs:

• Adyen

Best for international payments and credit/debit card processing. It supports multiple currencies and payment methods worldwide.

• GoCardless

Ideal for recurring payments via bank debit, especially in Europe. Perfect for subscription-based businesses.

• Stripe

Great for startups and small businesses. Easy to set up with strong developer support and global reach.

Choose the gateway that fits your payment types and customer locations.

💻 Step 2 — Backend Code

Create a backend file, for example, `payment.web.js`, to handle API calls securely.

• Use the `wix-fetch` module to send requests to your payment gateway.

• Never expose your API keys or secrets in frontend code.

• The backend should generate a payment URL or token and return it to the frontend.

  
  

Example snippet for calling a payment API:

```javascript

import { fetch } from 'wix-fetch';

export async function createPayment(amount, currency) {

const apiKey = process.env.PAYMENT_API_KEY; // Stored securely in backend environment variables

const response = await fetch('https://api.paymentgateway.com/payments', {

method: 'POST',

headers: {

'Authorization': `Bearer ${apiKey}`,

'Content-Type': 'application/json'

},

body: JSON.stringify({

amount,

currency,

// other payment details

})

});

if (!response.ok) {

throw new Error('Payment creation failed');

}

const data = await response.json();

return data.paymentUrl; // URL to redirect customer for payment

}

```

This approach keeps your keys safe and handles sensitive operations on the server side.

🎨 Step 3 — Frontend Flow

On your Wix page:

• Build a payment form to collect amount and customer details.

• Call the backend function to create a payment session.

• Redirect the customer to the payment URL returned by the backend.

• After payment, redirect customers to success or failure pages on your Wix site.

  
  

Example frontend call:

```javascript

import { createPayment } from 'backend/payment.web.jsw';

$w.onReady(() => {

$w('#payButton').onClick(async () => {

const amount = Number($w('#amountInput').value);

try {

const paymentUrl = await createPayment(amount, 'USD');

wixLocation.to(paymentUrl);

} catch (error) {

console.error('Payment error:', error);

$w('#errorMessage').text = 'Payment failed. Please try again.';

}

});

});

```

This flow keeps the user experience smooth and secure.

🔒 Step 4 — Webhooks

Webhooks notify your Wix backend when payment status changes.

• Set your webhook URL in the payment gateway dashboard.

• Verify webhook signatures in your backend to ensure authenticity.

• Update your Wix database with payment status (paid, failed, pending).

  
  

Example webhook handler:

```javascript

import { ok, badRequest } from 'wix-http-functions';

export function post_paymentWebhook(request) {

const signature = request.headers['payment-signature'];

const body = request.body;

if (!verifySignature(body, signature)) {

return badRequest('Invalid signature');

}

const paymentStatus = body.status;

const paymentId = body.id;

// Update Wix database accordingly

// ...

return ok();

}

```

Make sure your webhook URL is publicly accessible and uses HTTPS.

🐛 Common Issues

| Issue | Solution |

|--------------------|---------------------------------|

| API key exposed | Use backend only for API calls |

| Payment failing | Check sandbox vs live credentials|

| Webhook not firing | Ensure webhook URL is public |

| CORS error | Route all calls through backend |

💡 Pro Tips

• Always test in sandbox mode before going live.

• Log transactions in your Wix database for easy tracking.

• Use Wix triggered emails to send payment confirmations automatically.

• Keep your API keys secure and rotate them regularly.

  
  
  
  

🚀 Conclusion

Integrating a custom payment gateway on Wix using Velo opens up new possibilities for your business. You can handle subscriptions, invoices, and international payments with more control and security than Wix default options.

If you want expert help building or customizing your payment flow, visit wixcrafters.com or email wixcrafters@gmail.com. Our team has a 5-star rating on Fiverr and specializes in Wix Velo development.

Start building your custom payment solution today and give your customers a seamless checkout experience.