# Librería Js
## 1. Introducción
¿Qué es AtixPaymentGateway.js?
AtixPaymentGateway.js es una librería Javascript diseñada para facilitar la creación una url que tiene como destino un formulario de pago para tarjetas de crédito y débito desde una página web sin la necesidad que la información sensible pase por el servidor origen (El servidor del comercio). De esta manera no tendrá que preocuparse por la seguridad de los datos y el pago, de eso se encarga PaymentGateway.js
## 2. Integración
Para iniciar la integración debe agregar la librería AtixPaymentGateway.js a su página web
### Ambiente Sandbox
```html
```
### Ambiente Producción
```html
```
## 3. Botón de Pago
El botón de pago es la manera más fácil de integrar el módulo de pago en su web, con una simple instrucción agrega al botón "Pagar" de tu página web una llamada a nuestro formulario de pago y obtén seguridad y confianza en las transacciones. A continuación se muestra la instrucción Javascript que debes implementar.
```javascript
$("#Button1").click(function () {
$.fn.GBCPE_PaymentGateway.setup.Apikey = 'YOUR_PUBLIC_API_KEY'; //Llave creada al momento de la afilicaión
$.fn.GBCPE_PaymentGateway.setup.Email = 'EMAIL_USER'; //Valor opcional
$.fn.GBCPE_PaymentGateway.setup.Currency = 'CURRENCY'; // Tipo de moneda, dependende de la moneda con la que se ha creado su cuenta
$.fn.GBCPE_PaymentGateway.setup.Totalamount = 'AMOUNT_TRANSACTION'; //Monto total de compra
$.fn.GBCPE_PaymentGateway.setup.Reference = 'REFERENCE_TRANSACTION UNIQUE'; //Número de referencia del comercio relacionado a la orden
$.fn.GBCPE_PaymentGateway.setup.Reference2 = 'REFERENCE2_TRANSACTION';
//Valor opcional para enviar datos dinamicamente
$.fn.GBCPE_PaymentGateway.setup.JsonData = JSON.stringify({ campo1: "campo1", campo2: "campo2", campo3: "campo3", campo4: "campo4",
campo5: "campo5", campo6: "campo6", campo7: "campo7", campo8: "campo8", campo9: "campo9", campo10: "campo10" });
$.fn.GBCPE_PaymentGateway(function (Result) {
var error = Result[0].Error;
var Url = Result[0].Url;
var Token = Result[0].Token;
window.location.replace(Url);
});
});
```
Cuando el resultado de la petición es satisfactoria la función regresara dos valores:\
1\) `Result[0].Url`, este valor indica la url donde se encuentra el formulario de pago, el cual ya contiene un token único por cada transacción solicitada.\
2\)`Result[0].Token` otorga únicamente el token de la transacción, si lo desea puede almacenarlo para llevar control.
Si la petición realizada contiene errores estos estarán contenidos en el valor `Result[0].Error`, de lo contrario estará en blanco.
Los datos que necesita para realizar la petición de pago los puede encontrar en el módulo de "Mi cuenta"
* `PUBLIC_API_KEY`
* `VERSION_LIBRARY`
* `CURRENCY`
el resto de los datos son propios de la transacción que desea procesar.
Los casos de error que podrían presentarse son los siguientes:
* `Currency is Empty`
* `Total Amount is Empty`
* `Invalid Total Amount`
* `Reference is Empty`
## 4. **Botón continuar formulario**
Se detallan cada uno de los campos que se deben enviar para procesar el pago.
Dentro de nuestro formulario existe un botón llamado "Continuar", este puede ser configurado para que realice una redirección a su página web dependiendo del resultado de la transacción
Para realizar la configuración del redireccionamiento debe ingresar al módulo de Configuración/Formulario y podrá colocar url independientes para realizar la redirección según el resultado de la transacción "Aprobada" o "Rechazada".
Un ejemplo sencillo de la url que podría configurar para el caso de aprobación sería `https://www.mistore.com/success`
Si desea que el token de la transacción se mantenga como variable GET dentro de su url para que luego pueda hacer un Request de ella, en la configuración de las url del resultado de la transacción puede colocar cualquier variable con el valor {{{tokenid}}} de esta manera el sistema se encargará de reemplazar la etiqueta por su token.
Ejemplo: `https://www.mistore.com/success?var={{{tokenid}}}`
## 5. **Obtener resultado de la transacción**
Para obtener el resultado de la transacción debe utilizar una función de nuestra librería PaymentGateway.js llamada GBCPE\_PaymentGatewayResult. Para realizar la petición debe colocar la siguiente instrucción.
Únicamente debe enviar en la función GBCPE\_PaymentGatewayResult el parámetro `Token`, este valor es el mismo otorgado en la petición de pago en la función GBCPE\_PaymentGateway
Cuando el resultado de la petición es satisfactoria otogará dos valores:\
1\) `Result[0].ReferenceCode;`,indica el valor único por transacción; se puede utilizar como identificador.\
2\) `Result[0].ResultCode` otorga el estatus de la transacción, si fue aprobada o rechazada, cuando la transacciones es aprobada el valor será `00`, de lo contrario será `-99`. El valor `Result[0].TotalAmount` indica el monto realmente pagado, de manera que se pueda validar que la orden generada por la página web corresponda con el monto pagado.
```javascript
$.fn.GBCPE_PaymentGatewayResult.setup.Token ='TOKEN_RESULT'; // Setea el token_result en la función
$.fn.GBCPE_PaymentGatewayResult(function (Result) {
var ReferenceCode = Result[0].ReferenceCode;
var ResultCode = Result[0].ResultCode;
var TotalAmount = Result[0].TotalAmount;
var error = Result[0].Error;
});
```
**Nota:** si la transacción es aprobada el ResultCode será “00”. Cualquier otro valor el resultado es rechazado
## 6. **Data de prueba**
#### Caso exitoso
| Número | Mes/año | CVV | Código de respuesta |
|---|
| 4242 4242 4242 4242 | 10/2028 | 999 | 00 |
#### Caso denegado
| Número | Mes/año | CVV | Código de respuesta |
|---|
| 5431 1111 1111 1111 | 10/2028 | 999 | -99 |
#### Caso exitoso 3DS
| Número | Mes/año | CVV | Código de respuesta |
|---|
| 4918 9141 0719 5005 | 10/2028 | 999 | 00 |