Guía de Bienvenida Hosted Payment Page e-Comm
INDICE Contenido
Descripción del Producto Flujo de la transacción Comenzar la integración de Hosted Payment Page “Integración Básica” Campos Oligatorios Comenzar la integración de Hosted Payment Page “Integración !egreso a "!#” !eporting $PI Descripción del Producto
#a integración de Hosted Payment Page le permite reciir pagos a tra%&s de una página 'e segura (ue cumple con certi)cación PCI* Con este modelo de integración+ nunca se %e ni se administran los detalles del pago directamente+ por(ue dic,os detalles se ingresan en la página de pago segura de BanameHosted Payment Page se puede implementar a tra%&s de. • •
#ig,t o-. "n cuadro de diálogo sore el sitio del negocio Hosted Payment Page. Página de pago de Baname-*
/l negocio deerá elegir cuál de estas dos %istas (uiere utilizar al momento de (ue el tarjeta,aiente realice el pago* $ continuación podrá encontrar ejemplo de las pantallas de cada una de estas %istas. Ligt !o"
Hosted Payment Page
/-isten dos tipos de integración para Hosted Payment Page.
#lu$o de la transacción Integración B%sica
0* /l tarjeta,aiente ingresa al sitio del negocio y da clic1 en Pagar* 2* 3e redirecciona al tarjeta,aiente al sitio seguro de Baname- en donde ingresará los datos de la tarjeta para realizar la compra* 4sta página puede tener un ni%el ásico de personalización* 5* /l tarjeta,aiente se redirecciona al sitio seguro de autenticación de 6isa 76eri)ed y 6isa8 o 9asterCard 79asterCard 3ecure Code8 en donde se le pedirán algunos datos de con)rmación elegidos por cada emisor para identi)car al tarjeta,aiente* :* "na %ez realizado el pago Baname- mostrará el resultado de la transacción 7!ecio8+ en la página segura de Baname-* ;O<$. para otener status de la respuesta de la transacción+ se deen con)gurar “;oti)caciones” o ingresar al “9erc,ant $dministrator” Integración &'egreso a ('L)
0* /l tarjeta,aiente ingresa al sitio del negocio y da clic1 en pagar 2* 3e redirecciona al tarjeta,aiente al sitio seguro de Baname- en donde ingresará los datos de la tarjeta para realizar la compra* 4sta página puede tener un ni%el ásico de personalización* 5* /l tarjeta,aiente se redirecciona al sitio seguro de autenticación de 6isa 76eri)ed y 6isa8 o 9asterCard 79asterCard 3ecure Code8 en donde se le pedirán algunos datos de con)rmación elegidos por cada emisor para identi)car al tarjeta,aiente* :* "na %ez realizado el pago+ el tarjeta,aiente regresará a la página del negocio en donde &ste =ltimo mostrará el resultado de la transacción 7!ecio8*
Comen*ar la integración de Hosted Payment Page &Integración B%sica)
Para comenzar la integración usted deerá ingresar a la siguiente liga. ,ttps.>>secure*na*tnspayments*com>api>documentation>integration?uide lines>,ostedPaymentPage>integration9odelHostedC,ec1out*,tml en donde encontrará la documentación de Hosted Cec+out #e aparecerá la siguiente página en donde usted podrá %er los pasos para la integración
Para realizar esta integración dee seguir los siguientes 5 pasos.
0* Consulte el arc,i%o c,ec1out*js en los ser%idores del gate'ay* 2* #lame al m&todo C,ec1out*con)gure78+ usando un ojeto @3O; con las especi)caciones de pago+ con)guración de interAaz e interacción del usuario* 5* Inicie el proceso de pago llamando a uno de los siguientes m&todos. Para mostrar las páginas de interacción con el tarjeta,aiente de #ig,to-.
•
o
C,ec1out*s,o'#ig,to-78
Para mostrar las páginas de interacción con el tarjeta,aiente de Hosted Payment Page.
•
o
C,ec1out*s,o'PaymentPage78
Para la integración más sencilla puede incluir solamente los “campos oligatorios” los cuales se presentan en el siguiente ejemplo+ teniendo cuidado de modi)car los campos resaltados en amarillo con la inAormación relati%a a su negocio. ,tml ,ead script srcE,ttps.>>secure*na*tnspayments*com>c,ec1out>%ersion>2>c,ec1out* jsE
dataGerrorEerrorCallac1E
dataGcancelEcancelCallac1E
>script
script typeEte-t>ja%ascriptE
Aunction errorCallac17error8
console*log7@3O;*stringiAy7error88 J Aunction cancelCallac178 console*log7KPayment cancelledK8 J
C,ec1out*con)gure7 merc,ant. KyourLmerc,antLidK+ order. amount. Aunction78 >>Dynamic calculation oA amount return MN 2N J+ currency. K9;K+ description. KOrdered goodsK+ id. Kuni(ueLorderLidK J+ interaction. merc,ant. name. KQour merc,ant nameK+ address. line0. K2NN 3ample 3tK+ line2. K025: /-ample
J J J J8
>script
>,ead ody *** input typeEuttonE %alueEPay 'it, #ig,to-E onclic1EC,ec1out*s,o'#ig,to-78E > input typeEuttonE %alueEPay 'it, Payment PageE onclic1EC,ec1out*s,o'PaymentPage78E > *** >ody >,tml
Deerá dejar los campos marcados en gris si (uiere utilizar las páginas de interacción con el tarjeta,aiente de #ig,to- y deerá (uitar el campo resaltado en rojo*
/n caso (ue (uiera utilizar las páginas de interacción con el tarjeta,aiente de Hosted Payment Page deerá utilizar el campo marcado en gris y (uitar el marcado en rojo
Para camiar el nomre del otón (ue aparecerá en la página =nicamente deerá reemplazar EPay 'it, #ig,to-E o EPay 'it, Payment PageE* Por ejemplo.
input typeEuttonE %alueEPagarE onclic1EC,ec1out*s,o'#ig,to-78E >
input typeEuttonE %alueEPagarE onclic1EC,ec1out*s,o'PaymentPage78E >
Descripción Campos ,!ligatorios •
•
merc,ant. /s su n=mero de a)liación* amount. /l monto total del pedido+ (ue se muestra al tarjeta,aiente en la página de pago* 3i usted agrega cual(uier lRnea de detalles del artRculo o alguno de los montos del sutotal 7order*item$mount+ order*s,ipping$ndHandling$mount8 además de order*amount+ entonces el total del pedido dee ser igual a la suma de esos %alores* o
o
o
•
•
Dee ser un n=mero mayor a N #a longitud del campo dee ser mayor o igual a 0 pero menor o igual a 0:*
currency. #a moneda (ue el tarjeta,aiente eligió para el pago+ (ue dee e-presarse en el código alAa I3O :20 ej* "3D+ 9;* o
/ste campo es de te-to deen ser may=sculas $GT
o
#a longitud del campo dee ser igual a 5
description. /s una descripción corta del contenido del pedido (ue se muestra al tarjeta,aiente en la página de pago* o
o
•
/ste campo dee conAormarse por n=meros del NGS y “*” y representar un n=mero decimal %álido*
Puede contener cual(uier tipo de caracteres #a longitud del campo dee ser mayor o igual a 0 pero menor o igual a 02
Id. ;=mero de identi)cación de la transacción. o
order*id. "n identi)cador =nico para distinguir las órdenes creadas* /ste %alor dee ser =nico para cada orden* /s un %alor opcional*
o
o
•
#a longitud del campo dee ser mayor o igual a 0 pero menor o igual a :N
9erc,ant name. /l nomre de su negocio (ue se mostrará al tarjeta,aiente en la página de pago* o
o
•
Puede contener cual(uier tipo de carácter*
Puede contener cual(uier tipo de carácter #a longitud del campo dee ser mayor o igual a N pero menor o igual a :N
9erc,ant address. Dirección del negocio
"sted podrá elegir si (uiere solicitar o no la inAormación de Aacturación al tarjeta,aiente al momento de realizar el pago y podrá elegir entre los campos de la siguiente "!# para personalizar la página de pago. ,ttps.>>secure*na*tnspayments*com>api>documentation>apiDocumentati on>c,ec1out>%ersion>latest>Aunction>con)gure*,tmlU localeenL"3V-Lre(uestLinteraction Para mayor personalización de la página de pago+ en la (ue el negocio podrá agregar el logo 7=nicamente aparecerá en la integración (ue muestra la página de pago de Hosted Payment Page+ #ig,to- no muestra logo8+ dirección del negocio+ etc* /l negocio podrá utilizar el siguiente código para agregar estos elementos camiando =nicamente los campos marcados en amarillo con la inAormación de su negocio. C,ec1out*con)gure7 merc,ant . KyourLmerc,antLidK+ order
.
amount
. Aunction 78 >>Dynamic calculation oA amount
return MN 2N J+ currency . K9;K+ description. KOrdered goodsK+ id. Kuni(ueLorderLidK J+
illing
.
address. street city
. K025 Customer 3treetK+ . K9etropolisK+
postcodeTip . KSSSSSK+ statePro%ince. K;QK+ country
. K"3$K
J J+ interaction. merc,ant
.
name . KQour merc,ant nameK+ address. line0. K2NN 3ample 3tK+ line2. K025: /-ample
>image"!#K J+ locale t,eme
. KesL9K+ . KdeAaultK+
displayControl. illing$ddress . KOP
customer/mail . KOP
. K!/$DLO;#QK+
s,ipping$ddress . KHID/K J J J8
Para mayor inAormación consultar Personalizar la e-periencia de pago en la siguiente "!#.
,ttps.>>secure*na*tnspayments*com>api>documentation>integration?uide lines>,ostedPaymentPage>integration9odelHostedC,ec1out*,tml
3i usted opta por no regresar al tarjeta,aiente a su sitio+ se recomienda (ue+ antes de en%iar los productos o ser%icios al tarjeta,aiente+ utilice un m&todo alternati%o para asegurarse de (ue los datos del pedido+ en concreto el monto del pedido+ son correctos* Para este tipo de integración se recomienda (ue opte por el ser%icio de ;oti)caciones para poder reciir noti)caciones 7correo electrónico8 si el pago se realiza correctamente*
"na %ez (ue se completa el intento de pago+ puede regresar al tarjeta,aiente su página 'e y. Presentar su propia página de recio al tarjeta,aiente* $ctualizar su sistema de compras con los detalles del pago* Para este tipo de integración usted deerá utilizar los campos oligatorios de la integración ásica y seguir los siguientes pasos. • •
0* 3olicite una sesión mediante la operación Crear sesión de pago* #a solicitud dee incluir datos de pago y de interacción+ asR como instrucciones de t&rmino* $ continuación se muestra un Aragmento curl de ejemplo para la operación Crear sesión de pago* /n este paso tami&n deerá otener el $PI pass'ord 7deerá ingresarlo en el campo marcado en amarillo8+ para ello Aa%or de consultar la guRa de otención de $PI pass'ord*
curl ,ttps.>>secure*na*tnspayments*com>api>page>%ersion>2>pay Z Gd EapiOperationC!/$
/l motor de pago en%Ra el resultado del pago en el parámetro resultIndicator+ (ue. o
o
3e adjunta a la dirección "!# utilizada para regresar al tarjeta,aiente al sitio de la tienda* 3e proporciona como parámetros de entrada a la Aunción complete en la de%olución de llamada*
"sted puede determinar si el pago se realizó correctamente o no al comparar los parámetros resultIndicator y successIndicator* "na coincidencia indica (ue el pago se realizó correctamente* 5* 3i se realiza correctamente+ deerá presentar un recio de pago al tarjeta,aiente en el sitio del negocio y deerá actualizar su sistema con los detalles del pago* Puede recuperar estos datos mediante la operación !ecuperar pedido*
Para mayor inAormación sore esta integración Aa%or de consultar en la "!# en la sección de Otener el resultado del pago y !etorno del pagador al sitio de la tienda.
,ttps.>>secure*na*tnspayments*com>api>documentation>integration?uide lines>,ostedPaymentPage>integration9odelHostedC,ec1out*,tmlU localeesL9
Para crear su sesión de pago en ;6P consultar. ,ttps.>>secure*na*tnspayments*com>api>documentation>apiDocumentati on>n%p>%ersion>latest>operation>3ession^5a^2NCreate^2NC,ec1out ^2N3ession*,tmlUlocaleesL9
Para crear la sesión de pago en !/3< consultar. ,ttps.>>secure*na*tnspayments*com>api>documentation>apiDocumentati on>restGjson>%ersion>latest>operation>3ession^5a^2NCreate ^2NC,ec1out^2N3ession*,tmlUlocaleesL9
'eporting .PI
/l !eporting $PI oArece la posiilidad de programar y descargar reportes ajustados* Para la creación del !eporte $PI usted deerá crear una "!# integrada por los siguientes datos. ,ttps.>>secure*na*tnspayments*com>,istory>%ersion>0>merc,ant>SSSSSS S>transactionUtimeOA!ecord*start2N0:GN:G 25
•
•
•
ttps/00secure1na1tnspayments1com/ es la página de <;3 de
la (ue se otendrá el reporte+ esta página no dee camiarla* SSSSSSS. ;=mero de a)liación+ este lo deerá reemplazar por el n=mero de a)liación otorgado por Baname-* transactionUtimeOA!ecord*start2N0:GN:G 25>secure*na*tnspayments*com>api>documentation>apiDocum entation>restGjson>%ersion>latest>operation>
Cuando el código se encuentre armado y se realice la solicitud de inAormación solicitara contrasea y usuario. • •
;omre de usuario. merc,ant*deAault Contrasea. Deerá ingresar el $PI pass'ord otenido en 9erc,ant $dministrator para !eporting $PI* 3i tiene alguna duda de cómo otener este pass'ord Aa%or de consultar la ?uRa para la Con)guración de "suarios*
"na %ez ingresados los datos le aparecerá la siguiente pantalla en donde usted deerá elegir si (uiere $rir o ?uardar el arc,i%o
"sted podrá elegir el lugar donde (uiere guardar el arc,i%o (ue se descargará en Aormato C36 7estos arc,i%os se pueden arir en /-cel8 y aparecerán los campos y las Aec,as (ue eligió* Para mayor inAormación sore este reporte y su automatización Aa%or de ingresar a la siguiente "!#. ,ttps.>>secure*na*tnspayments*com>api>documentation>integration?uide lines>supportedFeatures>pic1$dditionalFunctionality>reporting>reporting $PI*,tmlUlocaleesL9
