Etapa 4: Visualizar el formulario de pago.
Objetivo
- Mostrar todos los campos de pago (número de tarjeta, fecha de expiración, CVV, etc.) en su sitio web.
I.Inicializar el formulario de pago
En el HEAD,,
- Carguenuestra biblioteca JavaScripten una etiqueta
<script>.
src="https://static.cobroinmediato.tech/static/js/krypton-client/V4.0/stable/kr-payment-form.min.js"
- Implemente la clave pública
Establezca la clave pública en el parámetro kr-public-key
<head>
(...)
<script type="text/javascript"
src="https://static.cobroinmediato.tech/static/js/krypton-client/V4.0/stable/kr-payment-form.min.js"
kr-public-key="45789921:testpublickey_qSbs1nvRJEdy74KqANWo6TnGnRsTzwFMd9DYrO9OCdiHD"
(...)
>
</script>
(...)
</head>A modo de recordatorio, corresponde a la 3ª clave de la tabla.
3. Agregue otros parámetros de inicialización
- Adición de 2 parámetros de inicialización , por ejemplo:
| APELLIDO | Descripción |
|---|---|
| kr-post-url-success | URL hacia la que se redirige al navegador del comprador si el pago es satisfactorio. ( recomendado ) |
| kr-language | Define el idioma de presentación del formulario. Acepta el código ISO 639-1 (fr o fr-FR). Si no se define el parámetro, el formulario usa el idioma del navegador. |
. Ejemplo de código:
<head>
(...)
<script type="text/javascript"
src="https://static.cobroinmediato.tech/static/js/krypton-client/V4.0/stable/kr-payment-form.min.js"
kr-public-key="45789921:testpublickey_qSbs1nvRJEdy74KqANWo6TnGnRsTzwFMd9DYrO9OCdiHD"
kr-post-url-success="paid.php"
kr-language="en-EN">
</script>
(...)
</head>Référez-vous à ces 2 rubriques Paramètres généraux et Paramètres de personnalisation des "placeholders" pour les autres paramètres. Après la balise <script>, choisissez un thème.
4. Elige un tema
Neón es el tema por defecto. Estos son los enlaces para cambiar de tema.
<head> (...) <link rel="stylesheet" href="https://static.cobroinmediato.tech/static/js/krypton-client/V4.0/ext/neon-reset.min.css"> <script src="https://static.cobroinmediato.tech/static/js/krypton-client/V4.0/ext/neon.js"> </script> (...) </head>
Más información: temas.
5. Agregar funciones JS (opcional)
En otra etiqueta
<script>, puede optar por integrar eventos o métodos JS.Para más información, Descripción general de eventos y Descripción general de métodos.
Ejemplo de código para el HEAD sin función JS
<head>
<!-- STEP :
1 : load the JS librairy
2 : required public key
3 : the JS parameters url sucess and langage EN -->
<script type="text/javascript"
src="https://static.cobroinmediato.tech/static/js/krypton-client/V4.0/stable/kr-payment-form.min.js"
kr-public-key="45789921:testpublickey_qSbs1nvRJEdy74KqANWo6TnGnRsTzwFMd9DYrO9OCdiHD"
kr-post-url-success="paid.php"
kr-language="en-EN">
</script>
<!-- theme NEON should be loaded in the HEAD section -->
<link rel="stylesheet" href="https://static.cobroinmediato.tech/static/js/krypton-client/V4.0/ext/neon-reset.min.css">
<script src="https://static.cobroinmediato.tech/static/js/krypton-client/V4.0/ext/neon.js">
</script>
</head>II. Définir el modo de visualización
Dans le BODY, choisissez le mode d'affichage et valorisez le paramètre kr-form-token avec le formToken généré (Etape 3 : Créer un formToken).
| Modo | Descripción |
|---|---|
| lista | Muestra una lista de medios de pago disponibles y compatibles Visualización por defecto. |
| pop-in | Muestra un botón que abre un pop-in con los medios de pago compatibles disponibles. |
| lista con mapa a bordo | Muestra los campos incrustados para pagos con tarjeta y los medios de pago disponibles y compatibles. |
| Modo lista (por defecto) | Modo Pop-in | Modo lista con tarjeta incrustada |
|---|---|---|
 |  | |
<body>
<div class="kr-smart-form" kr-form-token="[GENERATED FORMTOKEN]"></div>
(...)
</body> | <body>
<div class="kr-smart-form" kr-popin kr-form-token="[GENERATED FORMTOKEN]"></div>
(...)
</body> | <body>
<div class="kr-smart-form" kr-card-form-expanded kr-form-token="[GENERATED FORMTOKEN]"></div>
(...)
</body> |
| Más información : Modo lista | Más información : Modo pop-in | Más información : Modo lista con tarjeta incrustada |
También tiene la opción :
III. Personalización avanzada
Este paso es opcional.
Ejemplo de personalización :
IV. Ejemplo simplificado de PHP
En la carpeta sample, el archivo para esta etapa es smartForm.php.
Para más información, Archivo de ejemplo: smartForm.php.