Documentación

Introducción

El script Payment Widget (Widget de Pago) - es un script low code que permite colocar botones Apple Pay y Google Pay en la página de la tienda del vendedor - en las páginas de productos y/o en el carrito del comprador. De esta manera permite al cliente realizar un pedido en un clic en los dispositivos compatibles sin salir de su dominio.

Problema que proponemos resolver

Los largos procesos de pedido de múltiples etapas y los formularios para introducir datos de tarjeta con baja conversión afectan negativamente a los ingresos. Reducir los pasos y retener a los compradores en la página aumenta la tasa de finalización y la confianza.

Acerca de nuestra solución

Integre el widget de pago donde la intención del comprador es más alta (por ejemplo, en la página del producto), para omitir el carrito y completar el pago con una billetera integrada segura. Sin redirecciones externas. La configuración típica toma menos de un día.

Principales ventajas

Pago en página: los compradores realizan el pago sin salir de su sitio
Billeteras integradas: Apple Pay y Google Pay "de fábrica"
Listo para SCA/PSD2: 3DS2 se procesa automáticamente para transacciones de tarjeta cuando lo requiere su adquirente
Integración Low-code: script drop-in (script de conexión rápida), configuración mínima
Alcance PCI reducido: los datos de tarjetas nunca llegan a sus servidores
Configuraciones flexibles y elementos de interfaz de usuario: ubicación, importe, moneda, notificaciones de callback, estilos y otros
Verificación simple de dominio Apple: carga paso a paso de un archivo
Proceso de integración rápido: menos de 1 día

Conexión del script

Agregar archivo

En la página del vendedor dentro de la etiqueta <head> es necesario agregar un enlace al archivo pay-buttons.js.

El script pay-buttons.js debe estar ubicado en la carpeta pay-buttons, en el mismo nivel que la carpeta merchants (con las páginas de pago).

En la declaración del script obligatoriamente debe especificarse id="pay-buttons".

<head>
  ...
  <script
    src="https://dev.bpcbt.com/payment/pay-buttons/pay-buttons.js"
    id="pay-buttons">
  </script>
  ...
</head>

Inicialización

<script>
  document.addEventListener("DOMContentLoaded", function () {
    var widget = payButtonsWidget("containerId"); // donde `containerId` — id del elemento DOM donde se agregarán los botones

    widget.init({
      gatewayInfo: { // Información para el gateway
        token: "i29v9o5hkmuv2590l7661p9vcu", // Token del vendedor en MP2
        amount: 852300, // Importe del pedido en centavos (o en unidades menores)
        returnUrl: "http\:\/\/yourwebsite.com\/success.html", // Dirección de destino después del pago
        merchantLogin: "buttonApple",
      },

      applePay: { // Información para la sesión ApplePay
        merchantId: "yourwebsite.com", // identificador del comerciante en Apple
      },

      googlePay: {
        environment: "TEST",
      },
    });
  });
</script>

Parámetros de inicialización

A continuación se presenta la lista completa de parámetros para la inicialización del script.

Obligatoriedad	Parámetro	Tipo	Descripción
Opcional	`cartItems`	Array of objects	Matriz de objetos para describir productos en el carrito. Ver descripción de elementos anidados abajo.
Opcional	`appleButtonClass`	String	Nombre de clase que se asignará al botón applePay para poder estilizarlo por separado o acceder a él. Valor por defecto: `pay-button_applepay`.
Obligatorio	`applePay`	Object	Objeto que contiene información sobre la sesión Apple. Ver descripción de elementos anidados abajo.
Opcional	`debug`	Boolean	Si `true` - se activa el modo de depuración, mostrando toda la información de servicio bajo el botón. Por defecto `false`.
Obligatorio	`gatewayInfo`	Object	Objeto que contiene información para el pedido en la Pasarela de Pago. Ver descripción de elementos anidados abajo.
Obligatorio	`googlePay`	Object	Objeto que contiene información de la sesión Google Pay. Ver descripción de elementos anidados abajo.

Parámetros del bloque cartItems

