Wix Integration

// Wix Velo — BINKPAY hosted checkout integration
// Paste this into the Page Code panel for your checkout page.
// Docs: https://docs.binkpay.net/integrations/wix

import wixLocation from 'wix-location';
import wixWindow from 'wix-window';

// ─── Configuration ────────────────────────────────────────────────────────────
// Replace with your actual Embed Key from Dashboard → Integrations → Wix.
// Use embk_test_... during development, embk_live_... in production.
const BINKPAY_EMBED_KEY = 'embk_live_YOUR_EMBED_KEY_HERE';

// The BINKPAY hosted checkout base URL.
// Use https://pay.binkpay.eg/checkout for Egypt environment (EGP payments).
const BINKPAY_CHECKOUT_BASE = 'https://pay.binkpay.net/checkout';

// The page on your Wix site where customers land after payment.
// Must be a full URL. Wix publishes pages at https://www.yoursite.com/page-path.
const RETURN_URL = 'https://www.yoursite.com/order-confirmation';

// ─── Page ready ───────────────────────────────────────────────────────────────
$w.onReady( function () {
 // Check if the page was loaded as the return URL from BINKPAY.
 // BINKPAY appends ?status=succeeded&session_id=...&order_id=... to the return URL.
 constquery = wixLocation.query; if (query.status === 'succeeded'&& query.session_id) { // Payment succeeded — show confirmation section, hide checkout button.
 $w( '#binkpayCheckoutBtn').hide();
 $w( '#confirmationSection').show();
 $w( '#orderIdText').text = `Order ID: ${query.order_id ?? 'N/A'}`;
 $w( '#sessionIdText').text = `Payment reference: ${query.session_id}`;
 } else if (query.status === 'failed') {
 // Payment failed or was cancelled — show an error message.
 $w( '#errorMessage').show();
 $w( '#errorMessage').text =
 'Payment was not completed. Please try again or choose a different payment method.';
 }

 // Wire up the checkout button click handler.
 $w( '#binkpayCheckoutBtn').onClick(() => {
 initiateCheckout();
 });
}); // ─── Build and redirect to BINKPAY checkout ───────────────────────────────────/**
 * Constructs the BINKPAY hosted checkout URL and redirects the customer.
 *
 * In a real integration, fetch the order details (amount, orderId) fromyour
 * Wix Stores order, a Wix Members area cart, or your own data collection.
 * Hard-coded values are used here for illustration only.
 */ function initiateCheckout() {
 // Replace these with values derived from your actual cart / order.
 constorderDetails = {
 amount: 4999, // Amount in smallest currency unit (e.g. 4999 = $49.99)
 currency: 'USD', // ISO 4217 code. Use 'EGP' for Egypt environment.orderId: generateOrderId(), // Your internal order referencecustomerEmail: getCustomerEmail(),
 description: 'Order from My Wix Store',
 };

 constcheckoutUrl = buildCheckoutUrl(orderDetails); // Navigate the entire page to the BINKPAY checkout.
 // To open in a lightbox instead, use: wixWindow.openLightbox('BinkPayCheckout', { url: checkoutUrl });wixLocation.to(checkoutUrl);
}

/**
 * Builds a BINKPAY hosted checkout URL with the order parameters.
 * All parameters are passed as query strings; BINKPAY validates the Embed Key server-side.
 */ functionbuildCheckoutUrl(order) { const params = newURLSearchParams({
 embed_key: BINKPAY_EMBED_KEY,
 amount: String(order.amount),
 currency: order.currency,
 order_id: order.orderId,
 return_url: RETURN_URL,
 cancel_url: wixLocation.url, // Return to current page on canceldescription: order.description,
 ...(order.customerEmail && { customer_email: order.customerEmail }),
 }); return `${BINKPAY_CHECKOUT_BASE}?${params.toString()}`;
}

/** Generates a unique order ID. Replace with your own ID generation logic. */ function generateOrderId() {
 consttimestamp = Date.now().toString( 36).toUpperCase();
 constrandom = Math.random().toString( 36).substring( 2, 7).toUpperCase();
 return `ORD-${timestamp}-${random}`;
}

/** Retrieves the logged-in Wix member 's email, if available. */
async function getCustomerEmail() {
 try {
 // Requires Wix Members app to be installed on the site.
 const { currentMember } = await import('wix-members ');
 const member = await currentMember.getMember({ fieldsets: ['FULL '] });
 return member?.loginEmail ?? ' ';
 } catch {
 return ''; // Not logged in or Members app not installed
 }
}

// Extended buildCheckoutUrl with full metadata and billing address pre-fill.
// Useful for stores where you already know the customer's details.

functionbuildCheckoutUrlWithMetadata(order) { const params = new URLSearchParams({
 // Requiredembed_key: BINKPAY_EMBED_KEY,
 amount: String(order.amount), // Integer, smallest currency unitcurrency: order.currency, // 'USD', 'AED', 'EUR', 'GBP', 'SAR', 'EGP'order_id: order.orderId,
 return_url: order.returnUrl,
 cancel_url: order.cancelUrl, // Customer pre-fill — shown on the checkout page; customer can editcustomer_email: order.customer.email,
 customer_name: order.customer.name,
 customer_phone: order.customer.phone, // E.164 format: +201234567890

 // Billing address pre-fill (all optional)billing_address_line1: order.billing.line1,
 billing_address_city: order.billing.city,
 billing_address_country: order.billing.countryCode, // ISO 3166-1 alpha-2

 // Statement descriptor — overrides the account-level default for this session
 statement_descriptor: 'My Wix Store',

 // Metadata — arbitrary key/value pairs (max 20 keys, max 500 chars per value).
 // These appear in Dashboard and webhook payloads under data.metadata.
 'metadata[wix_site_id]': order.wixSiteId,
 'metadata[product_sku]': order.productSku,
 'metadata[campaign_source]': order.utmSource ?? 'direct',

 // Payment method restrictions — leave unset to show all available methods.
 // To restrict to cards only: payment_methods=card
 // To allow cards and Apple Pay: payment_methods=card,apple_pay
 payment_methods: 'card,apple_pay,google_pay',
 });

 return `${BINKPAY_CHECKOUT_BASE}?${params.toString()}`;
}

