Embed Fygaro Link into Wix Checkout

Tutorial: Connecting Fygaro Payments to WIX Checkout

Disclaimer

Ensure you back up your site before implementing this integration and thoroughly test it before enabling it in production.

Connecting Fygaro with Wix to collect payments requires:

A Fygaro subscription plan with Hook capabilities.
A Wix account with an online store/e-commerce feature.

Looking for a better solution? Explore Fygaro Shops – the no-code, ready-to-use webstore builder with built-in payments and logistics to simplify your business.

Step 1: Access Wix Website Editor

Log in to your Wix dashboard.
Open the website editor.

---

Step 2: Enable Developer Mode

In the top menu bar of the site editor, click on Dev Mode.
Follow the activation steps to enable Developer Mode.

---

Step 3: Install Required NPM Package

Once Developer Mode is enabled, click on Packages & App in the left menu bar.
Click the + sign next to npm and install the jsonwebtoken package.

---

Step 4: Create Backend Files

In the left menu bar, select Backend and Public.
Click the + sign under Backend, then click Add .js File.
Name the file fygaro.web.js and include the following code:

// Working ample Code Block, update as needed.

import { Permissions, webMethod } from "wix-web-module";
import jwt from 'jsonwebtoken'; // Install "jsonwebtoken" package in Wix Velo settings

export const getFJWT = webMethod(
    Permissions.Anyone,
    async (api_public, api_secrete, cartTotal, taxes, currency, orderNumber) => {
        
        const SECRET_KEY = api_secrete;
        const KID = api_public; 

        const payload = {
            amount: cartTotal,
            tax: taxes,
            currency: currency,
            custom_reference: orderNumber,
        };

        const options = {
            header: { kid: KID },
            algorithm: 'HS256',
        };

        return jwt.sign(payload, SECRET_KEY, options);

    }
);

Click the + sign again, but this time select Expose Site API.
Include the following code in the new file:

// Working sample Code Block, update as needed
import { ok, badRequest } from 'wix-http-functions';
import wixPaymentProviderBackend from "wix-payment-provider-backend";

//Hook URL> https://www.mysite.com/_functions/updateTransaction
// or https://user.wix.com/_functions/updateTransaction

export async function post_updateTransaction(request) {

    const payload = await request.body.json();
    console.log(payload);

    if (payload.customReference !== 'undefined') {
        // Update the transaction status on your site. This code assumes that the Wix
        // transaction ID and the payment provider's transaction ID are included in
        // the URL as query parameters.
        await wixPaymentProviderBackend.submitEvent({
            event: {
                transaction: {
                    wixTransactionId: payload.customReference,
                    pluginTransactionId: payload.reference,
                },
            },
        });
        return ok();
    } else {
        return badRequest();
    }

}

---

Step 5: Configure Payment Plugin

Navigate to the Service Plugins section.
Click the + sign and select the Payments option.
When prompted for a name, enter FGW (all uppercase).

---

Step 6: Edit FGW Configuration Files

Locate the created files and open FGW-config.js.
Copy and paste the following code into the file:

// Working sample Code Block, update as needed
import * as paymentProvider from 'interfaces-psp-v1-payment-service-provider';

/** @returns {import('interfaces-psp-v1-payment-service-provider').PaymentServiceProviderConfig} */
export function getConfig() {
    //throw new Error('getConfig was not implemented');
    return {
        title: 'Fygaro Payments',
        paymentMethods: [{
            hostedPage: {
                title: 'Fygaro Payments',
                logos: {
                    white: {
                        svg: 'https://static-app.fygaro.com/static/img/10542c9bde49a22d7779.svg'
                        //png: 'https://freesvg.org/img/15930333081593032446pitr_Bananas_icon.png'
                    },
                    colored: {
                        svg: 'https://static-app.fygaro.com/static/img/10542c9bde49a22d7779.svg'
                        //png: 'https://freesvg.org/img/15930333081593032446pitr_Bananas_icon.png'
                    }
                }
            }
        }],
        credentialsFields: [{
                simpleField: {
                    name: 'clientId',
                    label: 'API id'
                }
            },
            {
                simpleField: {
                    name: 'clientSecret',
                    label: 'API secret'
                }
            },
            {
                simpleField: {
                    name: 'clientURL',
                    label: 'Botton URL'
                }
            },
            {
                dropdownField: {
                    name: 'taxFlag',
                    label: 'Send Tax Detail',
                    options: [
                        {
                            key: '0',
                            value: 'No'
                        },
                        {
                            key: '1',
                            value: 'Yes'
                        }
                        ]
                }
            }
        ]
    }
}

