Checkout UX Architecture
Embedded Web3 Modal vs. Hosted Redirect
Select the optimal checkout experience for your e-commerce platform based on conversion performance, mobile responsiveness, and security isolation.
Comparison Matrix & Conversion Impact
| Feature | Embedded Web3 Modal (iFrame/SDK) | Hosted Redirect (invoice_url) |
|---|---|---|
| Checkout Conversion Rate | +24% higher (No site abandonment) | Standard (Redirect drop-off risk) |
| Browser Context | Stays on merchant domain | Redirects to pay.xpayr.com |
| Web3 Wallet Connection | Instant browser extension popup | Requires reconnecting on redirect |
| Integration Effort | 3 lines of JavaScript SDK | Single HTTP POST redirect |
Quick Implementation: Modal Checkout SDK
<!-- 1. Include XPayr Seamless Checkout SDK -->
<script src="https://xpayr.com/assets/js/xpayr-checkout.js"></script>
<script>
// 2. Trigger In-Page Web3 Modal
function payWithCrypto(orderId, amountUsd) {
XPayrCheckout.open({
orderId: orderId,
amount: amountUsd,
currency: 'USD',
theme: 'dark',
onSuccess: function(transaction) {
console.log('Payment confirmed on-chain:', transaction.tx_hash);
window.location.href = '/checkout/success?tx=' + transaction.tx_hash;
},
onDismiss: function() {
console.log('Customer closed payment modal without paying.');
}
});
}
</script>
Official NPM SDKs (v0.2.0) & Remote MCP Server
Integrate Faster with Official XPayr Packages & Zero-Install MCP
Install @xpayr/node-sdk (v0.2.0), @xpayr/payment-evidence (v0.2.0), @xpayr/extension-kit (v0.2.0), or @xpayr/mcp-server (v1.0.0) from NPM, or execute live JSON-RPC 2.0 tool calls via POST https://xpayr.com/api/mcp.