Conectar Pagos de Fygaro con Wix

Descargo de responsabilidad

Asegúrate de hacer una copia de seguridad de tu sitio antes de implementar esta integración y de probarla completamente antes de habilitarla en producción.

Conectar Fygaro con Wix para recibir pagos requiere:

• Un plan de suscripción de Fygaro con capacidades de Hooks.

• Una cuenta de Wix con una tienda en línea o función de comercio electrónico.

Paso 1: Accede al Editor de Sitio de Wix

1. Inicia sesión en tu panel de control de Wix.

2. Abre el editor de tu sitio web.

Paso 2: Activa el Modo Desarrollador

1. En la barra superior del editor del sitio, haz clic en Modo Dev.

2. Sigue los pasos de activación para habilitar el Modo Desarrollador.

Paso 3: Instala el Paquete NPM Requerido

1. Una vez que el Modo Desarrollador esté habilitado, haz clic en Paquetes y Aplicaciones en la barra de menú izquierda.

2. Haz clic en el signo + junto a npm e instala el paquete jsonwebtoken.

Paso 4: Crea los Archivos Backend

1. En la barra de menú izquierda, selecciona Backend y Público.

2. Haz clic en el signo + bajo Backend, luego haz clic en Agregar Archivo .js.

3. Nombra el archivo fygaro.web.js e incluye el siguiente código:

// 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; 

        var payload = {
            amount: cartTotal,
            tax_amount: taxes,
            currency: currency,
            custom_reference: orderNumber,
        };
        if(taxes == 0){
          payload = {
            amount: cartTotal,
            currency: currency,
            custom_reference: orderNumber,
          };
        }

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

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

    }
);

4. Haz clic nuevamente en el signo +, pero esta vez selecciona Exponer API del Sitio.

5. Incluye el siguiente código en el nuevo archivo:

// 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();
    }

}

Paso 5: Configura el Plugin de Pago

1. Ve a la sección de Plugins de Servicio.

2. Haz clic en el signo + y selecciona la opción Pagos.

3. Cuando se te solicite un nombre, ingresa FGW (todo en mayúsculas).

Paso 6: Edita los Archivos de Configuración de FGW

1. Ubica los archivos creados y abre FGW-config.js.

2. Copia y pega el siguiente código en el archivo:

// 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'
                        }
                        ]
                }
            }
        ]
    }
}

3. Abre el archivo FGW.js y pega el siguiente código:

// 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) => {};

4. Haz clic en el botón Publicar en la esquina superior derecha del editor.

Paso 7: Conecta los Pagos de Fygaro

1. Regresa al Panel de Control de Wix.

2. Ve a Configuraciones y localiza la opción Aceptar Pagos.

3. Recorre las opciones de pago hasta encontrar Fygaro y haz clic en Conectar.

4. Ingresa tu API Key y API Secret obtenidos desde Fygaro (consulta este tutorial para saber cómo obtener tus credenciales).

5. En el campo URL del Botón, pega el enlace del botón de pago de Fygaro (consulta este tutorial para saber cómo crear un botón de pago con monto variable).

6. Haz clic en Conectar.

Paso 8: Configura Tu Botón de Pago en Fygaro

Cuando crees tu botón de pago en Fygaro:

1. Activa la opción JWT en Configuraciones Avanzadas.

2. En el campo Hook, ingresa la URL de tu sitio Wix seguido de /_functions/updateTransaction. Ejemplo:

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

3. Guarda tu botón de pago.

Paso Final: Prueba Tu Integración

Para asegurarte de que todo está configurado correctamente:

1. Realiza una transacción de prueba por USD $1 (o el equivalente en moneda local).

2. Confirma que el pago se procese exitosamente.

¡Ahora estás listo para comenzar a aceptar pagos con Fygaro en tu sitio de Wix!

Actualizado el: 27/05/2025