Obligatoriedad	Nombre	Tipo	Descripción
Obligatorio	`name`	String [1..255]	Denominación o descripción de la partida de mercancía en forma libre.

Opcional	`itemDetails`	Object	Objeto con parámetros de descripción de la posición de mercancía. La descripción de los elementos anidados se proporciona a continuación.

Obligatorio	`quantity`	Object	Elemento que describe la cantidad total de posiciones de mercancías de un `positionId` y sus unidades de medida. La descripción de los elementos anidados se presenta a continuación.

Opcional	`itemAmount`	Integer [1..12]	Suma del costo de todas las posiciones de mercancías de un `positionId` en unidades mínimas de moneda. `itemAmount` es obligatorio para la transmisión, solo si no se transmitió el parámetro `itemPrice`. En caso contrario, la transmisión de `itemAmount` no es requerida. Si en la solicitud se transmiten ambos parámetros: `itemPrice` e `itemAmount`, entonces `itemAmount` debe ser igual a `itemPrice * quantity`, en caso contrario la solicitud finalizará con error.

Opcional	`itemPrice`	Integer [1..18]	Suma del costo de la posición de mercancía de un `positionId` en dinero en unidades mínimas de moneda.

Opcional	`itemCurrency`	Integer [3]	Código de moneda ISO 4217. Si no se especifica, se considera igual a la moneda del pedido.

Obligatorio	`itemCode`	String [1..100]	Número (identificador) de la posición de mercancía en el sistema de la tienda.

Ejemplo del bloque cartItems:

[
  {
    name: 'Pen',
    quantity: {
        value: 1,
        measure: "pcs"
    },
    itemAmount: (totalAmount * 100) / 2,
    itemCurrency: "643",
    itemCode: 'no_1'
  },
  {
    name: 'Cheese',
    quantity: {
        value: 1.4,
        measure: "kg"
    },
    itemAmount: (totalAmount * 100) / 2,
    itemCurrency: "643",
    itemCode: 'no_2'
  }
]

Parámetros del objeto gatewayInfo

Obligatoriedad	Parámetro	Tipo	Descripción
Obligatorio	`token`	String	Token del vendedor, que se puede obtener en la consola de administrador. Necesario para identificar al vendedor.
Opcional	`registerPreAuth`	Boolean	Registro de pago de dos etapas. Por defecto `false`.
Condición	`orderNumber`	String [1..36]	Número de pedido en el sistema de la tienda. Opcional, si está habilitada la configuración "Generar número de pedido".
Opcional	`amount`	Integer [0..12]	Importe del pago en unidades mínimas de la moneda (por ejemplo, en kopeks).

Opcional	`currency`	String [3]	Código de moneda del pago ISO 4217. Si no se especifica, se utiliza el valor por defecto. Solo se permiten dígitos.

Obligatorio	`returnUrl`	String [1..512]	Dirección a la que se requiere redirigir al usuario en caso de pago exitoso. La dirección debe especificarse completamente, incluyendo el protocolo utilizado (por ejemplo, `https://mybestmerchantreturnurl.com` en lugar de `mybestmerchantreturnurl.com`). De lo contrario, el usuario será redirigido a una dirección del siguiente tipo: `https://dev.bpcbt.com/payment/<merchant_address>`. La dirección no debe ser una ruta relativa, es decir, no debe comenzar con "." y "/". De lo contrario, se devolverá el error 4: "URL de retorno incorrecta". Por ejemplo: ../test.html, /test.html — son URL incorrectas.

Opcional	`failUrl`	String [1..512]	Dirección a la que se debe redirigir al usuario en caso de pago fallido. La dirección debe especificarse completamente, incluyendo el protocolo utilizado (por ejemplo, `https://mybestmerchantreturnurl.com` en lugar de `mybestmerchantreturnurl.com`). De lo contrario, el usuario será redirigido a una dirección del siguiente tipo: `https://dev.bpcbt.com/payment/<merchant_address>`. La dirección no debe ser una ruta relativa, es decir, no debe comenzar con "." y "/". De lo contrario, se devolverá el error 4: "URL de retorno incorrecto". Por ejemplo: ../test.html, /test.html — son direcciones URL incorrectas.

