Está en la página 1de 18

Gua de Bienvenida

Hosted Payment Page


e-Comm

INDICE
Contenido
Descripcin del Producto
Flujo de la transaccin
Comenzar la integracin de Hosted Payment Page Integracin Bsica
Campos Obligatorios
Comenzar la integracin de Hosted Payment Page Integracin Regreso
a URL
Reporting API
Descripcin del Producto
La integracin de Hosted Payment Page le permite recibir pagos a
travs de una pgina web segura que cumple con certificacin PCI. Con
este modelo de integracin, nunca se ve ni se administran los detalles
del pago directamente, porque dichos detalles se ingresan en la pgina
de pago segura de Banamex
Hosted Payment Page se puede implementar a travs de:

Light box: Un cuadro de dilogo sobre el sitio del negocio


Hosted Payment Page: Pgina de pago de Banamex.

El negocio deber elegir cul de estas dos vistas quiere utilizar al


momento de que el tarjetahabiente realice el pago.
A continuacin podr encontrar ejemplo de las pantallas de cada una
de estas vistas:
Light box

Hosted Payment Page

Existen dos tipos de integracin para Hosted Payment Page:

Flujo de la transaccin
Integracin Bsica

1. El tarjetahabiente ingresa al sitio del negocio y da click en Pagar.


2. Se redirecciona al tarjetahabiente al sitio seguro de Banamex en
donde ingresar los datos de la tarjeta para realizar la compra.
sta pgina puede tener un nivel bsico de personalizacin.
3. El tarjetahabiente se redirecciona al sitio seguro de autenticacin
de Visa (Verified by Visa) o MasterCard (MasterCard Secure Code)
en donde se le pedirn algunos datos de confirmacin elegidos
por cada emisor para identificar al tarjetahabiente.
4. Una vez realizado el pago Banamex mostrar el resultado de la
transaccin (Recibo), en la pgina segura de Banamex.
NOTA: para obtener status de la respuesta de la transaccin, se
deben configurar Notificaciones o ingresar al Merchant
Administrator
Integracin Regreso a URL

1. El tarjetahabiente ingresa al sitio del negocio y da click en pagar


2. Se redirecciona al tarjetahabiente al sitio seguro de Banamex en
donde ingresar los datos de la tarjeta para realizar la compra.
sta pgina puede tener un nivel bsico de personalizacin.
3. El tarjetahabiente se redirecciona al sitio seguro de autenticacin
de Visa (Verified by Visa) o MasterCard (MasterCard Secure Code)
en donde se le pedirn algunos datos de confirmacin elegidos
por cada emisor para identificar al tarjetahabiente.
4. Una vez realizado el pago, el tarjetahabiente regresar a la
pgina del negocio en donde ste ltimo mostrar el resultado de
la transaccin (Recibo).

Comenzar la integracin de Hosted Payment Page Integracin


Bsica
Para comenzar la integracin usted deber ingresar a la siguiente liga:
https://secure.na.tnspayments.com/api/documentation/integrationGuide
lines/hostedPaymentPage/integrationModelHostedCheckout.html
en
donde encontrar la documentacin de Hosted Checkout
Le aparecer la siguiente pgina en donde usted podr ver los pasos
para la integracin

Para realizar esta integracin debe seguir los siguientes 3 pasos:

1. Consulte el archivo checkout.js en los servidores del gateway.


2. Llame al mtodo Checkout.configure(), usando un objeto JSON
con las especificaciones de pago, configuracin de interfaz e
interaccin del usuario.
3. Inicie el proceso de pago llamando a uno de los siguientes
mtodos:

Para mostrar las pginas de interaccin con el


tarjetahabiente de Lightbox:
o Checkout.showLightbox()

Para mostrar las pginas de interaccin con el


tarjetahabiente de Hosted Payment Page:
o Checkout.showPaymentPage()

Para la integracin ms sencilla puede incluir solamente los campos


