Accepting Payments in WIX

This guide walks you through integrating Felloh as a custom payment provider using Wix Payment Provider Service Plugins and Felloh’s Payment Link API.

This integration allows your Wix store to redirect customers to a secure Felloh-hosted payment page at checkout using the Payment Provider Plugin architecture.

You can view a demo of this in action here

1. Enable Dev Mode and Create the Plugin

  1. Open your Wix Editor
  2. Enable Dev Mode from the top bar
  3. In the Code Sidebar, scroll to Service Plugins → Click
  4. Choose Payment Provider Plugin
  5. Enter a name like (no spaces or special chars)
  6. Click Add & Edit Code

Wix generates two files:

  • felloh-config.js
  • felloh.js

2. Configure the Plugin UI (felloh-config.js)

export function getConfig() {
  return {
    title: 'Felloh',
    paymentMethods: [
      {
        hostedPage: {
          title: 'Felloh Checkout',
          billingAddressMandatoryFields: ['EMAIL'],
        logos: {
          white: {
            svg: 'https://cdn.prod.website-files.com/64b1188870b9cd399d5c74bc/67f384af22908612d46e8717_Vector.svg'
          },
          colored: {
            svg: 'https://cdn.prod.website-files.com/64b1188870b9cd399d5c74bc/67f384af22908612d46e8717_Vector.svg'
          }
        }
      }
    ],
    credentialsFields: [
      { simpleField: { name: 'public_key', label: 'Public Key' } },
      { simpleField: { name: 'private_key', label: 'Private Key' } },
      { simpleField: { name: 'organisation_id', label: 'Organisation ID' } }
    ]
  };
}

3. Implement Payment Logic (felloh.js)

import { fetch } from 'wix-fetch';

export async function connectAccount(options) {
  const { credentials } = options;
  return {
    credentials,
    accountId: credentials.public_key,
    accountName: 'Felloh Account'
  };
}

export async function createTransaction(options) {
  const { merchantCredentials, order } = options;
  const { public_key, private_key, organisation_id } = merchantCredentials;
  const { successUrl, errorUrl, cancelUrl } = order.returnUrls;

  // 1) Auth
  const authResp = await fetch('https://api.felloh.com/token', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ public_key, private_key })
  });
  const token = (await authResp.json()).data.token;

  // 2) Booking
  const bookingResp = await fetch('https://api.felloh.com/agent/bookings', {
    method: 'PUT',
    headers: {
      'Content-Type': 'application/json',
      Authorization: `Bearer ${token}`
    },
    body: JSON.stringify({
      organisation: organisation_id,
      customer_name: `${order.description.billingAddress.firstName} ${order.description.billingAddress.lastName}`,
      email: order.description.billingAddress.email,
      booking_reference: order._id,
      departure_date: '2025-07-01',
      return_date: '2025-07-05',
      gross_amount: Number(order.description.totalAmount)
    })
  });

  const bookingId = (await bookingResp.json()).data.id;

  // 3) Payment Link
  const linkResp = await fetch('https://api.felloh.com/agent/payment-links', {
    method: 'PUT',
    headers: {
      'Content-Type': 'application/json',
      Authorization: `Bearer ${token}`
    },
    body: JSON.stringify({
      organisation: organisation_id,
      customer_name: `${order.description.billingAddress.firstName} ${order.description.billingAddress.lastName}`,
      email: order.description.billingAddress.email,
      booking_id: bookingId,
      amount: Number(order.description.totalAmount),
      open_banking_enabled: true,
      card_enabled: true,
      description: order.description.items.map(i => i.name).join(', '),
      success_url: successUrl,
      failure_url: errorUrl,
      cancel_url: cancelUrl
    })
  });

  const paymentLinkId = (await linkResp.json()).data.id;
  const redirectUrl = `https://pay.felloh.com/${paymentLinkId}`;

  return {
    pluginTransactionId: paymentLinkId,
    redirectUrl
  };
}

export async function refundTransaction(options) {
  return {
    pluginRefundId: 'not-supported'
  };
}

5. Deploy & Connect

  1. Publish your site
  2. Go to Dashboard → Accept Payments → See More Payment Options
  3. Find Felloh and click Connect
  4. Enter your Public Key, Private Key, and Organisation ID
  5. Done 🎉