Opcional	`description`	String [1..598]	Descripción del pedido en cualquier formato. Para activar el envío de este campo al sistema de procesamiento, contacte con el servicio de soporte técnico. En este campo no está permitido transmitir datos personales o datos de pago (números de tarjetas, etc.). Este requisito está relacionado con el hecho de que la descripción del pedido no se enmascara en ningún lugar.

Opcional	`clientId`	String [0..255]	Número de cliente (ID) en el sistema del comerciante — hasta 255 caracteres. Se utiliza para implementar la funcionalidad de vinculaciones. Puede devolverse en la respuesta, si al comerciante se le permite crear vinculaciones. La especificación de este parámetro al procesar pagos por vinculación es obligatoria. En caso contrario, el pago será imposible.

Opcional	`sessionTimeoutSecs`	Integer [1..9]	Duración de vida del pedido en segundos. En caso de que el parámetro no esté especificado, se utilizará el valor indicado en la configuración del comerciante, o el tiempo por defecto (1200 segundos = 20 minutos). Si en la solicitud está presente el parámetro `expirationDate`, entonces el valor del parámetro `sessionTimeoutSecs` no se tiene en cuenta.

Opcional	`jsonParams`	Object	Conjunto de atributos adicionales de forma arbitraria, estructura: `jsonParams={"param_1_name":"param_1_value",...,"param_n_name":"param_n_value"}` Pueden ser transmitidos al Centro de Procesamiento, para el procesamiento posterior (se requiere configuración adicional - póngase en contacto con el soporte). Algunos atributos predefinidos de jsonParams: `backToShopUrl` - añade a la página de pago un botón que devolverá al portador de la tarjeta a la URL transmitida en este parámetro `backToShopName` - configura la etiqueta de texto del botón Volver a la tienda por defecto, si se utiliza junto con `backToShopUrl` `installments` - cantidad máxima de autorizaciones permitidas para pagos a plazos. Se requiere para crear vinculación de cuotas `totalInstallmentAmount` - suma total de todos los pagos a plazos. El valor es necesario para guardar los datos de pago para realizar cuotas `recurringFrequency` - cantidad mínima de días entre autorizaciones. Se requiere para crear vinculación recurrente, se recomienda para crear vinculación de cuotas (si se utiliza 3DS2, el parámetro es obligatorio). `recurringExpiry` - fecha después de la cual no se permiten autorizaciones, en formato AAAAMMDD. Se requiere para crear vinculación recurrente, se recomienda para crear vinculación de cuotas (si se utiliza 3DS2, el parámetro es obligatorio). `paymentWay` - método de pago. Para realizar forzosamente un pago MOTO es necesario transmitir el valor `CARD_MOTO`.

Opcional	`orderBundle`	Object	Objeto que contiene la cesta de productos. La descripción de los elementos anidados se proporciona a continuación.

Opcional	`merchantLogin`	String [1..255]	Para registrar un pedido en nombre de otro comerciante, especifica su login (para la cuenta API) en este parámetro. Se puede usar solo si tienes permiso para ver las transacciones de otros vendedores o si el vendedor especificado es tu vendedor subsidiario.

Opcional	`merchantName`	String	merchantFullName en la pasarela de pago. Necesario para mostrar el nombre del vendedor en la ventana `payment request api`.
Opcional	`dynamicCallbackUrl`	String [1..512]	Parámetro para transmitir la dirección dinámica para recibir notificaciones callback de "pago" por pedido, activadas para el comerciante (autorización exitosa, débito exitoso, devolución, cancelación, rechazo de pago por timeout, rechazo de pago card present). Las notificaciones callback "no de pago" (activación/desactivación de vinculación, creación de vinculación), serán enviadas a la dirección callback estática.