obligatorios los cuales se presentan en el siguiente ejemplo, teniendo
cuidado de modificar los campos resaltados en amarillo con la
informacin relativa a su negocio:
html>
<head>
<script
src="https://secure.na.tnspayments.com/checkout/version/27/checkout.
js">
data-error="errorCallback"
data-cancel="cancelCallback">
</script>

<script type="text/javascript">

function errorCallback(error) {
console.log(JSON.stringify(error));
}
function cancelCallback() {
console.log('Payment cancelled');
}

Checkout.configure({
merchant: '<your_merchant_id>',
order: {
amount: function() {
//Dynamic calculation of amount
return 80 + 20;
},
currency: 'MXN',
description: 'Ordered goods',
id: '<unique_order_id>'
},
interaction: {
merchant: {
name: 'Your merchant name',
address: {
line1: '200 Sample St',
line2: '1234 Example Town'

}
}
}
});
</script>
</head>
<body>
...
<input type="button" value="Pay with Lightbox"
onclick="Checkout.showLightbox();" />
<input type="button" value="Pay with Payment Page"
onclick="Checkout.showPaymentPage();" />
...
</body>
</html>

Deber dejar los campos marcados en gris si quiere utilizar las pginas
de interaccin con el tarjetahabiente de Lightbox y deber quitar el
campo resaltado en rojo.

En caso que quiera utilizar las pginas de interaccin con el


tarjetahabiente de Hosted Payment Page deber utilizar el campo
marcado en gris y quitar el marcado en rojo

Para cambiar el nombre del botn que aparecer en la pgina


nicamente deber reemplazar "Pay with Lightbox" o "Pay with
Payment Page". Por ejemplo:

<input type="button" value="Pagar"


onclick="Checkout.showLightbox();" />

<input type="button" value="Pagar"


onclick="Checkout.showPaymentPage();" />

Descripcin Campos Obligatorios

merchant: Es su nmero de afiliacin.

amount: El monto total del pedido, que se muestra al


tarjetahabiente en la pgina de pago. Si usted agrega cualquier
lnea de detalles del artculo o alguno de los montos del subtotal
(order.itemAmount, order.shippingAndHandlingAmount) adems
de order.amount, entonces el total del pedido debe ser igual a la
suma de esos valores.
o Este campo debe conformarse por nmeros del 0-9 y . y
representar un nmero decimal vlido.
o Debe ser un nmero mayor a 0
o La longitud del campo debe ser mayor o igual a 1 pero
menor o igual a 14.

currency: La moneda que el tarjetahabiente eligi para el pago,


que debe expresarse en el cdigo alfa ISO 4217 ej. USD, MXN.
o Este campo es de texto deben ser maysculas A-Z
o La longitud del campo debe ser igual a 3

description: Es una descripcin corta del contenido del pedido que


se muestra al tarjetahabiente en la pgina de pago.
o Puede contener cualquier tipo de caracteres
o La longitud del campo debe ser mayor o igual a 1 pero
menor o igual a 127

Id: Nmero de identificacin de la transaccin:


o order.id: Un identificador nico para distinguir las rdenes
creadas. Este valor debe ser nico para cada orden. Es un
valor opcional.

o Puede contener cualquier tipo de carcter.


o

La longitud del campo debe ser mayor o igual a 1 pero


menor o igual a 40

Merchant name: El nombre de su negocio que se mostrar al


tarjetahabiente en la pgina de pago.
o Puede contener cualquier tipo de carcter
o La longitud del campo debe ser mayor o igual a 0 pero
menor o igual a 40

Merchant address: Direccin del negocio

Usted podr elegir si quiere solicitar o no la informacin de facturacin


