• Francia
Buscar
Categoria
Tags
LATAM
Francia
Alemania
Brasil
LATAM
España
Europa (Inglés)
Implementación
Formulario incrustado (smartForm)
Formulario incrustado (tarjetas)
API REST
API REST PCI-DSS
Formulario en redirección
Intercambio de ficheros
Pago móvil
Ejemplo de código
Módulos de pago
Back office
Guías
Ayuda
FAQ
Video tutorials
Contacte el soporte tecnico

Presentación del formulario inteligente (smartForm)

El formulario inteligente (smartForm) le permite integrar un itinerario de pago fluido y presentar varios métodos de pago.
El comprador completará el proceso de pago sin salir del sitio web comercial.

Cambios importantes en el formulario incrustado (tarjetas)

El formulario inteligente (smartForm) tiene la ventaja de mejorar el formulario incrustado (tarjetas) ofreciendo nuevas funciones. Si desea realizar la migración, haga clic aquí

Integración de nuevos métodos de pago

El formulario inteligente (smartForm) le permite añadir fácilmente y sin desarrollo métodos de pago "sin tarjeta" (redirección, código QR, pago en efectivo...). Por ejemplo: iniciación de transferencia, Apple Pay, etc.

Personalización con CSS y disponibilidad de varios temas

Personalice la apariencia de su formulario con hoja de estilo así como con temas listos para usar disponibles en código Open source.

Lista de medios de pago compatibles

Consulte la lista de métodos de pago compatibles.

Casos de uso

Descripción Modo lista (por defecto)
Este modo muestra en forma de lista el botón de pago con tarjeta y los botones de los métodos de pago compatibles.
Consulte este enlace para obtenerdes informations complémentaires : modo lista

Descripción Modo pop-in
Este modo muestra un botón que abrirá un pop-in con el botón de pago con tarjeta y los botones de los métodos de pago compatibles.
Consulte este enlace para obtenerdes informations complémentaires : modo pop-in

Descripción Modo lista con tarjeta incrustada
Este modo muestra los campos incrustados para pagos con tarjeta y los métodos de pago compatibles.
Consulte este enlace para obtenerdes informations complémentaires : modo lista con tarjeta incrustada

Modo lista (por defecto)
 
<body>
<!-- new class kr-smart-form -->
<div class="kr-smart-form" kr-form-token="[GENERATED FORMTOKEN]"></div>
 (...)
 <div class="kr-smart-button" kr-payment-method="PSE"></div>
 (...)
</body>

Au sein d'uneDIV, intregre la clasekr-smart-buttony el parámetrokr-payment-methodpara destacar el método de pago que desee.

Pour connaître les valeurs dukr-payment-method, consulte este enlace "Parámetros del formulario inteligente (smartForm)".

Consulte este enlace para obtenerdes informations complémentaires : destacar un método de pago.

Modo pop-in
 
<body>
<!-- new class kr-smart-form -->
<div class="kr-smart-form" kr-popin kr-form-token="[GENERATED FORMTOKEN]"></div>
 (...)
 <div class="kr-smart-button" kr-payment-method="PSE"></div>
 (...)
</body>

Au sein d'uneDIV, intregre la clasekr-smart-buttony el parámetrokr-payment-methodpara destacar el método de pago que desee.

Pour connaître les valeurs dukr-payment-method, consulte este enlace "Parámetros del formulario inteligente (smartForm)".

Consulte este enlace para obtenerdes informations complémentaires : destacar un método de pago.

Modo lista con tarjeta incrustada
 
<body>
  <!-- new class kr-smart-form -->
<div class="kr-smart-form" kr-card-form-expanded  kr-form-token="[GENERATED FORMTOKEN]"></div>
 (...)
 <div class="kr-smart-button" kr-payment-method="PSE"></div>
 (...)
</body>

Au sein d'uneDIV, intregre la clasekr-smart-buttony el parámetrokr-payment-methodpara destacar el método de pago que desee.
Pour connaître les valeurs dukr-payment-method, consulte este enlace "Parámetros del formulario inteligente (smartForm)".

Consulte este enlace para obtenerdes informations complémentaires : destacar un método de pago.

Modo lista (por defecto)
 
<body>
  <!-- new class kr-smart-form -->
<div class="kr-smart-form" kr-form-token="[GENERATED FORMTOKEN]"></div>
(...)
 <div>
    <div class="kr-smart-button" kr-payment-method="[SELECTED PAYMENT METHOD]"></div>
      (...)
    <div class="kr-smart-button" kr-payment-method="[SELECTED PAYMENT METHOD]"></div>
      (...)
 </div>
(...)
</body>

Intregre la clasekr-smart-buttony el parámetrokr-payment-methodpara destacar los métodos de pago que desee.
Cada botón de pago tiene su propiaDIV.