Opcional	`ip`	String [1..39]	Dirección IP del pagador. IPv6 es compatible en todas las solicitudes (hasta 39 caracteres). Al utilizar autenticación 3DS 2 recomendamos que transmitas en este parámetro la dirección IP real del cliente. Esto permitirá aumentar la conversión en el pago del lado de ACS.

Opcional	`expirationDate`	String [19]	Fecha y hora de vencimiento del pedido. Formato: `yyyy-MM-ddTHH:mm:ss`. Si este parámetro no se transmite en la solicitud, entonces para determinar el tiempo de vencimiento del pedido se utiliza el parámetro `sessionTimeoutSecs`.

Opcional	`postAddress`	String [1..255]	Dirección de entrega.

Opcional	`feeInput`	Integer [0..8]	Tamaño de la comisión en unidades mínimas de moneda. La funcionalidad debe estar habilitada a nivel del comerciante en el gateway.

Condición	`email`	String [1..40]	Correo electrónico para mostrar en la página de pagos. Si las notificaciones del cliente están configuradas para el comerciante, es necesario especificar el correo electrónico. Ejemplo: `client_mail@email.com`. La dirección de correo electrónico no se verifica durante el registro, se verificará más tarde durante el pago.

Opcional	`billingPayerData`	Object	Bloque con datos de registro del cliente (dirección, código postal), necesario para pasar la verificación de dirección en el marco de los servicios AVS/AVV. Obligatorio, si la función está habilitada para el vendedor en el lado de la Pasarela de Pago. Ver parámetros anidados.
Opcional	`shippingPayerData`	Object	Objeto que contiene datos sobre la entrega al cliente. Este parámetro se utiliza para la posterior autenticación 3DS del cliente. Ver parámetros anidados.
Opcional	`preOrderPayerData`	Object	Objeto que contiene datos de pedido preliminar. Este parámetro se utiliza para la posterior autenticación 3DS del cliente. Ver parámetros anidados.
Opcional	`orderPayerData`	Object	Objeto que contiene datos sobre el pagador del pedido. Este parámetro se utiliza para la posterior autenticación 3DS del cliente. Ver parámetros anidados.
Opcional	`billingAndShippingAddressMatchIndicator`	String [1]	Indicador de coincidencia de la dirección de facturación del titular de la tarjeta y la dirección de envío. Este parámetro se utiliza para la posterior autenticación 3DS del cliente. Valores posibles: `Y` - coincidencia de la dirección de facturación del titular de la tarjeta y la dirección de envío; `N` - la dirección de facturación del titular de la tarjeta y la dirección de envío no coinciden.

A continuación se muestran los parámetros del bloque billingPayerData (datos sobre la dirección de registro del cliente).

Obligatoriedad	Nombre	Tipo	Descripción
Opcional	`billingCity`	String [0..50]	Ciudad registrada en la tarjeta específica en el Banco Emisor.

Opcional	`billingCountry`	String [0..50]	País registrado para la tarjeta específica del banco emisor. Formato: ISO 3166-1 (Alpha 2 / Alpha 3 / Number-3) o nombre del país. Recomendamos transmitir el código ISO de dos/tres letras del país.

Opcional	`billingAddressLine1`	String [0..50]	Dirección registrada para la tarjeta específica en el Banco Emisor (dirección del pagador). Línea 1. Obligatorio para la verificación AVS.

Opcional	`billingAddressLine2`	String [0..50]	Dirección registrada para la tarjeta específica en el Banco Emisor. Línea 2.

Opcional	`billingAddressLine3`	String [0..50]	Dirección registrada para la tarjeta específica en el Banco Emisor. Línea 3.

Opcional	`billingPostalCode`	String [0..9]	Código postal registrado para la tarjeta específica en el Banco Emisor. Obligatorio para la verificación AVS.

Opcional	`billingState`	String [0..50]	Estado registrado para la tarjeta específica en el Banco Emisor. Formato: valor completo del código ISO 3166-2, su parte o nombre del estado/región. Puede contener letras solo del alfabeto latino. Recomendamos transmitir el código ISO de dos letras del estado/región.
Obligatorio	`payerAccount`	String [1..32]	Número de cuenta del remitente.

