1. Home
2. Soluciones de integración
3. Integraciones
4. FlexCheckout

1. Introducción

One Page Checkout con FlexCheckout le permite solicitar a sus clientes que introduzcan los detalles de su tarjeta de crédito de forma segura en el sistema PSP, tokenizar estos datos y reutilizar la clave (o el alias) en una futura transacción:

1. FlexCheckout: Redireccione a, o incluya en un iframe, la FlexCheckout en la que el titular de la tarjeta introducirá los datos de la tarjeta en nuestro sistema, donde se almacenarán de forma segura (incluido el CVC, pero solo por un tiempo limitado)
2. DirectLink: Envíe el pedido real con el alias generado, sin necesidad de enviar los datos de la tarjeta.

Ventajas

• Tendrá todo el control sobre el aspecto de la página de pago gracias al mecanismo de plantilla flexible y, si incluye la FlexCheckout dentro de un I-frame, incluso podrá controlar la secuencia de compra.
• Tiene la ventaja de una página de pago segura que cumple con las normas PCI sin tener que almacenar usted mismo los datos de la tarjeta. Toda la información confidencial se introduce directamente en nuestra página alojada.
• Perfecta integración para los diversos escenarios de compra, incluido One Page Checkout.
• Puede ofrecer servicios de propensión de compra y venta cruzada en la página de compra final.
• Se admiten todas las principales marcas de tarjeta de crédito (VISA, MasterCard, American Express, Diners) .

El gráfico superior muestra el flujo de una transacción con FlexCheckout 

2. Opciones obligatorias

Debe tener las siguientes opciones habilitadas en su cuenta (PSPID) para usar FlexCheckout.
Compruébelas en Back office en Configuración > Cuenta > Sus opciones > Opciones disponibles o Opciones predeterminadas según corresponda.

• OPC (One page checkout) O RECX (Alias Manager)
• DPR DirectLink (nuevos pagos)

Si alguna opción no está disponible en su PSPID, por favor póngase en contacto con nuestro equipo de soporte.

3. Flujo de datos típico

Puede redirigirse a (o incluir en) un iframe el FlexCheckout donde el titular de la tarjeta introducirá los datos de la tarjeta en nuestro sistema. Los datos de la tarjeta, conjuntamente con el CVC, se almacenan de forma segura pero solo durante un tiempo limitado. Para almacenar los datos de tarjeta de forma permanente, puede etiquetar el Alias como alias "Persistente". No obstante, de conformidad con las normas del Consejo de Seguridad de PCI, los CVC solo se pueden almacenar durante dos horas como máximo.

A través de DirectLink, también puede enviar el pedido real con el alias generado, sin enviar los datos de la tarjeta.

El gráfico superior muestra el flujo de una transacción paso a paso con FlexCheckout 

Nota: En el primer paso, no se realiza ninguna operación en la tarjeta. Nuestro sistema simplemente realiza una validación de formato básica, pero no puede garantizar que la tarjeta siga siendo válida o que tenga suficiente saldo para continuar.

3.1 DirectLink

Para utilizar el alias o la clave generados con la FlexCheckout, debe enviar una transacción de DirectLink mediante nuestra implementación de DirectLink estándar. Vaya a DirectLink para obtener instrucciones de implementación.

Este mecanismo también es compatible con DirectLink 3-D. Si desea más información acerca del uso de alias, vaya a Administrador de alias.

3.2 Uso con el Administrador de alias

Si utiliza la opción Administrador de alias, puede poner a disposición una casilla de la FlexCheckout, lo que permite al cliente decidir si guardar o no sus detalles financieros.

Para ello, en la página de configuración del Administrador de alias de su cuenta de Viveum, debe habilitar un valor para mostrar la casilla (el valor predeterminado es "No").

> Le recomendamos utilizar esta configuración en una configuración de One-Page-Checkout.

De forma alternativa, si ha integrado un proceso de compra en varios pasos, puede usar el parámetro "StorePermanently" en su integración, para controlar usted mismo cuándo debe mostrarse el cuadro de marcación.

4. Integración de FlexCheckout como una tokenización

Puede utilizar FlexCheckout de dos maneras:

