Embedded Checkout

Copy

• Copy for LLM

  Copy page as Markdown for LLMs
• View as Markdown

  Open this page as Markdown
• Open in ChatGPT

  Get insights from ChatGPT
• Open in Claude

  Get insights from Claude

<script src="https://secure.xmoney.com/sdk/v1/xmoney.js"></script>

const checkout = new window.XMoneyPaymentForm({
  // Required
  container: 'payment-form-widget',
  publicKey: 'pk_test_12345',
  orderPayload: '...', // Received from your server
  orderChecksum: '...', // Received from your server

  // Configuration
  options: {
    locale: 'en-US',
    buttonType: 'pay',
    validationMode: 'onChange',
    displaySubmitButton: true,
    displaySaveCardOption: true,
    enableSavedCards: true,
    // Wallets
    googlePay: { enabled: true },
    applePay: { enabled: true },
    // Styling
    appearance: {
      theme: 'custom',
      variables: {
        colorPrimary: '#6366f1',
      },
    },
  },

  // Lifecycle Callbacks (all optional)
  onReady: () => console.log('Form is ready'),
  onError: (error) => console.error('Form error', error),
  onPaymentComplete: (data) => console.log('Payment completed', data),
  onSubmitPending: (isPending) => console.log('Processing...', isPending),
})

options: {
  enableSavedCards: true,
  displaySaveCardOption: true,
}

options: {
  googlePay: {
    enabled: true,
    appearance: {
      color: "black", // "white" | "black"
      type: "pay",    // "buy", "book", "donate", etc.
      radius: 12,     // Corner radius in pixels (default: 12)
      borderType: "no_border" // "default_border" | "no_border" (default: "no_border")
    }
  }
}

options: {
  applePay: {
    enabled: true,
    appearance: {
      style: "black", // "white" | "black" | "white-outline"
      type: "pay",    // See Apple Pay button types below
      radius: 12      // Corner radius in pixels (default: 12)
    }
  }
}

options: {
  appearance: {
    theme: "custom", // 'light' | 'dark' | 'custom'
    variables: {
      colorPrimary: "#0d9488",        // Brand color (focus, buttons)
      colorDanger: "#ef4444",         // Error text
      colorBackground: "#ffffff",     // Form background
      colorText: "#1f2937",           // Primary text
      colorTextSecondary: "#6b7280",  // Labels/Hints
      colorTextPlaceholder: "#bdbdbd", // Placeholder text
      colorBorder: "#e5e7eb",         // Input borders
      colorBorderFocus: "#0d9488",    // Active input border
      colorBackgroundFocus: "#f0fdfa", // Focused input background
      borderRadius: "8px"
    }
  }
}

checkout.updateOrder(newPayload, newChecksum)

checkout.updateLocale('el-GR') // Switch to Greek

// Switch to dark theme
checkout.updateAppearance({ theme: 'dark' })

// Update custom colors
checkout.updateAppearance({
  theme: 'custom',
  variables: {
    colorPrimary: '#10b981',
    borderRadius: '12px',
  },
})

checkout.submit()

checkout.close()

// React useEffect cleanup example
useEffect(() => {
  const checkout = new window.XMoneyPaymentForm({ /* ... */ })
  
  return () => {
    checkout.destroy() // Critical: prevents memory leaks
  }
}, [])

const checkout = new window.XMoneyPaymentForm({
  container: 'payment-form-widget',
  publicKey: 'pk_test_your_key',
  orderPayload: payload, // From your server
  orderChecksum: checksum, // From your server
  onReady: () => {
    console.log('Form is ready')
    document.getElementById('payment-form-widget').style.opacity = '1'
  },
  onError: (error) => {
    console.error('Form initialization error:', error)
    alert('Failed to load payment form. Please refresh the page.')
  },
  onPaymentComplete: (data) => {
    console.log('Payment completed:', data)
    // Check payment status
    if (data.status === 'complete-ok') {
      window.location.href = '/checkout/success'
    } else {
      alert('Payment failed. Please try again.')
    }
  },
})

const checkout = new window.XMoneyPaymentForm({
  container: 'payment-form-widget',
  publicKey: 'pk_test_your_key',
  orderPayload: payload,
  orderChecksum: checksum,
  options: {
    appearance: {
      theme: 'custom',
      variables: {
        colorPrimary: '#10b981',
        colorDanger: '#ef4444',
        borderRadius: '12px',
      },
    },
  },
})

const crypto = require('crypto')

function getBase64JsonRequest(orderData) {
  const jsonText = JSON.stringify(orderData)
  return Buffer.from(jsonText).toString('base64')
}

function getBase64Checksum(orderData, secretKey) {
  const hmacSha512 = crypto.createHmac('sha512', secretKey)
  hmacSha512.update(JSON.stringify(orderData))
  return hmacSha512.digest('base64')
}

// API route handler (Next.js, Express, etc.)
export default async function handler(req: any, res: any) {
  if (req.method !== 'POST') {
    return res.status(405).json({ error: 'Method not allowed' })
  }

  const { amount, currency, description, publicKey } = req.body

  // API key is stored server-side (e.g., environment variable)
  const apiKey = process.env.XMONEY_SECRET_KEY

  if (!publicKey || !apiKey) {
    return res.status(400).json({ error: 'Missing credentials' })
  }

  const orderData = {
    publicKey: publicKey,
    customer: {
      identifier: 'customer-123', // Your internal customer ID
      firstName: 'John',
      lastName: 'Doe',
      country: 'RO', // ISO 3166-1 alpha-2
      city: 'Bucharest',
      email: 'john.doe@example.com',
    },
    order: {
      orderId: `order-${Date.now()}`,
      description: description,
      type: 'purchase',
      amount: amount, // Amount in smallest currency unit (cents)
      currency: currency, // ISO 4217 code (e.g., 'EUR', 'USD')
    },
    cardTransactionMode: 'authAndCapture',
    backUrl: 'https://yoursite.com/checkout/result',
  }

  try {
    const payload = getBase64JsonRequest(orderData)
    const checksum = getBase64Checksum(orderData, apiKey)

    res.json({ payload, checksum })
  } catch (error) {
    console.error('Error creating payment intent:', error)
    res.status(500).json({ error: 'Internal server error' })
  }
}

// Fetch payment intent from your backend
async function initializeCheckout() {
  const response = await fetch('/api/create-payment-intent', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      amount: 10000, // Amount in cents
      currency: 'EUR',
      description: 'Order #12345',
      publicKey: 'pk_test_your_key', // Public key can be sent from frontend
    }),
  })

  const { payload, checksum } = await response.json()

  // Initialize Embedded Checkout
  const checkout = new window.XMoneyPaymentForm({
    container: 'payment-form-widget',
    publicKey: 'pk_test_your_key',
    orderPayload: payload,
    orderChecksum: checksum,
    onReady: () => console.log('Form ready'),
    onPaymentComplete: (data) => {
      console.log('Payment completed:', data)
    },
  })
}