Opcional	`payerLastName`	String [1..64]	Apellido del remitente.

Opcional	`payerFirstName`	String [1..35]	Nombre del remitente.

Opcional	`payerMiddleName`	String [1..35]	Patronímico del remitente.

Opcional	`payerCombinedName`	String [1..99]	Nombre completo del remitente.

Opcional	`payerIdType`	String [1..8]	Tipo de documento de identificación proporcionado del remitente. Valores posibles: `IDTP1` - Pasaporte `IDTP2` - Licencia de conducir `IDTP3` - Tarjeta social `IDTP4` - Tarjeta de identidad de ciudadano `IDTP5` - Certificado de conducción de negocios `IDTP6` - Certificado de refugiado `IDTP7` - Permiso de residencia `IDTP8` - Pasaporte extranjero `IDTP9` - Pasaporte oficial `IDTP10` - Pasaporte temporal `IDTP11` - Pasaporte de marino

Opcional	`payerIdNumber`	String [1..99]	Número del documento de identificación proporcionado del remitente.

Opcional	`payerBirthday`	String [1..20]	Fecha de nacimiento del remitente en formato YYYYMMDD.

Descripción de los parámetros del objeto shippingPayerData:

Obligatoriedad	Nombre	Tipo	Descripción
Opcional	`shippingCity`	String [1..50]	Ciudad del cliente (de la dirección de entrega)
Opcional	`shippingCountry`	String [1..50]	País del cliente
Opcional	`shippingAddressLine1`	String [1..50]	Dirección principal del cliente (de la dirección de entrega)
Opcional	`shippingAddressLine2`	String [1..50]	Dirección principal del cliente (de la dirección de entrega)
Opcional	`shippingAddressLine3`	String [1..50]	Dirección principal del cliente (de la dirección de entrega)
Opcional	`shippingPostalCode`	String [1..16]	Código postal del cliente para entrega
Opcional	`shippingState`	String [1..50]	Estado/región del comprador (de la dirección de entrega)
Opcional	`shippingMethodIndicator`	Integer [2]	Indicador del método de entrega. Valores posibles: `01` - entrega a la dirección de pago del titular de la tarjeta. `02` - entrega a otra dirección verificada por el Comerciante. `03` - entrega a una dirección diferente de la dirección principal del titular de la tarjeta. `04` - envío a la tienda/recogida en tienda (la dirección de la tienda debe especificarse en los parámetros de entrega correspondientes) `05` - Distribución digital (incluye servicios en línea y tarjetas de regalo electrónicas) `06` - billetes de viaje y eventos que no se pueden entregar. `07` - Otros (por ejemplo, juegos, productos digitales no entregables, suscripciones digitales, etc.)
Opcional	`deliveryTimeframe`	Integer [2]	Plazo de entrega del producto. Valores posibles: `01` - distribución digital `02` - entrega el mismo día `03` - entrega al día siguiente `04` - entrega dentro de 2 días después del pago y más tarde.
Opcional	`deliveryEmail`	String [1..254]	Dirección de correo electrónico de destino para la entrega de distribución digital. Es preferible transmitir el correo electrónico en el parámetro de solicitud independiente `email` (pero si lo transmite en este bloque, se aplicarán las mismas reglas).

Descripción de los parámetros del objeto preOrderPayerData:

Obligatoriedad	Nombre	Tipo	Descripción
Opcional	`preOrderDate`	String [10]	Fecha esperada de entrega (para compras de preorden) en formato AAAAMMDD.
Opcional	`preOrderPurchaseInd`	Integer [2]	Indicador de colocación por el cliente de un pedido para entrega disponible o futura. Valores posibles: `01` - entrega posible; `02` - entrega futura
Opcional	`reorderItemsInd`	Integer [2]	Indicador de que el cliente vuelve a reservar una entrega previamente pagada como parte de un nuevo pedido. Valores posibles: `01` - pedido colocado por primera vez; `02` - pedido repetido

Descripción de los parámetros del objeto orderPayerData.

