---
title: API de Solicitud de Pago
slug: Web/API/Payment_Request_API
tags:
  - API
  - API de Solicitud de Pago
  - Comercio
  - Contexto seguro
  - Intermediário
  - Pago
  - Referencia
  - Solicitud de Pago
  - Tarjeta de Crédito
translation_of: Web/API/Payment_Request_API
---
<div>{{DefaultAPISidebar("Payment Request API")}}{{securecontext_header}}</div>

<p><span class="seoSummary">El API de solicitud de pago provee una experiencia consistente tanto para comerciantes, como para usuarios. No es una nueva forma de pagar; más bien, es una manera para que los usuarios puedan seleccionar su forma de pago preferida para pagar por cosas, y que esa información esté disponible para el comerciante.</span></p>

<h2 id="Solicitud_de_pago_conceptos_y_uso">Solicitud de pago conceptos y uso</h2>

<p>Muchos problemas relacionados con el abandono de carros de compras en línea pueden deberse a los formularios de pago, los cuales pueden ser complicados y consumir demasiado tiempo para llenarse y a veces requieren muchos pasos para completarse. El API de Petición de Pago intenta reducir el número de pasos necesarios para completar un pago en línea, potencialmente haciendo a un lado los formularios de pago. Hace el proceso de pago mucho más fácil recordando los datos del usuario, los cuales son entregados al comerciante ojalá sin requerid un formulario HTML.</p>

<p>Ventajas de usar la API de Solicitud de Pago con "basic-card" (pagos basados en cartas):</p>

<ul>
 <li><strong>Experiencia de compra rápida</strong>: Los usuarios ingresan sus datos una vez en el navegador y luego ya están listos para pagar por productos y servicios en la web. Ellos ya no tienen que llenar los mismos datos repetidamente a través de los diferetes sitios.</li>
 <li><strong>Experiencia consistente en todos los sitios (que soporten la API):</strong> Como la hoja de pago es controlada por el navegador, puede adaptar la experiencia al usuario. Esta puede incluir la localización de la UI en el lenguaje preferido del usuario.</li>
 <li><strong>Accesibilidad</strong>: Como el navegador controla los elementos de entrada de la hoja de pago, puede garantizar una accesibilidad uniforme al teclado y al lector de pantalla en cada sitio web sin necesidad de que los desarrolladores hagan algo. Un navegador web puede incluso ajustar el tamaño de la fuente o el color de contraste de la hoja de pago, haciéndola más confortable para el usuario al momento de realizar el pago.</li>
 <li><strong>Administración de credenciales</strong>: Los usuarios pueden administrar sus tarjetas de crédito y direcciones de envío directamente en el navegador. Un navegador puede incluso sincronizar estas "credenciales" a través de los dispositivos, haciendo más fácil a los usuarios ir de un computador de escritorio a un dispositivo móvil y de vuelta otra vez para realizar compras.</li>
 <li><strong>Manejo constante de Errores:</strong> El navegador puede checkear la validez de los números de tarjetas, y puede indicarle al usuario si una tarjeta ha expirado (o si está cerca de hacerlo). El navegador puede automáticamente sugerir que tarjeta usar basado en los patrones de uso anteriores o las restricciones del comerciante (p.e., "sólo aceptamos  Visa o Mastercard"), o permitir al usuario definir cual de ellas es su tarjeta favorita o por defecto.</li>
</ul>

<p>Para solicitar un pago, a página web crea un objeto {{domxref("PaymentRequest")}} en respuesta a una acción del usuario que inicia el pago, como hacer click en un botón "Comprar". El <code>PaymentRequest</code> permite a la página web intercambiar información agente de usuario (user agent) mientras que el usuario provee los datos para completar la transacción.</p>

<p>Puedes encontrar una guía completa en <a href="/en-US/docs/Web/API/Payment_Request_API/Using_the_Payment_Request_API">Usando la API de Solicitud de Pago</a>.</p>

<div class="note">
<p><strong>Nota</strong>: La API solo está disponibledentro de elementos {{htmlelement("iframe")}} cross-origin si tienen el atributo {{htmlattrxref("allowpaymentrequest","iframe")}}.</p>
</div>

<h2 id="Interfaces">Interfaces</h2>

<dl>
 <dt>{{domxref('PaymentAddress')}}</dt>
 <dd>Un objeto que contiene la dirección; usada para facturación y despacho, por ejemplo.</dd>
 <dt>{{domxref('PaymentRequest')}}</dt>
 <dd>Un objeto que provee la API para crear y administrar la interfaz de pago del {{Glossary("user agent", "user agent's")}}.</dd>
 <dt>{{domxref('PaymentRequestEvent')}}</dt>
 <dd>Un evento entregado a un manejador de pagos cuando un {{domxref("PaymentRequest")}} es realizado.</dd>
 <dt>{{domxref('PaymentRequestUpdateEvent')}}</dt>
 <dd>Permite que la página web actualice los detalles de la solicitud de pago en respuesta a una acción del usuario.</dd>
 <dt>{{domxref('PaymentMethodChangeEvent')}}</dt>
 <dd>Representa al usuario cambiando el instrumento de pago (por ejemplo, cambiando de una tarjeta de crédito a una tarjeta de débito).</dd>
 <dt>{{domxref('PaymentResponse')}}</dt>
 <dd>Objeto devuelto después de que el usuario selecciona un método de pago y aprueba una solicitud de pago.</dd>
 <dt>{{domxref('MerchantValidationEvent')}}</dt>
 <dd>Representa el navegador que requiere que el comerciante (sitio web) se valide a sí mismo como autorizado para usar un manejador de pagos en particular (por ejemplo, registrado como autorizado para usar Apple Pay).</dd>
