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 de la página, es necesario incluir los siguientes datos en una etiqueta <script>.

Cargue nuestra biblioteca JavaScript

src="https://static.micuentaweb.pe/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"
        (...)
        kr-public-key="89289758:testpublickey_TxzPjl9xKlhM0a6tfSVNilcLTOUZ0ndsTogGTByPUATcE"
        (...)
 </script>
(...)
 </head>

A modo de recordatorio, corresponde a la 3ª clave de la tabla.

Añadir 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.micuentaweb.pe/static/js/krypton-client/V4.0/stable/kr-payment-form.min.js"
        kr-public-key="89289758:testpublickey_TxzPjl9xKlhM0a6tfSVNilcLTOUZ0ndsTogGTByPUATcE"
        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 connaître les autres paramètres. Après la balise <script>, choisissez un thème.

Elija un tema

Classic (clásico) es el tema por defecto. Estos son los enlaces para cambiar de tema.

<head>
(...)
<link rel="stylesheet" href="https://static.micuentaweb.pe/static/js/krypton-client/V4.0/ext/classic.css">
  <script
  src="https://static.micuentaweb.pe/static/js/krypton-client/V4.0/ext/classic.js">
 </script>
 (...)
 </head>

Más información sobre los temas.

Adición de las funciones JS (optativo):

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 with file config.php
3 : the JS parameters url sucess and langage EN  -->

<script type="text/javascript"
        src="https://static.micuentaweb.pe/static/js/krypton-client/V4.0/stable/kr-payment-form.min.js"
        kr-public-key="89289758:testpublickey_TxzPjl9xKlhM0a6tfSVNilcLTOUZ0ndsTogGTByPUATcE"
        kr-post-url-success="paid.php";
        kr-language="en-EN">
 </script>

  <!--  theme CLASSIC should be loaded in the HEAD section   -->
<link rel="stylesheet" href="https://static.micuentaweb.pe/static/js/krypton-client/V4.0/ext/classic-reset.min.css">
<script src="https://static.micuentaweb.pe/static/js/krypton-client/V4.0/ext/classic.js">
 </script>
 </head>

II. Définir el modo de visualización

En BODY, elija el modo de visualización que más le convenga.

Modo	Descripción
incrustado	Muestra los campos del pago con tarjeta (número de tarjeta, fecha de expiración, CVV, etc.)
pop-in	Muestra un botón de pago que abre un pop-in con los campos de pago (número de tarjeta, fecha de expiración, CVV, etc.).

Modo incrustado	Modo Pop-in
<body> <div class="kr-embedded" kr-form-token="[GENERATED FORMTOKEN]"></div> (...) </body>	<body> <div class="kr-embedded" kr-popin kr-form-token="[GENERATED FORMTOKEN]"></div> (...) </body>
Más información : Modo incrustado	Más información : Modo pop-in

III. Personalización avanzada

Este paso es opcional.

Ejemplo de personalización :

IV. Ejemplo simplificado de PHP

En la carpeta sample, los archivos de ejemplo son:

embedded.php.
popin.php.

Para más información, Archivos de ejemplo: embedded.php y popin.php<.

Categoria