Obligatoriedad	Nombre	Tipo	Descripción
Opcional	`homePhone`	String [7..15]	Teléfono de casa del propietario de la tarjeta. Es necesario indicar siempre el código del país, pero el signo `+` o `00` al inicio se puede indicar u omitir. El número debe tener una longitud de 7 a 15 dígitos. De este modo, son posibles los siguientes valores: `+35799988877`; `0035799988877`; `35799988877.`
Opcional	`workPhone`	String [7..15]	Teléfono de trabajo del propietario de la tarjeta. Es necesario indicar siempre el código del país, pero el signo `+` o `00` al inicio se puede indicar u omitir. El número debe tener una longitud de 7 a 15 dígitos. De este modo, son posibles los siguientes valores: `+35799988877`; `0035799988877`; `35799988877.`
Opcional	`mobilePhone`	String [7..15]	Número de teléfono móvil del propietario de la tarjeta. Es necesario indicar siempre el código del país, pero el signo `+` o `00` al inicio se puede indicar u omitir. El número debe tener una longitud de 7 a 15 dígitos. De este modo, son posibles los siguientes valores: `+35799988877`; `0035799988877`; `35799988877.` Para los pagos por VISA con autorización 3DS es necesario indicar el correo electrónico o el número de teléfono del propietario de la tarjeta. Si tiene configurada la visualización del número de teléfono en la página de pago y usted indicó un número de teléfono incorrecto, el cliente podrá corregirlo en la página de pago.

Descripción de parámetros en el objeto orderBundle:

Obligatoriedad	Nombre	Tipo	Descripción
Opcional	`orderCreationDate`	String [19]	Fecha de creación del pedido en formato `YYYY-MM-DDTHH:MM:SS`.

Opcional	`customerDetails`	Object	Bloque que contiene los atributos del cliente. La descripción de los atributos de la etiqueta se proporciona a continuación.
Obligatorio	`cartItems`	Object	Objeto que contiene atributos de productos en el carrito. La descripción de elementos anidados se proporciona a continuación.

Descripción de parámetros en el objeto customerDetails:

Obligatoriedad	Nombre	Tipo	Descripción

Opcional	`contact`	String [0..40]	Método de contacto preferido por el cliente.

Opcional	`fullName`	String [1..100]	Nombres y apellidos del pagador.
Opcional	`passport`	String [1..100]	Serie y número del pasaporte del pagador en el siguiente formato: `2222888888`

Opcional	`deliveryInfo`	Object	Objeto que contiene los atributos de la dirección de entrega. La descripción de los elementos anidados se proporciona a continuación.

Descripción de los parámetros en el objeto deliveryInfo:

Obligatoriedad	Nombre	Tipo	Descripción
Opcional	`deliveryType`	String [1..20]	Método de entrega.

Obligatorio	`country`	String [2]	Código de país de dos letras para la entrega.

Obligatorio	`city`	String [0..40]	Ciudad de destino.

Obligatorio	`postAddress`	String [1..255]	Dirección de entrega.

Descripción de parámetros en el objeto cartItems:

Obligatoriedad	Nombre	Tipo	Descripción
Obligatorio	`items`	Object	Elemento del array con atributos de la posición de mercancía. La descripción de los elementos anidados se proporciona a continuación.

Descripción de parámetros en el objeto items:

Obligatoriedad	Nombre	Tipo	Descripción
Obligatorio	`positionId`	Integer [1..12]	Identificador único de la posición del producto en el carrito.

Obligatorio	`name`	String [1..255]	Denominación o descripción de la partida de mercancía en forma libre.

No obligatorio	`itemDetails`	Object	Objeto con parámetros de descripción de la posición de mercancía. La descripción de los elementos anidados se proporciona a continuación.

Obligatorio	`quantity`	Object	Elemento que describe la cantidad total de posiciones de mercancías de un `positionId` y sus unidades de medida. La descripción de los elementos anidados se presenta a continuación.

