Render XPay-hosted payment fields in the customer-facing application so sensitive payment details do not pass through the merchant backend.
Before you begin
Create a PaymentIntent and return its pi_client_secret and encryptionKey to the frontend. Choose the XPay SDK that matches the customer application.
Client and server boundary
Raw card details must remain inside XPay Element. Do not add merchant-controlled card-number, expiry, or security-code fields around the element.
Render the element
For Web SDK v5, provide a container in the checkout form:
HTML
<form id="payment-form">
<div id="xpay-element"></div>
<button type="submit">Pay</button>
</form>Initialize and mount XPay Element using the current Web SDK guide. Keep the submit button disabled until the SDK reports that the element can be submitted according to the documented validation event for the selected platform.
Handle customer input
- Show the amount, currency, merchant name, and order summary outside the element.
- Let XPay Element display payment-field validation.
- Prevent repeated submissions while confirmation is in progress.
- Present authentication steps when XPay requires customer action.
- Do not treat a frontend message as the only backend payment record.
Next steps
- Confirm the payment.
- Collect a reusable payment token.
- See XPay Element and SDKs for platform-specific setup.