Skip to main content
El Widget de checkout es un formulario de pago totalmente renderizado y seguro para PCI que insertas en tu página. Maneja los inputs de tarjeta, la visualización de tarjetas guardadas y la casilla de consentimiento “Guardar esta tarjeta” — sin que construyas ningún HTML de formulario. Si quieres control total sobre el diseño y el estilo, usa los Campos alojados en su lugar.

​
Configuración básica

Llama a sdk.checkout() después de inicializar el SDK. El widget se monta a sí mismo en el DOM automáticamente.
Para montar el widget en un elemento específico, pasa un selector CSS:

​
Selector de tarjetas guardadas

Si la sesión se creó con un customerId y ese comprador tiene tarjetas previamente depositadas en el vault, el widget renderiza automáticamente un selector de tarjetas encima del formulario de tarjeta nueva. Las tarjetas se muestran como brand / last 4 / expiry — nunca se devuelve ningún PAN al navegador. Cuando el comprador selecciona una tarjeta guardada, onSavedMethodSelected se dispara con el token de la tarjeta. Cóbrala de inmediato sin un nonce:
La lista de tarjetas guardadas está respaldada por GET /sdk/vaulted-methods y está limitada al propio comprador de la sesión — el navegador no puede enumerar las tarjetas de un comprador diferente.
Combina vaultConsentEnabled: true con un customerId en tu llamada a POST /sdk/session para la mejor experiencia de comprador recurrente. Cuando hay un shopperId presente en la sesión, la casilla “Guardar esta tarjeta” aparece automáticamente.

​
Cobrar una tarjeta nueva desde el widget

Para una tarjeta nueva ingresada a través del widget, recupera el nonce después de que el comprador envía el formulario y úsalo de la misma forma que con los campos alojados:
Alternativamente, llama a sdk.authorize(nonce) directamente después del envío del widget para dejar que el SDK administre el ciclo completo de autorizar-y-acción en una sola llamada.

​
Manejo de 3DS

3DS se maneja de forma idéntica a los campos alojados. Si el resultado del cobro incluye actionRequired, pásalo a sdk.handleAction:
sdk.handleAction abre el iframe del desafío de 3DS, espera a que se complete y resuelve con el PaymentResult final. No necesitas escribir lógica separada para diferentes tipos de desafío.
vaultConsentEnabled solo muestra la casilla “Guardar esta tarjeta” cuando hay un shopperId presente en la sesión. Si no se pasó ningún customerId a POST /sdk/session, la casilla se oculta independientemente de este ajuste.
Si pasaste cardOnFile al crear la sesión (ver Suscripciones gestionadas por el comercio), el widget muestra un aviso fijo de “la tarjeta se guardará” en lugar de la casilla vaultConsentEnabled — la tarjeta se guarda incondicionalmente, así que no hay nada que aceptar.