No obligatorio	`itemAmount`	Integer [1..12]	Suma del costo de todas las posiciones de mercancías de un `positionId` en unidades mínimas de moneda. `itemAmount` es obligatorio para la transmisión, solo si no se transmitió el parámetro `itemPrice`. En caso contrario, la transmisión de `itemAmount` no es requerida. Si en la solicitud se transmiten ambos parámetros: `itemPrice` e `itemAmount`, entonces `itemAmount` debe ser igual a `itemPrice * quantity`, en caso contrario la solicitud finalizará con error.

No obligatorio	`itemPrice`	Integer [1..18]	Suma del costo de la posición de mercancía de un `positionId` en dinero en unidades mínimas de moneda.

No obligatorio	`depositedItemAmount`	String [1..18]	Importe del débito para un `positionId` en unidades mínimas de moneda (por ejemplo, en copecks).

No obligatorio	`itemCurrency`	Integer [3]	Código de moneda ISO 4217. Si no se especifica, se considera igual a la moneda del pedido.

Obligatorio	`itemCode`	String [1..100]	Número (identificador) de la posición de mercancía en el sistema de la tienda.

Descripción de los parámetros en el objeto quantity:

Obligatoriedad	Nombre	Tipo	Descripción
Obligatorio	`value`	Number [1..18]	Cantidad de posiciones de mercancías de dicho `positionId`. Para indicar números fraccionarios utilice el punto decimal. Se permite un máximo de 3 dígitos después del punto.

Obligatorio	`measure`	String [1..20]	Unidad de medida de la cantidad por posición.

Descripción de parámetros en el objeto itemDetails:

Obligatoriedad	Nombre	Tipo	Descripción
Opcional	`itemDetailsParams`	Object	Parámetro que describe información adicional sobre la posición de mercancía. La descripción de los elementos anidados se presenta a continuación.

Descripción de parámetros en el objeto itemDetailsParams:

Obligatoriedad	Nombre	Tipo	Descripción
Obligatorio	`value`	String [1..2000]	Información adicional sobre la posición de mercancías.

Obligatorio	`name`	String [1..255]	Denominación del parámetro de descripción de detalle de la posición de mercancía

Parámetros del objeto applePay

Más detalles se pueden ver en el constructor de botones https://applepaydemo.apple.com/

Obligatorio	Parámetro	Tipo	Descripción
Opcional	`buttonStyle`	String	Estilo de visualización del botón. Valores permitidos: 'black', 'white', 'white-outline'. Valor por defecto: 'black'.
Opcional	`paymentRequest`	String	Descripción de la sesión de pago Apple Pay. Más detalles se pueden leer en la documentación oficial. Ver ejemplo abajo.
Opcional	`paymentType`	String	Tipo de apariencia del botón de pago. Valores permitidos: `plain`, `buy`, `donate`, `set-up`, `book`, `subscribe`. Valor por defecto: `buy`. Para los tipos `donate`, `book`, `subscribe` el ancho del botón debe ser como mínimo 200 px.
Obligatorio	`merchantId`	String	`merchantId` en Apple, por ejemplo 'website.com'. También este sitio será usado como `label` en la ventana Apple Pay. Como está limitado por longitud, lo más fácil es mostrar el dominio del sitio.
Obligatorio	`language`	String [2]	Idioma del botón en formato ISO 639-1.

Ejemplo paymentRequest:

{
  countryCode: 'BG',
  currencyCode: 'BGN',
  supportedNetworks: [
    'masterCard',
    'visa',
    'electron',
    'maestro'
  ],
  merchantCapabilities: [
    'supports3DS',
    'supportsCredit',
    'supportsDebit'
  ],
  total: {
    label: '',
    amount: 1.00 // major units
  },
  requiredShippingContactFields: [
    'postalAddress',
    'name',
    'phone',
    'email'
  ]
}

Parámetros del objeto googlePay

