Embedded Checkout

Embedded Checkout lets customers pay without leaving your website or mobile app. Choose the xMoney.js v2 SDK for websites and mobile WebViews, or a native SDK for iOS, Android, React Native, and Flutter.

Use Embedded Checkout when you want customers to stay in your checkout experience instead of being redirected to the xMoney hosted checkout page. For redirect-based checkout, see Hosted Checkout.

All SDKs provide a fast, complete checkout and composable surfaces for custom layouts:

• Web: mount a full payment form or individual card, saved-card, Apple Pay, and Google Pay components.
• Native mobile: present a drop-in Payment Sheet, mount Payment Element in your layout, or show a standalone native wallet.

The native iOS, Android, React Native, and Flutter SDKs share one PaymentConfig, PaymentIntent, and PaymentResult model. See Native mobile SDKs to choose a platform.

<!-- Production -->
<script src="https://secure.xmoney.com/sdk/v2/xmoney.js"></script>

<!-- Staging -->
<script src="https://secure-stage.xmoney.com/sdk/v2/xmoney.js"></script>

<div id="xmoney-payment-form"></div>

Your backend creates the order payload, signs it with your private key, and returns only the public values needed by the browser:

{
  "publicKey": "pk_test_your_key",
  "orderPayload": "base64-encoded-order",
  "orderChecksum": "base64-encoded-checksum"
}

Never expose your private key in client-side code.

const paymentForm = await window.XMoney.paymentForm({
  container: 'xmoney-payment-form',
  publicKey,
  orderPayload,
  orderChecksum,
  card: {
    savedCards: {
      enabled: true,
      optInVisible: true,
    },
  },
  customerDetails: {
    card: true,
    applePay: true,
    googlePay: true,
  },
  paymentMethods: {
    applePay: { enabled: true },
    googlePay: { enabled: true },
  },
  options: {
    locale: 'en-US',
    enableBackgroundRefresh: true,
    appearance: {
      theme: 'light',
    },
  },
  onReady() {
    console.log('Payment form ready')
  },
  onValidation(snapshot) {
    console.log('Validation:', snapshot.isValid, snapshot.fields)
  },
  onPaymentChange({ installments, button }) {
    console.log('Payment display:', installments, button.label)
  },
  onPaymentProcessing(isProcessing) {
    console.log('Processing:', isProcessing)
  },
  onPaymentComplete(transaction) {
    console.log('Payment completed:', transaction)
  },
  onError(error) {
    console.error('Payment error:', error)
  },
})

paymentForm.destroy()

Always destroy SDK instances when your checkout component unmounts or the shopper leaves the checkout page.

Supported web locales: en, ro, el, bg, hu, and pl. Pass a BCP-47 tag such as pl-PL; the SDK uses the language subtag before the hyphen.

Embedded Checkout keeps payment collection isolated from merchant application code:

1. On the web, card inputs and wallet flows are rendered in xMoney-hosted iframes.
2. In native apps, PAN and CVV are collected in native SDK views. In React Native and Flutter, card data does not cross the JavaScript bridge or the Dart platform channel.
3. Your backend signs order details and returns only the signed payload and checksum to the client.
4. The app contains only a publishable public key. Never include a private or secret API key in client code.
5. Final fulfillment should be confirmed server-side through webhooks or trusted API checks.

Native SDKs handle 3DS challenges, although issuer authentication may use web content internally.

If your checkout page uses Content Security Policy, configure frame-src for the SDK's iframe-based 3DS modal. Issuer ACS domains vary, so embedded 3DS requires allowing HTTPS frame destinations. See 3DS and payment results.

The card form is designed for modern desktop and mobile browsers. Wallet availability depends on the shopper's device, browser, wallet setup, domain verification, and merchant activation.

Apple Pay in Embedded Checkout is not limited to Safari. When Apple Pay is available in another browser, the SDK loads Apple's web SDK and may present a QR or window-based flow. Use capability checks before rendering standalone wallet buttons:

const capabilities = await window.XMoney.getPaymentMethodCapabilities()

// Unsupported wallets include a diagnostic reason such as:
// capabilities.applePay.reason === 'APPLE_PAY_NOT_SUPPORTED'
// capabilities.googlePay.reason === 'GOOGLE_PAY_NOT_AVAILABLE'

For wallet-specific setup, see Apple Pay and Google Pay. For installment plans, see Installments.