al tarjetahabiente al momento de realizar el pago y podr elegir entre
los campos de la siguiente URL para personalizar la pgina de pago:
https://secure.na.tnspayments.com/api/documentation/apiDocumentati
on/checkout/version/latest/function/configure.html?
locale=en_US#x_request_interaction
Para mayor personalizacin de la pgina de pago, en la que el negocio
podr agregar el logo (nicamente aparecer en la integracin que
muestra la pgina de pago de Hosted Payment Page, Lightbox no
muestra logo), direccin del negocio, etc. El negocio podr utilizar el
siguiente cdigo para agregar estos elementos cambiando nicamente
los campos marcados en amarillo con la informacin de su negocio:
Checkout.configure({
merchant : '<your_merchant_id>',
order

:{

amount

: function () { //Dynamic calculation of amount

return 80 + 20
},
currency : 'MXN',
description: 'Ordered goods',
id: '<unique_order_id>'
},

billing

:{

address: {
street
city

: '123 Customer Street',


: 'Metropolis',

postcodeZip : '99999',
stateProvince: 'NY',
country

: 'USA'

}
},
interaction: {
merchant

:{

name : 'Your merchant name',


address: {
line1: '200 Sample St',
line2: '1234 Example Town'
},
email : 'order@yourMerchantEmailAddress.com',
phone : '+1 123 456 789 012',
logo : 'https://imageURL'
},
locale
theme

: 'es_MX',
: 'default',

displayControl: {
billingAddress : 'OPTIONAL',

customerEmail : 'OPTIONAL',
orderSummary

: 'READ_ONLY',

shippingAddress : 'HIDE'
}
}
});

Para mayor informacin consultar Personalizar la experiencia de pago


en la siguiente URL:

https://secure.na.tnspayments.com/api/documentation/integrationGuide
lines/hostedPaymentPage/integrationModelHostedCheckout.html

Si usted opta por no regresar al tarjetahabiente a su sitio, se


recomienda que, antes de enviar los productos o servicios al
tarjetahabiente, utilice un mtodo alternativo para asegurarse de que
los datos del pedido, en concreto el monto del pedido, son correctos.
Para este tipo de integracin se recomienda que opte por el servicio de
Notificaciones para poder recibir notificaciones (correo electrnico) si el
pago se realiza correctamente. Tambin puede enviar notificaciones por
correo electrnico al tarjetahabiente como recibo del pago. Para
configurar las notificaciones va correo electrnico favor de consultar la
Gua de Notificaciones.
Comenzar la integracin de Hosted Payment Page Regreso a
URL
Una vez que se completa el intento de pago, puede regresar al
tarjetahabiente su pgina web y:
Presentar su propia pgina de recibo al tarjetahabiente.
Actualizar su sistema de compras con los detalles del pago.
Para este tipo de integracin usted deber utilizar los campos
obligatorios de la integracin bsica y seguir los siguientes pasos:

1. Solicite una sesin mediante la operacin Crear sesin de pago.


La solicitud debe incluir datos de pago y de interaccin, as como
instrucciones de trmino. A continuacin se muestra un
fragmento curl de ejemplo para la operacin Crear sesin de
pago. En este paso tambin deber obtener el API password
(deber ingresarlo en el campo marcado en amarillo), para ello
favor de consultar la gua de obtencin de API password.

curl https://secure.na.tnspayments.com/api/page/version/27/pay \
-d "apiOperation=CREATE_CHECKOUT_SESSION" \
-d "apiPassword=$PWD" \
-d "apiUsername=merchant.<your_merchant_id>" \
-d "merchant=<your_merchant_id>" \
-d "order.id=<unique_order_id>" \
-d "order.amount=100.00" \
-d "order.currency=MXN"
Una respuesta correcta a esta operacin contendr parmetros de
session.id y successIndicator. Guarde el valor devuelto en el
parmetro successIndicator en el sistema de la tienda para
verificar si el pago se realiz correctamente o no.
2. Incluya el session.id devuelto en la solicitud Checkout.configure()
a TNSPay.
Checkout.configure({
...
session: {
id: "SESSION000292090496253818604576"
},
...
});

El motor de pago enva el resultado del pago en el parmetro