Obligatorio	Parámetro	Tipo	Descripción
Obligatorio	`environment`	String	Entorno. Si no se especifica, entonces el botón GPay no se mostrará. Valores permitidos: `PRODUCTION` - se usa para mostrar métodos de pago reales, si para el dominio se especifica un identificador activo de comerciante Google. Se usa solo para entorno de producción. `TEST` - métodos de pago de prueba, destinados para testing (por defecto).
Opcional	`emailRequired`	Boolean	¿Preguntar email al pagar a través de PaymentRequest API? Valor por defecto: `true`.
Opcional	`phoneNumberRequired`	Boolean	¿Preguntar teléfono al pagar a través de PaymentRequest API? Valor por defecto: `true`.
Opcional	`billingAddressRequired`	Boolean	¿Preguntar dirección del pagador al pagar a través de PaymentRequest API? Valor por defecto: `true`.
Opcional	`shippingAddressRequired`	Boolean	¿Preguntar dirección de entrega al pagar a través de PaymentRequest API? Valor por defecto: `false`.
Opcional	`payerNameRequired`	Boolean	¿Preguntar nombre del pagador al pagar a través de PaymentRequest API? Valor por defecto: `false`.
Condición	`allowedCountryCodes`	Array of String	Lista de códigos de países en formato ISO 3166-1 alpha-2, donde está disponible la entrega. Obligatorio, si `shippingAddressRequired = true`.
Opcional	`buttonColor`	String	Color del botón Google Pay. Valores permitidos: `default` - valor seleccionado por defecto. Actualmente se usa `black`. `black` - botón negro para colocar sobre fondo blanco u otro fondo claro. `white` - botón blanco para colocar sobre fondo de color. Valor por defecto: `default`.
Opcional	`buttonType`	String	Tipo de inscripción en el botón. Valores permitidos: `long` - botón con texto "Pagar a través de Google Pay" (por defecto). Si en la configuración del navegador del usuario está seleccionado uno de los idiomas disponibles, se mostrará la versión localizada del botón. `short` - botón de pago a través de Google Pay sin texto. Valor por defecto: `short`.

Generador de código

También puede generar rápidamente código para la inicialización del script Payment Widget en Área personal. Para esto, vaya a la pestaña Botones rápidos -> Generador de código en su Área personal.

Esta página tiene un constructor, que se ve de la siguiente manera:

La pestaña incluye las siguientes secciones para establecer los parámetros de inicialización del script:

Configuraciones generales - especifique la información general para registrar el pedido en la Pasarela de Pago:
- Habilitar pago a través de Apple Pay y/o Google Pay,
- Número de pedido,
- Suma (obligatorio),
- Moneda (seleccione de la lista),
- Idioma (seleccione de la lista),
- Entorno (de prueba o de trabajo)
- Página de pago exitoso y Página de pago no exitoso (especifique URL o seleccione URL estándar).
Solicitud de datos de usuario - especifique los datos que serán obligatorios durante el pago a través de PaymentRequest API para Google Pay. Marque las casillas correspondientes: Nombre, E-mail, Número de teléfono, Dirección postal.
Configuraciones de botones de pago - especifique el tipo de apariencia externa y estilo de los botones Apple Pay y Google Pay. En la pestaña está disponible la vista previa del botón.
Código para insertar en su página - esta sección contiene la vista previa del código de inicialización del script de acuerdo con los parámetros especificados. Este código es necesario insertar en su página.

Soporte por navegadores

Entorno de software / Navegadores	Apple Pay	Google Pay
iOS / iPadOS — Safari	Sí	Sí (diseño web)
iOS / iPadOS — Chrome / Edge / Firefox	Sí	Sí (diseño web)
macOS — Safari	Sí	Sí
macOS — Chrome / Edge / Firefox	Sí, a través de QR (iOS 18+)	Sí
Windows / Linux / ChromeOS — Chrome / Edge / Firefox	Sí, a través de QR (iOS 18+)	Sí
Android — Chrome / Edge / Firefox	Sí, a través de QR (iOS 18+)	Sí

Pruebas e implementación

Entorno de prueba (UAT)

Conectar script con dirección https://dev.bpcbt.com/payment/.

<script
  src="https://dev.bpcbt.com/payment/pay-buttons/pay-buttons.js"
  id="pay-buttons">
</script>

Entorno productivo (PROD)