// Example: build a checkout URL for a 79.99 USD purchase
consturl = buildCheckoutUrlWithMetadata({
 amount: 7999,
 currency: 'USD',
 orderId: 'ORD-WIX-20260511-A1B2C',
 returnUrl: 'https://www.yoursite.com/order-confirmation',
 cancelUrl: 'https://www.yoursite.com/cart',
 customer: {
 email: 'customer@example.com',
 name: 'Jane Smith',
 phone: '+12125550101',
 },
 billing: {
 line1: '123 Main St',
 city: 'New York',
 countryCode: 'US',
 },
 wixSiteId: 'abc123',
 productSku: 'TSHIRT-M-BLK',
 utmSource: 'instagram',
});

wixLocation.to(url);

// Velo page code for your order confirmation / return URL page.
// This page is the return_url you pass to BINKPAY at checkout time.

import wixLocation from 'wix-location';

$w.onReady( async function () {
 const{ status, session_id, order_id, payment_id } = wixLocation.query; // Hide all state sections initially
 $w( '#successSection').hide();
 $w( '#pendingSection').hide();
 $w( '#failedSection').hide();
 $w( '#loadingSpinner').show();

 if(!status || !session_id) { // Landed on this page directly (not from a BINKPAY redirect) — show nothing special.
 $w( '#loadingSpinner').hide();
 return;
 }

 // Optional but recommended: verify the payment server-side via a Velo Web Module.
 // Replace with your actual backend module path.
 letverifiedStatus = status;
 try { const{ verifyBinkpaySession } = await import( 'backend/binkpay-verify.jsw');
 const result = awaitverifyBinkpaySession(session_id);
 verifiedStatus = result.status; // Authoritative status from BINKPAY API} catch (err) {
 console.error( 'Could not verify session server-side:', err);
 // Fall back to the URL parameter if the backend call fails.
 // In production, consider blocking the success display until verification succeeds.
 }

 $w( '#loadingSpinner').hide();

 if (verifiedStatus === 'succeeded') {
 $w( '#successSection').show();
 $w( '#successOrderId').text = order_id ? `Order #${order_id}` : 'Your order';
 $w( '#successPaymentId').text = payment_id ? `Ref: ${payment_id}` : '';
 } else if (verifiedStatus === 'pending') {
 // Some payment methods (e.g. Fawry) are pending until the customer pays at the outlet.
 $w( '#pendingSection').show();
 $w( '#pendingMessage').text =
 'Your payment is being processed. You will receive a confirmation email once it is complete.';
 } else {
 $w( '#failedSection').show();
 $w( '#failedMessage').text =
 'Payment was not completed. Please return to the store and try again.';
 }
});

// Velo Web Module — runs on the server, safe to use secret keys here.
// File path: backend/binkpay-verify.jsw
// Expose only the functions you need in the frontend via named exports.

import { getSecret } from 'wix-secrets-backend';
import { fetch } from 'wix-fetch';

/**
 * Verify a BINKPAY checkout session and return its status.
 * Called fromfrontend page code — the secret key never leaves the backend.
 *
 * @param {string} sessionId - The cs_... session ID from the returnURL.
 * @returns {{ status: string, paymentId: string | null }}
 */
export async functionverifyBinkpaySession(sessionId) { if(!sessionId || !sessionId.startsWith( 'cs_')) {
 throw new Error( 'Invalid session ID format');
 }

 // Store your secret key in Wix Secrets Manager (Settings → Secrets Manager)
 // with the name 'BINKPAY_SECRET_KEY'.
 const secretKey = await getSecret( 'BINKPAY_SECRET_KEY');

 const response = await fetch(
 `https://api.binkpay.net/v1/checkout/sessions/${sessionId}`,
 {
 method: 'GET',
 headers: {
 Authorization: `Bearer ${secretKey}`,
 'Content-Type': 'application/json',
 },
 }
 );

 if (!response.ok) {
 const body = awaitresponse.json();
 throw new Error( `BINKPAY API error ${response.status}: ${body?.error?.message ?? 'Unknown error'}`);
 }

 const session = await response.json();

 return{
 status: session.status, // 'succeeded' | 'failed' | 'pending' | 'expired'paymentId: session.payment_id ?? null,
 amount: session.amount,
 currency: session.currency,
 orderId: session.metadata?.order_id ?? null,
 };
}

import wixLocation from 'wix-location';
import wixWindow from 'wix-window';

async functionopenCheckout(checkoutUrl) { const formFactor = awaitwixWindow.formFactor; if (formFactor === 'Mobile') {
 // Full-page redirect on mobile — best for Apple Pay, Google Pay, and 3DSwixLocation.to(checkoutUrl);
 } else {
 // Open as a lightbox on desktop
 // Requires a Wix Lightbox element named 'BinkPayCheckout' with a web component or iframewixWindow.openLightbox( 'BinkPayCheckout', { url: checkoutUrl });
 }
}