Pour connaître les valeurs dukr-payment-method, consulte este enlace "Parámetros del formulario inteligente (smartForm)".

Consulte este enlace para obtenerdes informations complémentaires : destacar varios métodos de pago

Modo pop-in
 
<body>
    <!-- new class kr-smart-form -->
<div class="kr-smart-form" kr-popin kr-form-token="[GENERATED FORMTOKEN]"></div>
(...)
 <div>
    <div class="kr-smart-button" kr-payment-method="[SELECTED PAYMENT METHOD]"></div>
      (...)
    <div class="kr-smart-button" kr-payment-method="[SELECTED PAYMENT METHOD]"></div>
      (...)
 </div>
(...)
</body>

Intregre la clasekr-smart-buttony el parámetrokr-payment-methodpara destacar los métodos de pago que desee.
Cada botón de pago tiene su propiaDIV.

Pour connaître les valeurs dukr-payment-method, consulte este enlace "Parámetros del formulario inteligente (smartForm)".

Consulte este enlace para obtenerdes informations complémentaires : destacar varios métodos de pago

Modo lista con tarjeta incrustada
 
<body>
  <!-- new class kr-smart-form -->
<div class="kr-smart-form" kr-card-form-expanded kr-form-token="[GENERATED FORMTOKEN]"></div>
(...)
 <div>
    <div class="kr-smart-button" kr-payment-method="[SELECTED PAYMENT METHOD]"></div>
      (...)
    <div class="kr-smart-button" kr-payment-method="[SELECTED PAYMENT METHOD]"></div>
      (...)
 </div>
(...)
</body>

Intregre la clasekr-smart-buttony el parámetrokr-payment-methodpara destacar los métodos de pago que desee.
Cada botón de pago tiene su propiaDIV.

Pour connaître les valeurs dukr-payment-method, consulte este enlace "Parámetros del formulario inteligente (smartForm)".

Consulte este enlace para obtenerdes informations complémentaires : destacar varios métodos de pago

Agrupar los métodos de pago (en efectivo)
<script type="text/javascript">
    $(document).ready(function() {
          KR.setFormConfig{ smartForm: ({ groupingThreshold: `**[new value]**` });
</script>

Integre este método en el header de su página de pago, DESPUÉS de haber cargado nuestra biblioteca JavaScript principal (kr-payment-form.min.js) junto con las hojas de estilo asociadas. Este botón se genera automáticamente, si dispone de más de 7 métodos de pago en efectivo en su tienda.
Consulte este enlace para obtenerdes informations complémentaires : personalizar el formulario
Ocultar los logotipos del pago con tarjeta
<body>
 <div class="kr-smart-form" kr-card-form-expanded kr-no-card-logo-header kr-form-token="[GENERATED FORMTOKEN]">
(...)
</div>
</body>

Intregre la clasekr-smart-formy el parámetrokr-no-card-logo-headeren la DIV que contiene elformToken.

Al integrar este parámetro, el vendedor puede integrar sus logotipos para personalizar el formulario de pago.
Consulte este enlace para obtenerdes informations complémentaires : Ocultar los logotipos del pago con tarjeta

Personalice el diseño
<style type="text/css">
    (...)
 /*to use the CSS Flexbox (Flexible Box)*/  
  .kr-smart-form .kr-embedded .flex-container {
    flex-direction: row !important;
    display: flex;
  }
  </style>
<body>
 <div class="kr-smart-form" kr-card-form-expanded kr-form-token="[GENERATED FORMTOKEN]">
  (...)
  </div>
</div>
</body>

Intregre la clasekr-smart-formy el parámetrokr-card-form-expandeden la DIV que contiene elformToken.

Para alinearde forma horizontallos campos del formulario incrustado, puede utilizar lasFlexbox en CSScon la propiedadflex-directionestablecida enrow.

Consulte este enlace para obtenerdes informations complémentaires : Personalice el diseño


También tiene la posibilidad de:
  • Modificar el orden de visualización de los medios de pago
  • Seleccionar los medios de pago

Amplementación técnica

Si ya ha implementado el formulario incrustado (tarjetas), encontrará información sobre cómo migrar a smartForm:

  • Migración del formulario integrado (tarjetas) al formulario inteligente (smartForm)

Las diferentes etapas de la integración son :

  1. Requisitos previos
  2. Autentícate
  3. CrearElformToken.
  4. Mostrar el formulario de pago.
  5. Analizar el resultado del pago.
  6. Cambia a Producción.

Para más información, vaya a Integración de formularios de pago.

Head Office :

LYRA NETWORK
109, rue de l’innovation
31670 Labège
FRANCE

Nuestros SERVICIOS

Lyra
Recruitment
PayZen
© 2023 | Todos los derechos reservados de PayZen
2.47.0-doc-1.9