Guia para La Integracion

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
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
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:
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:
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.
...
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:
lines/hostedPaymentPage/integrationModelHostedCheckout.html?
locale=es_MX
Para
crear
su
sesin
de
pago
en
NVP
consultar:
on/nvp/version/latest/operation/Session%3a%20Create%20Checkout
%20Session.html?locale=es_MX
Para
crear
la
sesin
de
pago
en
REST
consultar:
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:
lines/supportedFeatures/pickAdditionalFunctionality/reporting/reporting
API.html?locale=es_MX

Guia para La Integracion

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Guia para La Integracion

Uploaded by

Copyright:

Available Formats

Gua de Bienvenida

Hosted Payment Page

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

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

Hosted Payment Page

Existen dos tipos de integracin para Hosted Payment Page:

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

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

Comenzar la integracin de Hosted Payment Page Integracin

Para realizar esta integracin debe seguir los siguientes 3 pasos:

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

Para mostrar las pginas de interaccin con el

Para mostrar las pginas de interaccin con el

Para la integracin ms sencilla puede incluir solamente los campos

En caso que quiera utilizar las pginas de interaccin con el

Para cambiar el nombre del botn que aparecer en la pgina

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

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

Descripcin Campos Obligatorios

merchant: Es su nmero de afiliacin.

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

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

description: Es una descripcin corta del contenido del pedido que

Id: Nmero de identificacin de la transaccin:

o Puede contener cualquier tipo de carcter.

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

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

Merchant address: Direccin del negocio

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

: function () { //Dynamic calculation of amount

: '123 Customer Street',

name : 'Your merchant name',

Para mayor informacin consultar Personalizar la experiencia de pago

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

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

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

Para mayor informacin sobre esta integracin favor de consultar en la

El Reporting API ofrece la posibilidad de programar y descargar reportes

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

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

Nombre de usuario: merchant.default

Una vez ingresados los datos le aparecer la siguiente pantalla en

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

You might also like