1. Redirigiendo al cliente a FlexCheckout
2. Encapsulando FlexCheckout dentro de un iframe de modo que los clientes permanezcan en su página y crear una experiencia de One Page Checkout completa

Advertencia: No aconsejamos integrar FlexCheckout como una solución integrada en la aplicación pura ya que algunas características no funcionarían en algunos smartphones de gama media, sino una solución de sitio web móvil que utilice todas las capacidades de los navegadores.

Cuando el cliente se redirige a FlexCheckout, tendrá que introducir los datos de su tarjeta y enviarlos para tokenización en FlexCheckout. De esta forma, los detalles de la tarjeta nunca pasan por nuestro propio servidor web. Las URL para acceder a FlexCheckout son

• Prueba: https://viveum.test.v-psp.com/Tokenization/HostedPage
• Producción: https://viveum.v-psp.com/Tokenization/HostedPage

4.1 Campos de entrada

4.1.1 Buscar OrderID duplicados

Para impedir que los hackers sustituyan detalles de tarjetas relacionados con una clave concreta (capturando el enlace para activar la solicitud y sustituyendo los datos de la tarjeta por datos de tarjetas auténticos de una tarjeta auténtica), realizamos una comprobación en el OrderID (ALIAS.ORDERID) que envía en la solicitud.

Si detectamos que el OrderID ya se ha utilizado para crear una clave, se rechazará la actualización del alias.

Con la detección de un OrderID duplicado y con la solicitud bloqueada, se mostrará un mensaje de error genérico en el cliente:

"Se ha producido un error al procesar la solicitud. Inténtelo de nuevo más tarde o póngase en contacto con el comerciante."

Los errores generados por un OrderID duplicado se pueden detectar cuando se active el modo de depuración en los Registros de error (póngase en contacto con nuestro Servicio de Atención al Cliente).

4.2 Firma SHA para entrada

Para comprobar la integridad de los datos, necesitamos que todas las solicitudes vayan acompañadas de una firma SHA, de la misma forma que para las e-Commerce transacciones.

Nuestro sistema utilizará el algoritmo SHA según se define en la pestaña Parámetros de seguridad global de su página Información técnica. Sigue siendo posible volver a cambiar este algoritmo a SHA-1 o SHA-256.

4.3 Campos de salida

Se le pueden devolver los campos siguientes para que reciba el estado de la creación/actualización del alias. Para que se incluyan en la respuesta, deben estar previamente configurados en los parámetros de la respuesta dinámica de su cuenta Viveum (Configuración > Información técnica > Respuesta transacción > Alias gateway y Tokenization: Parámetros dinámicos).

El SHASIGN no es opcional y, por tanto, siempre se devolverá.

Los parámetros seleccionados se añadirán a la URL de retorno definido en la solicitud (PARAMETERS.ACCEPTURL o PARAMETERS.EXCEPTIONURL) con el fin de proporcionar la respuesta en la operación.

ALIAS.STOREPERMANENTLY Indica la opción entre almacenar el alias de forma temporal (N) o indefinida (Y).

Cuando se realiza una transacción con este alias, los comerciantes deben volver a enviar este parámetro en el campo ALIASPERSISTEDAFTERUSE. De lo contrario, se almacenará de forma permanente.

4.4 Firma SHA para salida

Nuestro sistema devolverá una firma SHA-OUT, de la misma forma que para las transacciones de e-Commerce, para los siguientes parámetros:

ALIAS.ALIASID

ALIAS.NCERROR

ALIAS.NCERRORCARDNO

ALIAS.NCERRORCN

ALIAS.NCERRORCVC

ALIAS.NCERRORED

ALIAS.ORDERID

ALIAS.STATUS

ALIAS.STOREPERMANENTLY

CARD.BIC

CARD.BIN

CARD.BRAND

CARD.CARDHOLDERNAME

CARD.CARDNUMBER

CARD.CVC

CARD.EXPIRYDATE

5. Personalización

Este capítulo introduce dos tipos de personalización: básica y avanzada. En Personalización básica, aprenderá a aplicar su propio CSS y a personalizar los colores de texto, colores de fondo y de contenedores, y similares. La siguiente es una página de pago predeterminada que utiliza los archivos CSS predeterminados:

En la personalización Avanzada, aprenderá más acerca de las plantillas maestra/parciales, a utilizar marcadores de posición y a personalizar el contenido de texto con archivos XML. En función de sus necesidades, las plantillas parciales se crean y se personalizan por separado.

5.1 Personalización básica

5.1.1 Plantilla de Viveum predeterminada

El archivo CSS puedes ser un archivo personalizado con un estilo de Viveum predeterminado o bien un archivo CSS cargado en el Administrator de archivos de plantillas.

Para obtener más información acerca de la personalización de su propio archivo CSS, consulte el uso de las hojas de estilo.

5.1.2 Uso de hojas de estilo

Puede adaptar el diseño de FlexCheckout mediante la aplicación de un archivo CSS. Primero tendrá que cargar su archivo CSS en el Administrador de archivos de plantilla y vincularlo a su cuenta de Viveum. El archivo CSS consta de contenedores de formulario / datos y elementos (como: Fecha de caducidad, CVC, Cuadro de información y etc.) que deben establecerse como el archivo CSS predeterminado. Puede vincular cada elemento que define el formato para cada campo al contenedor de formulario / datos.

En función de las necesidades empresariales, puede modificar la regla de formato dentro de cada elemento. Haga clic aquí para obtener una lista de CSS elements.

A continuación se presenta un formulario/contenedor de datos y elementos de muestra:

Puede cambiar la interfaz de usuario predeterminada (como se muestra a continuación) aplicando su propio CSS.

Color de contenedor de formulario

CSS afectados:

.payment-form-container{ Background:#f8f8f8; }

Color de contenedor de formulario

CSS afectados:

#payment-data-container{ Background:#5F5F5F; }

Color del texto

CSS afectados: #payment-data-container .payment-label{color:#FFFFFF;} #payment-data-container{color:#6E6E6E;}

Color de borde de entrada

CSS afectados:

#payment-data-container .payment-input input{border:1px solid #FFFFFF;}

Cuadro de mensaje de validación

CSS afectados:

.payment-error { color:#ab1500; background:#ffe9e8; border:1px solid #ab1500;}
#payment-data-container .payment-input-error input { color:#ab1500; border:1px solid #ab1500;}
#payment-data-container .payment-input-error select { color:#ab1500; border:1px solid #ab1500;}

Cuadro de información de ayuda

CSS afectados:

#payment-cvc-info-container span.aroowImg {background: #5F5F5F url(arrow-top.png) 0 0 no-repeat;}

#payment-cvc-info-container div.help-box {border: 1px solid #000000;background: #FFFFFF;}

Information icon

CSS afectados:

payment-method-info {background:url(payment_info.png) 4px 1px no-repeat;}.

Botón Enviar/Cancelar

CSS afectados:

#payment-data-container #payment-submit {background:#c6ef84;color: #134600;} #payment-cancel-container input {background:#f8f8f8;border-color:#000;}

Color de fondo

CSS afectados:

payment-container {background:# e9e9e9} #

CSS de ejemplo

#payment-container {background:# e9e9e9} .payment-form-container{ Background:#f8f8f8; } #payment-data-container{ Background:#666; } #payment-data-container{color:fff;} #payment-data-container .payment-label{color:fff;} #payment-data-container .payment-input input{border:1px solid #fff;} .payment-error { color:#ab1500; background:#ffe9e8; border:1px solid #ab1500;} #payment-data-container .payment-input-error input { color:#ab1500; border:1px solid #ab1500;} #payment-data-container .payment-input-error select { color:#ab1500; border:1px solid #ab1500;} #payment-cvc-info-container div.help-box {border: 1px solid #000;background: fff;} #payment-cvc-info-container span.aroowImg {background: #fff url(arrow-top.png) 0 0 no-repeat;} #payment-cvc-info-container p.cvc-info-txt{color: #000;} .payment-method-info {background:url(payment_info.png) 4px 1px no-repeat;} #payment-data-container #payment-submit {background:#c6ef84;color: #134600;} #payment-cancel-container input {background:#f8f8f8;border-color:#000;}

5.2 Personalización avanzada

Para permitir una mayor flexibilidad, puede crear y personalizar plantillas maestras y plantillas parciales. En función de sus necesidades, las plantillas parciales se crean y se personalizan por separado. También puede personalizar el contenido de texto con archivos XML.

Puede elegir aplicar una etiqueta $$$PAYMENT ZONE$$$ que requiere una plantilla sencilla o personalizar su propia plantilla parcial utilizando marcadores de posición.

5.2.1 Uso de marcadores de posición

Puedes personalizarlo y dar formato a su propia plantilla maestra (master.html) y plantillas parciales, pueden insertar marcadores de posición directamente en master.html.

También puede definir el aspecto de la página de pago a través de un archivo CSS personalizado (newuser.css) que debe estar enlazado a master.html. Si elige personalizar su archivo CSS, el archivo CSS modificado se debe cargar en el Administrador de archivos de plantillas y se debe definir como predeterminado.

Los marcadores de posición se clasifican en tres grupos: marcadores de posición principales, de elemento y agrupados.

Marcadores de posición principales

• $$$PAYMENT ZONE$$$: representa un método de pago o solicitud de marca bien a través de una plantilla personalizada (con una plantilla parcial disponible) o la plantilla predeterminada.

• $$$TP RESOURCES URL$$$: hace que la URL esté disponible en el directorio donde se encuentran los archivos en el Servicio de archivo alojado.

También tiene la opción de utilizar secuencias de comandos personalizadas que tendrán que estar enlazadas a un archivo de JavaScript personalizado. Se puede hacer referencia a este archivo de JavaScript una vez que estén cargados en el Administrador de archivos de plantillas. Por ejemplo, el archivo JavaScript al que se hace referencia en <script type="text/javascript" src="$$$TP RESOURCES URL$$$/existinguser.js"></script> es existinguser.js.

Para utilizar bibliotecas de JavaScript en la plantilla (p. ej., JQuery), debe cargar los archivos de JavaScript en el Administrador de archivos de plantillas. Una vez cargado, utilice $$$TP RESOURCE URL$$$ para hacer referencia a las secuencias de comandos. Este paso se debe ejecutar para todos los archivos a los que se haga referencia en la plantilla: CSS, imágenes, fuentes, etc. y se asegurará de que la secuencia de comandos ejecutada sea el JavaScript dedicado.

Nota: No todos los datos se pueden insertar/extraer desde un host de terceros que no sea compatible con PCI, por tanto, el uso de JavaScript afectará a la capacidad del comerciante de reunir los requisitos de idoneidad para PCI SAQ A.

• $$$DISABLE MASKING$$$: deshabilita una máscara de cuadro de entrada.

• $$$SUBMIT$$$: representa un botón Enviar para el formulario. Por ejemplo:

<div id="payment-submit-container">

    <input id="payment-submit" type="submit" value="Submit"/>  

</div>

• $$$CANCEL$$$: representa un boton Cancelar para el formulario. Por ejemplo:

<div id="payment-cancel-container">

    <input id="payment-cancel" name="cancel" type="submit" value="Cancel"  class="cancel" />

</div>

Una plantilla maestra que contenga $$$PAYMENT ZONE$$$ no necesitará incluir los marcadores de posición enviar y cancelar. No obstante, se deben incluir los marcadores de posición enviar y cancelar si se construye una plantilla parcial por método de pago o si se crea una plantilla principal sin el marcador de posición $$$PAYMENT ZONE$$$.

Marcador de posición de elemento

El control <elemento> real se representa dentro de un contenedor de elemento: <div id="payment-<input_name>-<element>-container" class="payment-<element>">. para una aplicación de estilos CSS sencilla, se aplica la misma convención de nombres a Id. y clase.

• $$$<input_name><element>$$$: The card number input control.

• $$$CARD NUMBER.INPUT$$$ - CARD NUMBER como el <nombre_entrada> donde INPUT es el <elemento> html.

• $$$<input_name>LABEL$$$: proporciona una etiqueta para el elemento <nombre_entrada>.

Por ejemplo, el marcador de posición $$$CARD NUMBER LABEL$$$ representa esto:

<div id="payment-cardnumber-label-container" class="payment-label">

<label for="payment-cardnumber" id="lbl_CreditCardInputModel_CardNumber" title="CardNumber">Card number</label> </div>

Para todas las etiquetas se representará un div que actúe como contenedor:

 <div id="payment-<input_name>-label-container" class="payment-label">

La clase de un contenedor de etiqueta siempre será “payment-label” de modo que el estilo de las etiquetas se pueda definir conjuntamente.

Una etiqueta para un control de etiqueta siempre se representará:

<label for="payment-<input_name>" id="lbl_CreditCardInputModel_CardNumber" 

title="CardNumber">Card number</label>                      
        

Para definir el estilo de un control de etiqueta, aplique elarchivo CSS al ID del contenedor, no al ID del control.

$$$<input_name> INPUT$$$ representa el control de entrada para:

<div id="payment-<input_name>-input-container" class="payment-input">

<input Id="payment-<input_name>" autocapitalize="off" autocomplete="off" 

autocorrect="off" class="inp-txt" id="txt_CreditCardInputModel_CardNumber" 

maxlength="40" name="CreditCardInputModel.CardNumber" pattern="[X0-9]*" 

spellcheck="False" type="tel" value=""></input>

/div>                                      
        

Para definir el estilo de un control de entrada, aplique el archivo CSS al ID del contenedor, no al ID del control.

$$$<input_name> INFO$$$ representa un enlace a una descripción del campo <input_name> field:

<div id="payment-<input_name>-info-container" class="payment-info">

     <span id="payment-<input_name>-info"></span>

</div>                       
        

Enlaza cualquier información para este campo en el idioma seleccionado.

$$$<input_name> ERROR$$$ representa un contenedor para mensajes de error desde <input_name>:

<div id="payment-<input_name>-error-container">

<span class="field-validation-valid" data-valmsg-for="CreditCardInputModel.CardNumber" 

data-valmsg-replace="true"></span>

</div>                                      
        

Los mensajes de validación se pueden insertar aquí.

Marcadores de posición agrupados

<div id="payment-<input_name>-container">

 $$$<INPUT_NAME> LABEL$$$

 $$$<INPUT_NAME> INPUT$$$

 $$$<INPUT_NAME> ERROR$$$

 $$$<INPUT_NAME> INFO$$$

</div>                         
        

Una plantilla maestra puede tener marcadores de posición dentro <div id="paymentForm">. Los marcadores de posición (tales como $$$CARD NUMBER$$$, $$$CARDHOLDER NAME$$$, $$$EXPIRY DATE$$$, etc.) definen el contenido del formulario de la tarjeta de crédito. Los comerciantes pueden seleccionar los marcadores de posición que mejor se adapten a sus necesidades.

A continuación se muestra un ejemplo de una plantilla maestra con marcadores de posición para un formulario de tarjeta de crédito etiquetado“paymentForm”:

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <link rel="stylesheet" href="$$$TP RESOURCES URL$$$/newuser.css"/>

    </head>

<body>
    <div id="paymentForm">

$$$CARD NUMBER$$$

$$$CARDHOLDER NAME$$$

$$$EXPIRY DATE$$$

$$$CVC$$$

$$$SUBMIT$$$

$$$CANCEL$$$

   </div>

</html> 
        

Para crear un formulario de domiciliación bancaria, los comerciantes pueden utilizar marcadores de posición de domiciliación bancaria, como el siguiente:

El nombre de cuenta bancaria, número IBAN y código BIC representarán un formulario de domiciliación bancaria.

Para los comerciantes que desean una plantilla que admita varios métodos de pago, pueden crear una plantilla maestra y una plantilla parcial para métodos de pago.

Una plantilla maestra es del siguiente modo:

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>    
   <script src="$$$TP RESOURCES URL$$$/jquery-2.1.4.min.js"></script>
    <link rel="stylesheet" href="$$$TP RESOURCES URL$$$/user.css"/>
    <script type="text/javascript" src="$$$TP RESOURCES URL$$$/existinguser.js"></script>
</head>
<body>
    <div id="paymentForm">
        $$$PAYMENT ZONE$$$
    </div>
</body>
</html>

Una plantilla parcial es del modo siguiente y se crea con marcadores de posición ($$$CARD NUMBER$$$, $$$CARDHOLDER NAME$$$, $$$EXPIRY DATE$$$, and so on):

<div id="paymentForm">
$$$CARD NUMBER$$$
$$$CARDHOLDER NAME$$$
$$$EXPIRY DATE$$$
$$$CVC$$$
$$$SUBMIT$$$
$$$CANCEL$$$
</div>

Si los comerciantes no desean representar el formulario de pago predeterminado mediante $$$PAYMENT ZONE$$$, se puede insertar una plantilla parcial en su lugar.

Por ejemplo, si el método de pago solicitado es una tarjeta de crédito, se utilizará una plantilla parcial con el nombre master.creditcard.htm. Y si se trata de una domiciliación bancaria, en su lugar se utilizará una plantilla parcial con el nombre master.directdebit.htm.

Los comerciantes tendrán que cargar esta plantilla parcial en el Administrador de archivos. También se debe seguir estrictamente una convención de nomenclatura. Por ejemplo, si la plantilla maestra existente se denomina master.html y si los comerciantes desean enviar domiciliación bancaria como método de pago, será necesario cargar una plantilla parcial denominada master_directdebit.html en el Administrador de archivos.

5.2.2 Personalización de contenido de texto con XML

También puede personalizar el aspecto del texto en las páginas de tokenización mediante un archivo XML. Si no se aplica un archivo XML, se utilizará el formulario de tokenización. Después de personalizar el archivo XML, tendrá que cargarlo en el Administrador de archivos de plantillas y utilizar el mismo nombre de archivo que la plantilla maestra. Tenga en cuenta que como requisito, se debe cargar de antemano una plantilla maestra.

Con el archivo XML, debe haber también elementos para identificar los campos. Haga clic aquí para obtener una lista completa lista de elementos. El siguiente es un ejemplo de un elemento (CardHolderNameInput) para la introducción de un nombre de titular de tarjeta:

En este elemento se han especificado los idiomas Inglés (EE. UU.) y Francés en el Language Id. La etiqueta ID también especifica el código de cultura ISO.

Si no se especifica ningún elemento, se utilizará en su lugar el texto predeterminado para dicho elemento. Y si no se ha especificado el idioma de un elemento, se utilizará el idioma predeterminado.

Nota:

La primera línea del archivo XML debe empezar siempre por <root>. La última línea del archivo XML debe terminar siempre por </root>

5.3 Administrador de archivos de plantillas

Con el Administrador de archivos de plantillas puede gestionar fácilmente sus plantillas y los distintos archivos que la acompañan.

Para empezar a usar el Administrador de archivos, inicie sesión en su cuenta de Viveum y vaya a "Configuración" > "Plantilla" > "Administrador de archivos".

5.3.1 Subir archivos de plantilla

En "Subir archivos de plantilla", seleccione el botón "Archivos..." para seleccionar los archivos que desee cargar. Puede cargar css e imágenes (.css, .jpg, .jpeg, .gif, .png), de un máximo de 7 MB por cada archivo, y un total de 10 MB.

5.3.2 Comprobar y administrar archivos cargados

Cuando los archivos acaben de cargarse, los verá en la misma página, en el apartado "Archivos cargados".

Los archivos mostrarán primero el estado "Validando", durante el cual, se realizan las comprobaciones de seguridad y virus necesarias (puede tardar unos minutos).

Podrá utilizar los archivos una vez el estado cambie a "Validado".

Haga clic en el botón de actualización para comprobar el estado actual de los archivos, o haga clic en el botón para eliminar el archivo permanentemente.

Un archivo mostrará el estado "Rechazado" si no ha superado la comprobación de seguridad. Puede deberse a un virus o a que la extensión del archivo sea incorrecta, por ejemplo.

5.3.3 Integración

En su código, hace referencia a los archivos cargados mediante un código con la siguiente estructura: $$$TP RESOURCES URL$$$/[el nombre de su archivo].

6. Marcadores de posición

A continuación se muestra una lista completa de los marcadores de posición y su finalidad:

XML elements