</dl>

<dl>
</dl>

<h2 id="Diccionarios">Diccionarios</h2>

<dl>
 <dt>{{domxref("AddressErrors")}}</dt>
 <dd>Un diccionario que contiene cadenas que proporcionan explicaciones descriptivas de cualquier error en cualquier entrada de {{domxref ("PaymentAddress")}} que tenga errores.</dd>
 <dt>{{domxref("PayerErrors")}}</dt>
 <dd>Un diccionario que contiene cadenas que proporcionan explicaciones descriptivas de cualquier error relacionado con los atributos de correo electrónico, teléfono y nombre de {{domxref ("PaymentResponse")}}.</dd>
 <dt>{{domxref("PaymentDetailsUpdate")}}</dt>
 <dd>Un objeto que describe los cambios que deben realizarse en los detalles del pago en caso de que el servidor necesite actualizar la información después de la instanciación de la interfaz de pago, pero antes de que el usuario comience a interactuar con ella.</dd>
</dl>

<h3 id="Diccionarios_relacionados_para_la_especificación_Basic_Card">Diccionarios relacionados para la especificación Basic Card</h3>

<dl>
 <dt>{{domxref("BasicCardChangeDetails")}}</dt>
 <dd>Un objeto que proporciona información de dirección redactada que se proporciona como {{domxref ("PaymentMethodChangeEvent.methodDetails", "methodDetails")}} en el evento {{event ("paymentmethodchange")}} enviado al {{domxref ("PaymentRequest" )}} cuando el usuario cambia la información de pago.</dd>
 <dt>{{domxref("BasicCardErrors")}}</dt>
 <dd>Un objeto que proporciona mensajes de error asociados con los campos del objeto {{domxref ("BasicCardResponse")}} que no son válidos. Esto se usa como el valor de la propiedad {{domxref ("PaymentValidationErrors.paymentMethod", "paymentMethod")}} en el objeto {{domxref ("PaymentValidationErrors")}} enviado al {{domxref ("PaymentRequest")}} cuando ocurre un error.</dd>
 <dt>{{domxref('BasicCardRequest')}}</dt>
 <dd>Define una estructura de objeto para contener detalles de la solicitud de pago, como el tipo de tarjeta.</dd>
 <dt>{{domxref('BasicCardResponse')}}</dt>
 <dd>Define una estructura de objeto para los detalles de la respuesta de pago, como el número o la fecha de vencimiento de la tarjeta utilizada para realizar el pago y la dirección de facturación.</dd>
</dl>

<h2 id="Specificaciones">Specificaciones</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Specificación</th>
   <th scope="col">Estatus</th>
   <th scope="col">Comentario</th>
  </tr>
  <tr>
   <td>{{SpecName('Payment')}}</td>
   <td>{{Spec2('Payment')}}</td>
   <td>Definición inicial.</td>
  </tr>
  <tr>
   <td>{{SpecName('Basic Card Payment')}}</td>
   <td>{{Spec2('Basic Card Payment')}}</td>
   <td>Define {{domxref ("BasicCardRequest")}} y {{domxref ("BasicCardResponse")}}, entre otras cosas necesarias para manejar el pago con tarjeta de crédito</td>
  </tr>
  <tr>
   <td>{{SpecName('Payment Method Identifiers')}}</td>
   <td>{{Spec2('Payment Method Identifiers')}}</td>
   <td>Define los identificadores de los métodos de pago y cómo se validan y, en su caso, se acuñan y se registran formalmente en el W3C.</td>
  </tr>
 </tbody>
</table>

<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2>

<div>
<h3 id="Interfaz_PaymentRequest">Interfaz PaymentRequest</h3>

<div>


<p>{{Compat("api.PaymentRequest", 0)}}</p>
</div>
</div>

<h2 id="Ver_también">Ver también</h2>

<ul>
 <li><a href="/en-US/docs/Web/API/Payment_Request_API/Using_the_Payment_Request_API">Using the Payment Request API</a></li>
 <li><a href="/en-US/docs/Web/API/Payment_Request_API/Concepts">Payment processing concepts</a></li>
 <li><a href="https://webkit.org/blog/8182/introducing-the-payment-request-api-for-apple-pay/">Introducing the Payment Request API for Apple Pay</a></li>
 <li><a href="https://developers.google.com/pay/api/web/guides/paymentrequest/tutorial">Google Pay API PaymentRequest Tutorial</a></li>
 <li><a href="https://github.com/w3c/payment-request-info/wiki/FAQ">W3C Payment Request API FAQ</a></li>
 <li>Feature Policy directive {{httpheader("Feature-Policy/payment", "payment")}}</li>
</ul>