Open the FGW.js file and paste the following code:

// Working sample Code Block, update as needed
import * as paymentProvider from 'interfaces-psp-v1-payment-service-provider';
import { getFJWT } from 'backend/fygaro.web';

/**
 * This payment plugin endpoint is triggered when a merchant provides required data to connect their PSP account to a Wix site.
 * The plugin has to verify merchant's credentials, and ensure the merchant has an operational PSP account.
 * @param {import('interfaces-psp-v1-payment-service-provider').ConnectAccountOptions} options
 * @param {import('interfaces-psp-v1-payment-service-provider').Context} context
 * @returns {Promise<import('interfaces-psp-v1-payment-service-provider').ConnectAccountResponse | import('interfaces-psp-v1-payment-service-provider').BusinessError>}
 */
export const connectAccount = async (options, context) => {
        const {credentials} = options;

        return {
            credentials
        } 

};

/**
 * This payment plugin endpoint is triggered when a buyer pays on a Wix site.
 * The plugin has to process this payment request but prevent double payments for the same `wixTransactionId`.
 * @param {import('interfaces-psp-v1-payment-service-provider').CreateTransactionOptions} options
 * @param {import('interfaces-psp-v1-payment-service-provider').Context} context
 * @returns {Promise<import('interfaces-psp-v1-payment-service-provider').CreateTransactionResponse | import('interfaces-psp-v1-payment-service-provider').BusinessError>}
 */
export const createTransaction = async (options, context) => {

    console.log("options", options);
    const {merchantCredentials, order, wixTransactionId} = options;

    //Define constants
    const api_public = merchantCredentials.clientId;
    const api_secrete = merchantCredentials.clientSecret;
    const redirect_url = merchantCredentials.clientURL;

    const taxFlag = merchantCredentials.taxFlag;
    //Check for taxes
    var taxes = 0;
    if(taxFlag ==  1){
        if(order.description.charges.tax !== undefined && order.description.charges.tax > 0){
            taxes = parseInt(order.description.charges.tax) / Math.pow(10,2);
        }
    }

    var totalAmount = parseInt(order.description.totalAmount) / Math.pow(10,2);
    const currency = order.description.currency;
    const orderNumber = wixTransactionId;

    const fygaroCheckout = await getFJWT(api_public, api_secrete, totalAmount, taxes, currency, orderNumber);

    return {

        "pluginTransactionId": orderNumber,
        "redirectUrl": `${redirect_url}?jwt=${fygaroCheckout}`

    } 

};

/**
 * This payment plugin endpoint is triggered when a merchant refunds a payment made on a Wix site.
 * The plugin has to process this refund request but prevent double refunds for the same `wixRefundId`.
 * @param {import('interfaces-psp-v1-payment-service-provider').RefundTransactionOptions} options
 * @param {import('interfaces-psp-v1-payment-service-provider').Context} context
 * @returns {Promise<import('interfaces-psp-v1-payment-service-provider').CreateRefundResponse | import('interfaces-psp-v1-payment-service-provider').BusinessError>}
 */
export const refundTransaction = async (options, context) => {};

Click on the Publish button in the top-right corner of the editor.

Step 7: Connect Fygaro Payments

Return to the Wix Dashboard.
Go to Settings and locate the Accept Payments option.
Scroll through the payment options to find Fygaro and click on Connect.
Enter your API Key and API Secret obtained from Fygaro (refer to this tutorial to learn how to obtain your API keys).
In the Button URL field, paste the Fygaro Payment Button link (refer to this tutorial to learn how to create a variable amount payment button).
Click Connect.

Step 8: Configure Your Payment Button in Fygaro

When creating your payment button in Fygaro:

Activate the JWT option in Advanced Settings.
In the Hook field, enter your Wix site URL followed by /_functions/updateTransaction. Example:

https://www.mysite.com/_functions/updateTransaction

Save your payment button.

Final Step: Test Your Integration

To ensure everything is set up correctly:

Run a test transaction of USD $1 (or the local currency equivalent).
Confirm that the payment processes successfully.


Now you're ready to start accepting payments with Fygaro on your Wix site!

This tutorial is a guided example on how to implement payments on your existing Wix site. Fygaro provides no guarantees regarding its accuracy, functionality, or suitability for your specific needs. Implementation is at your own risk, and you may need to hire a Wix developer to customize the setup according to the requirements of your specific Wix account.

Updated on: 01/29/2025