Presentación del formulario incrustado smartForm

Le formulaire embarqué (smartForm) vous permet d'intégrer un parcours de paiement fluide et de présenter plusieurs moyens de paiement.
El comprador completará el proceso de pago sin salir del sitio web comercial.

Cambios importantes en el formulario incrustado (tarjetas)

El formulario incrustado smartForm mejora el formulario incrustado de pago con tarjeta ofreciendo nuevas funcionalidades. Si desea migrar, haga clic aquí

Integración de nuevos medios de pago

El formulario incrustado smartForm permite añadir medios de pago "sin tarjeta" (redirección, código QR, pago en efectivo, etc.) de manera fácil y sin necesidad de programar.

Personalización con CSS y disponibilidad de varios temas

Personalice la apariencia de su formulario con hojas de estilo y con temas listos para usar disponibles en código open source.

Casos de uso

Elegir el modo de visualización: lista / pop-in / lista con tarjeta incrustada

Modo lista

Descripción	Modo lista (por defecto)
Este modo muestra el botón de pago con tarjeta y los botones de los medios de pago compatibles en forma de lista.

Consulte este enlace paramás información. : modo lista

Modo pop-in

Descripción	Modo pop-in
Este modo muestra un solo botón que abre un pop-in con el botón de pago con tarjeta y los botones de los medios de pago compatibles.

Consulte este enlace paramás información. : modo pop-in

Modo lista con tarjeta incrustada

Descripción	Modo lista con tarjeta incrustada
Este modo muestra los campos incrustados para pagos con tarjeta y medios de pago compatibles.

Consulte este enlace paramás información. : modo lista con tarjeta incrustada

Destacar un modo de pago

Consultez ce lien pour avoir des informations complémentaires: mettre en évidence un moyen de paiement.

Destacar varios medios de pago

Consulte este enlace paramás información. : destacar varios medios de pago

Personalizar el formulario incrustado smartForm,

Agrupar los medios de pago (en efectivo)

Agrupar los medios 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 DESPUES de haber cargado nuestra biblioteca principal JavaScript (`kr-payment-form.min.js`) y las hojas de estilo asociadas. Este botón se genera automáticamente si ofrece más de 7 métodos de pago en efectivo en su tienda.

<script type="text/javascript">
    $(document).ready(function() {
          KR.setFormConfig{ smartForm: ({ groupingThreshold: `**[new value]**` });
</script>

Consulte este enlace paramás información. : personalizar el formulario

Ocultar los logotipos del pago con tarjeta

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 clase`kr-smart-form`y el parámetro`kr-no-card-logo-header`en la DIV que contiene el`formToken`. Al integrar este parámetro, el vendedor puede integrar sus logotipos para personalizar el formulario de pago.

Consulte este enlace paramás información. : Ocultar los logotipos del pago con tarjeta

Personalizar el diseño: ejemplo de alineamiento horizontal

Personalice el diseño

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 clase`kr-smart-form`y el parámetro`kr-card-form-expanded`en la DIV que contiene el`formToken`. Para alinearde forma horizontallos campos del formulario incrustado, puede utilizar lasFlexbox en CSScon la propiedad`flex-direction`establecida enrow.

<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>

Consulte este enlace paramás información. : Personalización avanzada

Amplementación técnica

Migración del formulario incrustado de pago con tarjeta al formulario incrustado smartForm

Si vous avez déjà implémenté le formulaire embarqué (cartes), vous trouverez les informations pour migrer vers le formulaire embarqué (smartForm) :

aquí

Integración del formulario incrustado smartForm

Las diferentes etapas de la integración son :

Prerrequisito
Autentificarse
CrearelformToken.
Visualizar el formulario de pago.
Analizar el resultado del pago.
Pasar al modo Production.

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