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.
¿Buscas una mejor solución? Explora Fygaro Shops – el constructor de tiendas web listo para usar, sin necesidad de código, con pagos y logística integrados para simplificar tu negocio.
Paso 1: Accede al Editor de Sitio de Wix
Inicia sesión en tu panel de control de Wix.
Abre el editor de tu sitio web.
Paso 2: Activa el Modo Desarrollador
En la barra superior del editor del sitio, haz clic en Modo Dev.
Sigue los pasos de activación para habilitar el Modo Desarrollador.
Paso 3: Instala el Paquete NPM Requerido
Una vez que el Modo Desarrollador esté habilitado, haz clic en Paquetes y Aplicaciones en la barra de menú izquierda.
Haz clic en el signo + junto a npm e instala el paquete jsonwebtoken.
Paso 4: Crea los Archivos Backend
En la barra de menú izquierda, selecciona Backend y Público.
Haz clic en el signo + bajo Backend, luego haz clic en Agregar Archivo .js.
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;
const payload = {
amount: cartTotal,
tax_amount: taxes,
currency: currency,
custom_reference: orderNumber,
};
const options = {
header: { kid: KID },
algorithm: 'HS256',
};
return jwt.sign(payload, SECRET_KEY, options);
}
);Haz clic nuevamente en el signo +, pero esta vez selecciona Exponer API del Sitio.
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
Ve a la sección de Plugins de Servicio.
Haz clic en el signo + y selecciona la opción Pagos.
Cuando se te solicite un nombre, ingresa FGW (todo en mayúsculas).
Paso 6: Edita los Archivos de Configuración de FGW
Ubica los archivos creados y abre FGW-config.js.
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'
}
]
}
}
]
}
}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) => {};Haz clic en el botón Publicar en la esquina superior derecha del editor.
Paso 7: Conecta los Pagos de Fygaro
Regresa al Panel de Control de Wix.
Ve a Configuraciones y localiza la opción Aceptar Pagos.
Recorre las opciones de pago hasta encontrar Fygaro y haz clic en Conectar.
Ingresa tu API Key y API Secret obtenidos desde Fygaro (consulta este tutorial para saber cómo obtener tus credenciales).
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).
Haz clic en Conectar.
Paso 8: Configura Tu Botón de Pago en Fygaro
Cuando crees tu botón de pago en Fygaro:
Activa la opción JWT en Configuraciones Avanzadas.
En el campo Hook, ingresa la URL de tu sitio Wix seguido de /_functions/updateTransaction. Ejemplo:
https://www.misitio.com/_functions/updateTransactionGuarda tu botón de pago.
Paso Final: Prueba Tu Integración
Para asegurarte de que todo está configurado correctamente:
Realiza una transacción de prueba por USD $1 (o el equivalente en moneda local).
Confirma que el pago se procese exitosamente.
¡Ahora estás listo para comenzar a aceptar pagos con Fygaro en tu sitio de Wix!
Este tutorial es un ejemplo guiado sobre cómo implementar pagos en tu sitio existente de Wix. Fygaro no garantiza la exactitud, funcionalidad o idoneidad del mismo para tus necesidades específicas. La implementación es bajo tu propio riesgo, y podrías necesitar contratar a un desarrollador de Wix para personalizar la configuración según los requerimientos de tu cuenta.
Actualizado el: 30/04/2025
¡Gracias!