resultIndicator, que:
o Se adjunta a la direccin URL utilizada para regresar al
tarjetahabiente al sitio de la tienda.
o Se proporciona como parmetros de entrada a la funcin
complete en la devolucin de llamada.
Usted puede determinar si el pago se realiz correctamente o no
al comparar los parmetros resultIndicator y successIndicator.
Una coincidencia indica que el pago se realiz correctamente.
3. Si se realiza correctamente, deber presentar un recibo de pago
al tarjetahabiente en el sitio del negocio y deber actualizar su
sistema con los detalles del pago. Puede recuperar estos datos
mediante la operacin Recuperar pedido.

Para mayor informacin sobre esta integracin favor de consultar en la


URL en la seccin de Obtener el resultado del pago y Retorno del
pagador al sitio de la tienda:

https://secure.na.tnspayments.com/api/documentation/integrationGuide
lines/hostedPaymentPage/integrationModelHostedCheckout.html?
locale=es_MX

Para
crear
su
sesin
de
pago
en
NVP
consultar:
https://secure.na.tnspayments.com/api/documentation/apiDocumentati
on/nvp/version/latest/operation/Session%3a%20Create%20Checkout
%20Session.html?locale=es_MX

Para
crear
la
sesin
de
pago
en
REST
consultar:
https://secure.na.tnspayments.com/api/documentation/apiDocumentati
on/rest-json/version/latest/operation/Session%3a%20Create
%20Checkout%20Session.html?locale=es_MX

Reporting API

El Reporting API ofrece la posibilidad de programar y descargar reportes


ajustados. Para la creacin del Reporte API usted deber crear una URL
integrada por los siguientes datos:
https://secure.na.tnspayments.com/history/version/1/merchant/999999
9/transaction?timeOfRecord.start=2014-0423T00:00:00&timeOfRecord.end=2014-06-24T00:00:00&csv.timeZone=
%2B10:00&csv.timeFormat=iso8601-T&columns=DATOS QUE NECESITA
CONTENGA EL REPORTE
Dnde:

https://secure.na.tnspayments.com: es la pgina de TNS de


la que se obtendr el reporte, esta pgina no debe cambiarla.
9999999: Nmero de afiliacin, este lo deber reemplazar por el
nmero de afiliacin otorgado por Banamex.
transaction?timeOfRecord.start=2014-0423T00:00:00&timeOfRecord.end=2014-0624T00:00:00&csv.timeZone=
%2B10:00&csv.timeFormat=iso8601: Se llena con el parmetro
de tiempo que se requerir el reporte, elemplo: 2014-0423T00:00:00 (De 23 de abril de 2014 a las 12am) a 204-0624T00:00:00 (Hasta el 24 de junio de 2014 a las 12am).
Datos que necesita contenga el reporte: Los campos disponibles
los
puede
encontrar
en
la
siguiente
liga:
https://secure.na.tnspayments.com/api/documentation/apiDocum
entation/rest-json/version/latest/operation/Transaction%3a
%20%20Retrieve%20Transaction.html?locale=es_MX.
Estos
campos deber ingresarlos tal cual aparecen en la liga, sin
espacios y separados nicamente por comas. Por ejemplo:
merchant,order.id,transaction.currency

Cuando el cdigo se encuentre armado y se realice la solicitud de


informacin solicitara contrasea y usuario:

Nombre de usuario: merchant.default


Contrasea: Deber ingresar el API password obtenido en
Merchant Administrator para Reporting API. Si tiene alguna duda
de cmo obtener este password favor de consultar la Gua para la
Configuracin de Usuarios.

Una vez ingresados los datos le aparecer la siguiente pantalla en


donde usted deber elegir si quiere Abrir o Guardar el archivo

Usted podr elegir el lugar donde quiere guardar el archivo que se


descargar en formato CSV (estos archivos se pueden abrir en Excel) y
aparecern los campos y las fechas que eligi.
Para mayor informacin sobre este reporte y su automatizacin favor de
ingresar a la siguiente URL:
https://secure.na.tnspayments.com/api/documentation/integrationGuide
lines/supportedFeatures/pickAdditionalFunctionality/reporting/reporting
API.html?locale=es_MX