### Installation
Source: https://github.com/globalpayredeban/globalpayredeban.js/blob/master/README.md
Instructions on how to include the necessary jQuery, JS, and CSS files for the GlobalPay Redeban library in your web page.
```APIDOC
## Installation
First, you need to include jQuery and the `payment_[version].min.js` and `payment_[version].min.css` files within your web page, specifying "UTF-8" as the charset.
```html
```
```
--------------------------------
### Initialize and Use Click Pay Redeban Checkout Modal (JavaScript)
Source: https://github.com/globalpayredeban/globalpayredeban.js/wiki/Checkout-de-Click-Pay-Redeban
This snippet demonstrates how to initialize the Click Pay Redeban checkout modal using JavaScript. It includes configuration options for environment mode, callbacks for modal open, close, and response events. The example also shows how to trigger the modal to open with a payment reference and how to close it when the browser's back button is used.
```html
Example | Payment Checkout Js
```
--------------------------------
### Create and Get Card Object from Payment Form
Source: https://github.com/globalpayredeban/globalpayredeban.js/blob/master/README.md
This code demonstrates how to create a basic credit card input form using a div with the class 'payment-form'. It also shows how to retrieve the 'Card' object from the form instance. If the card data is invalid, the returned object will be null, and error states will be displayed.
```html
```
```javascript
let myCard = $('#my-card');
let cardToSave = myCard.PaymentForm('card');
if(cardToSave == null){
alert("Invalid Card Data");
}
```
--------------------------------
### Get Session ID for Antifraud - JavaScript
Source: https://github.com/globalpayredeban/globalpayredeban.js/blob/master/README.md
Retrieves the session ID using the Payment.getSessionId() method. This ID is crucial for GlobalPay Redeban's antifraud measures and should be collected to capture user device information. The obtained session ID can then be sent to your server for processing user charges.
```javascript
let session_id = Payment.getSessionId();
```
--------------------------------
### Get Card Type - JavaScript
Source: https://github.com/globalpayredeban/globalpayredeban.js/blob/master/README.md
The `cardType` function returns a string representing the detected card type based on the entered card number. If the card type cannot be determined, an empty string is returned. Refer to the GlobalPay developer documentation for allowed card brands.
```javascript
$"#my-card").PaymentForm('cardType')
```
--------------------------------
### Manually Insert PaymentForm Fields - HTML
Source: https://github.com/globalpayredeban/globalpayredeban.js/blob/master/README.md
Allows for manual alteration of PaymentForm fields to add custom classes, placeholders, or IDs. This is useful for internationalizing the form (default is Spanish) or referencing specific inputs by name or ID. The example demonstrates adding a custom class to the card number input and setting a custom ID for the cardholder's name.
```html
```
--------------------------------
### Library Initialization
Source: https://github.com/globalpayredeban/globalpayredeban.js/blob/master/README.md
Instructions on how to initialize the GlobalPay Redeban JS library with environment mode, client application code, and key.
```APIDOC
## Library Init
Always initialize the library.
```javascript
/**
* Init library
*
* @param env_mode `prod`, `stg`, `local` to change environment. Defaults to `stg`
* @param client_app_code provided by GlobalPay Redeban.
* @param client_app_key provided by GlobalPay Redeban.
*/
Payment.init('stg', 'CLIENT_APP_CODE', 'CLIENT_APP_KEY');
```
```
--------------------------------
### Initialize and Use GlobalPay Redeban Checkout Modal (HTML/JavaScript)
Source: https://context7.com/globalpayredeban/globalpayredeban.js/llms.txt
This snippet demonstrates how to initialize and use the GlobalPay Redeban Checkout Modal. It includes setting up the modal with environment mode and callback functions for opening, closing, and handling responses. The code also shows how to trigger the modal via a button click and handle browser back navigation.
```html
```
--------------------------------
### Initialize GlobalPay Redeban Library
Source: https://context7.com/globalpayredeban/globalpayredeban.js/llms.txt
Initializes the GlobalPay Redeban library with the merchant's credentials and the execution environment. This method must be called before any other library operations. Available environments include 'prod' for production, 'stg' for staging/testing, and 'local' for local development.
```javascript
/**
* Inicializar la biblioteca GlobalPay Redeban
* @param {string} env_mode - Ambiente: 'prod', 'stg', 'dev', 'local'
* @param {string} client_app_code - Código de aplicación proporcionado por GlobalPay Redeban
* @param {string} client_app_key - Llave de aplicación proporcionada por GlobalPay Redeban
*/
Payment.init('stg', 'TU_CLIENT_APP_CODE', 'TU_CLIENT_APP_KEY');
// Para producción:
Payment.init('prod', 'TU_CLIENT_APP_CODE', 'TU_CLIENT_APP_KEY');
```
--------------------------------
### Initialize GlobalPay Redeban JS Library
Source: https://github.com/globalpayredeban/globalpayredeban.js/blob/master/README.md
Initializes the GlobalPay Redeban JS library. You need to provide the environment mode ('prod', 'stg', 'local'), your client application code, and your client application key obtained from GlobalPay Redeban. The default environment mode is 'stg'.
```javascript
/**
* Init library
*
* @param env_mode `prod`, `stg`, `local` para cambiar ambiente. Por defecto es `stg`
* @param client_app_code proporcionado por GlobalPay Redeban.
* @param client_app_key proporcionado por GlobalPay Redeban.
*/
Payment.init('stg', 'CLIENT_APP_CODE', 'CLIENT_APP_KEY');
```
--------------------------------
### PaymentCheckout.open Method
Source: https://github.com/globalpayredeban/globalpayredeban.js/wiki/Checkout-de-Click-Pay-Redeban
Guidance on using the `PaymentCheckout.open` method to initiate the payment checkout process, including parameter requirements and best practices.
```APIDOC
## PaymentCheckout.open Method
### Description
Initiates the payment checkout process. It requires a transaction reference generated prior to calling this method.
### Method
`PaymentCheckout.open(reference)`
### Parameters
#### Path Parameters
None
#### Query Parameters
None
#### Request Body
None
#### Parameters Table
| Parametro | Requerido | Descripcion |
|-------------|-----------|------------------------------------------------------------------------------------------------------------------------|
| reference | sí | Reference transaction. This reference is obtained by calling the init transaction service. |
### Request Example
```javascript
// Assuming 'transactionReference' has been obtained from the init transaction service
paymentCheckout.open(transactionReference);
```
### Response
This method typically opens a modal or redirects the user. Direct response details are not provided here, but refer to the transaction response section for outcomes.
### Related Information
- **Generate Reference**: Before invoking checkout, a reference must be generated with payment data. See [https://developers.redeban.com/api/#metodos-de-pago-tarjetas-inicializar-una-referencia](https://developers.redeban.com/api/#metodos-de-pago-tarjetas-inicializar-una-referencia)
### Best Practices
- **Avoid Blocking Checkout**: Call `paymentCheckout.open` when the user clicks an element on the page, not within a callback. This signals explicit user intent to the browser, preventing pop-up blockers.
- **HTTPS Requirement**: Ensure the page containing the payment form is served over HTTPS (`https://`).
- **Browser Compatibility**: Checkout supports recent versions of major browsers. Outdated browsers without security updates are not supported.
```
--------------------------------
### Initialize and Open GlobalPay Redeban Checkout (HTML/JavaScript)
Source: https://github.com/globalpayredeban/globalpayredeban.js/wiki/GlobalPay-Redeban-Checkout
This snippet demonstrates how to initialize the GlobalPay Redeban modal checkout and open it in response to a button click. It includes configuration for environment mode, callbacks for modal events (open, close, response), and how to handle the transaction response. The `payment_checkout_3.1.0.min.js` script is loaded from a CDN.
```html
Example | Payment Checkout Js
```
--------------------------------
### GlobalPay Redeban JS - Initialization
Source: https://context7.com/globalpayredeban/globalpayredeban.js/llms.txt
Initializes the GlobalPay Redeban JS library with merchant credentials and the execution environment. This must be called before any other library operations.
```APIDOC
## Payment.init()
### Description
Initializes the GlobalPay Redeban library with merchant credentials and the execution environment. This method must be called before any other library operations. Available environments are `prod` for production, `stg` for staging/testing, and `local` for local development.
### Method
`Payment.init(env_mode, client_app_code, client_app_key)`
### Parameters
#### Path Parameters
None
#### Query Parameters
None
#### Request Body
None
### Request Example
```javascript
// For staging/testing:
Payment.init('stg', 'TU_CLIENT_APP_CODE', 'TU_CLIENT_APP_KEY');
// For production:
Payment.init('prod', 'TU_CLIENT_APP_CODE', 'TU_CLIENT_APP_KEY');
```
### Response
#### Success Response (200)
No explicit response, initialization is synchronous.
#### Response Example
None
```
--------------------------------
### Include GlobalPay Redeban JS and Dependencies
Source: https://context7.com/globalpayredeban/globalpayredeban.js/llms.txt
This section shows how to include the necessary CSS and JavaScript files for the GlobalPay Redeban library, along with jQuery, in your HTML page. These are required for the library to function correctly.
```html
```
--------------------------------
### Create and Use PaymentForm for Card Input
Source: https://context7.com/globalpayredeban/globalpayredeban.js/llms.txt
Demonstrates how to create a card input form using the PaymentForm component. This component automatically handles real-time validation, card type detection, and formatting. It shows basic and advanced configurations, including capturing additional user information and restricting card types.
```html
```
```javascript
```
--------------------------------
### Include Payment Library and CSS
Source: https://github.com/globalpayredeban/globalpayredeban.js/blob/master/README.md
This snippet shows how to include the necessary jQuery, payment JavaScript file, and CSS file in your HTML. Ensure UTF-8 charset is specified. These are required for the GlobalPay Redeban JS library to function.
```html
```
--------------------------------
### PaymentForm Functions
Source: https://github.com/globalpayredeban/globalpayredeban.js/blob/master/README.md
This section describes how to call functions on the PaymentForm object and lists the available functions with their descriptions.
```APIDOC
## PaymentForm Functions
### Description
This section describes how to call functions on the PaymentForm object and lists the available functions with their descriptions.
### Method
JavaScript (Client-side)
### Endpoint
N/A (Client-side JavaScript library)
### Parameters
N/A
### Request Example
```javascript
$("#my-card").PaymentForm("functionName");
```
### Response
N/A (Function return values vary)
## Available Functions
### `card()`
#### Description
Obtiene la tarjeta del objeto.
### `cardType()`
#### Description
Obtiene el tipo de tarjeta que se capturó. La función `cardType` devolverá una cadena según el número de tarjeta ingresado. Si no se puede determinar el tipo de tarjeta, se le dará una cadena vacía.
[Marcas permitidas](https://developers.globalpay.com.co/api/#metodos-de-pago-tarjetas-marcas-de-tarjetas)
### `name()`
#### Description
Obtiene el nombre capturado.
### `expiryMonth()`
#### Description
Obtiene el mes de expiración de la tarjeta.
### `expiryYear()`
#### Description
Obtiene el año de expiración de la tarjeta.
### `fiscalNumber()`
#### Description
Obtiene el número fiscal del usuario / cédula.
```
--------------------------------
### GlobalPay Redeban Form Usage
Source: https://github.com/globalpayredeban/globalpayredeban.js/blob/master/README.md
Details on how to use the `payment-form` class to automatically convert elements into a basic credit card input form and retrieve the Card object.
```APIDOC
## Using the GlobalPay Redeban Form
Any element with the class `payment-form` will be automatically converted into a basic credit card input with expiration date and CVC check.
The easiest way to get started with the GlobalPayRedebanForm is by inserting the following code snippet:
```html
```
To get the `Card` object from the `PaymentForm` instance, query the form for its card.
```javascript
let myCard = $("#my-card");
let cardToSave = myCard.PaymentForm('card');
if(cardToSave == null){
alert("Invalid Card Data");
}
```
If the returned card (`Card`) is null, the error state will display the fields that need to be fixed. Once you obtain a non-null card object (`Card`) from the widget, you can call [addCard](#addcard-agregar-una-tarjeta).
```
--------------------------------
### addCard - Add a Card
Source: https://github.com/globalpayredeban/globalpayredeban.js/blob/master/README.md
Details on the `addCard` function, which tokenizes sensitive card data for secure transmission to your server, enabling payments for merchants without PCI certification.
```APIDOC
## addCard - Add a Card
The `addCard` function converts sensitive card data into a token that can be securely passed to your server to charge the user.
This functionality consumes our API service but in a secure manner for merchants who do not have PCI certification.
[Here](https://developers.globalpay.com.co/api/#metodos-de-pago-tarjetas-agregar-una-tarjeta) you can find the description of each field in the response.
```javascript
/*
* @param uid User identifier. This is the id you use on your application's side.
* @param email User's email to initiate the purchase. Use a valid email format.
* @param card The card to be tokenized.
* @param success_callback Functionality to execute when the gateway service responds correctly. (Even if a status other than "valid" is received)
* @param failure_callback Functionality to execute when the gateway service responds with an error.
* @param payment_form Payment form instance
*/
Payment.addCard(uid, email, cardToSave, successHandler, errorHandler, myCard);
let successHandler = function(cardResponse) {
console.log(cardResponse.card);
if(cardResponse.card.status === 'valid'){
$("#messages").html('Card successfully added '+
'Status: ' + cardResponse.card.status + ' ' +
"Token: " + cardResponse.card.token + " " +
"Transaction reference: " + cardResponse.card.transaction_reference
);
}else if(cardResponse.card.status === 'review'){
$("#messages").html('Card under review '+
'Status: ' + cardResponse.card.status + ' ' +
"Token: " + cardResponse.card.token + " " +
"Transaction reference: " + cardResponse.card.transaction_reference
);
}else{
$("#messages").html('Error '+
'Status: ' + cardResponse.card.status + ' ' +
"Message: " + cardResponse.card.message + " "
);
}
submitButton.removeAttr("disabled");
submitButton.text(submitInitialText);
};
let errorHandler = function(err) {
console.log(err.error);
$("#messages").html(err.error.type);
submitButton.removeAttr("disabled");
submitButton.text(submitInitialText);
};
```
The third argument for `addCard` is a Card object containing the required fields to perform tokenization.
```
--------------------------------
### Embedded Payment Form Integration with GlobalPay Redeban (HTML/JavaScript)
Source: https://context7.com/globalpayredeban/globalpayredeban.js/llms.txt
This HTML and JavaScript code demonstrates a full integration of the GlobalPay Redeban embedded payment form. It includes initialization of the SDK, form submission handling, card tokenization, and processing of success and error responses. It also features basic styling for the payment panel and messages.
```html
Ejemplo Completo | GlobalPay Redeban
Agregar Tarjeta
```
--------------------------------
### Configure PaymentForm with HTML Data Attributes
Source: https://context7.com/globalpayredeban/globalpayredeban.js/llms.txt
Customize the PaymentForm's behavior and appearance using HTML data-* attributes. These attributes control visible fields, icon colors, accepted card types, and default country. They allow for a tailored user experience without direct JavaScript manipulation for basic settings.
```html
data-capture-email="true"
data-capture-cellphone="true"
data-icon-colour="#569B29"
data-use-dropdowns="true"
data-default-country="COL"
data-exclusive-types="vi,mc"
data-invalid-card-type-message="Solo aceptamos Visa y MasterCard">
```
--------------------------------
### Add Card (Tokenize Card Data)
Source: https://github.com/globalpayredeban/globalpayredeban.js/blob/master/README.md
The `addCard` function securely converts sensitive card details into a token, which can be safely sent to your server for processing payments. This is suitable for merchants without PCI certification. It requires a user ID, user email, the card object obtained from the form, success and error callback functions, and the payment form instance.
```javascript
/*
* @param uid Identificador del usuario. Este es el id que usas del lado de tu aplicativo.
* @param email Email del usuario para iniciar la compra. Usar el formato válido para e-mail.
* @param card La tarjeta que se desea tokenizar.
* @param success_callback Funcionalidad a ejecutar cuando el servicio de la pasarela responde correctamente. (Incluso si se recibe un estado diferente a "valid")
* @param failure_callback Funcionalidad a ejecutar cuando el servicio de la pasarela responde con un error.
* @param payment_form Instancia del formulario de Pago
*/
Payment.addCard(uid, email, cardToSave, successHandler, errorHandler, myCard);
let successHandler = function(cardResponse) {
console.log(cardResponse.card);
if(cardResponse.card.status === 'valid'){
$('#messages').html('Tarjeta correctamente agregada '+
'Estado: ' + cardResponse.card.status + ' ' +
"Token: " + cardResponse.card.token + " " +
"Referencia de transacción: " + cardResponse.card.transaction_reference
);
}else if(cardResponse.card.status === 'review'){
$('#messages').html('Tarjeta en revisión '+
'Estado: ' + cardResponse.card.status + ' ' +
"Token: " + cardResponse.card.token + " " +
"Referencia de transacción: " + cardResponse.card.transaction_reference
);
}else{
$('#messages').html('Error '+
'Estado: ' + cardResponse.card.status + ' ' +
"Mensaje: " + cardResponse.card.message + " "
);
}
submitButton.removeAttr("disabled");
submitButton.text(submitInitialText);
};
let errorHandler = function(err) {
console.log(err.error);
$('#messages').html(err.error.type);
submitButton.removeAttr("disabled");
submitButton.text(submitInitialText);
};
// The third argument to addCard is a Card object containing the required fields for tokenization.
```
--------------------------------
### Payment Transaction Responses
Source: https://github.com/globalpayredeban/globalpayredeban.js/wiki/Checkout-de-Click-Pay-Redeban
This section details the expected response objects for payment transactions, both for successful completions and error scenarios.
```APIDOC
## Payment Transaction Responses
### Description
Details the JSON response structure for payment transactions, indicating success or failure.
### Success Response
Returned when the user successfully completes the payment flow.
#### Response Body
- **transaction** (object) - Contains transaction details.
- **status** (string) - The status of the transaction (e.g., "success").
- **id** (string) - The transaction ID from the gateway.
- **status_detail** (integer) - A code for more detailed status information. See [https://developers.redeban.com/api/#detalle-de-los-estados](https://developers.redeban.com/api/#detalle-de-los-estados) for details.
#### Response Example
```json
{
"transaction": {
"status": "success",
"id": "RB-1011",
"status_detail": 3
}
}
```
### Error Response
Returned when an error occurs during the payment process.
#### Response Body
- **error** (object) - Contains error details.
- **type** (string) - The type of error (e.g., "Server Error").
- **help** (string) - Suggested action for the user (e.g., "Try Again Later").
- **description** (string) - A human-readable description of the error.
#### Response Example
```json
{
"error": {
"type": "Server Error",
"help": "Try Again Later",
"description": "Sorry, there was a problem loading Checkout."
}
}
```
```
--------------------------------
### Configure PaymentForm Fields and Appearance - HTML
Source: https://github.com/globalpayredeban/globalpayredeban.js/blob/master/README.md
Enables selection of fields to be displayed in the PaymentForm and customization of its appearance. Attributes like 'data-capture-name', 'data-capture-email', 'data-capture-cellphone', 'data-icon-colour', and 'data-use-dropdowns' control which data is captured and how icons are displayed. The 'data-use-dropdowns' attribute can resolve expiration date mask issues on older mobile devices.
```html
```
--------------------------------
### GlobalPay Redeban JS - PaymentForm
Source: https://context7.com/globalpayredeban/globalpayredeban.js/llms.txt
The PaymentForm component automatically creates a credit card input form with real-time validation, card type detection, and automatic formatting. Any element with the class `payment-form` will be converted into a card capture form.
```APIDOC
## PaymentForm - Card Input
### Description
The PaymentForm component automatically generates a credit card input form. It includes real-time validation, automatic card type detection, and formatting. Elements with the class `payment-form` are transformed into interactive card capture forms.
### Method
`$('#element-id').PaymentForm('card')`
### Endpoint
N/A (Client-side JavaScript component)
### Parameters
#### Path Parameters
None
#### Query Parameters
None
#### Request Body
None
### HTML Configuration Examples
```html
```
### Request Example (JavaScript)
```javascript
$(function() {
// Get the Card object from the form
let myCard = $('#my-card');
let cardToSave = myCard.PaymentForm('card');
if (cardToSave == null) {
console.log("Invalid card data");
} else {
console.log("Valid card:", cardToSave);
// Structure of the cardToSave object:
// {
// "card": {
// "number": "4111111111111111",
// "holder_name": "Juan Perez",
// "expiry_month": 12,
// "expiry_year": 2025,
// "cvc": "123",
// "type": "vi"
// }
// }
}
});
```
### Response
#### Success Response (200)
Returns a `cardToSave` object containing the tokenized card details if the input is valid. Returns `null` if the card data is invalid.
#### Response Example
```json
{
"card": {
"number": "4111111111111111",
"holder_name": "Juan Perez",
"expiry_month": 12,
"expiry_year": 2025,
"cvc": "123",
"type": "vi"
}
}
```
```
--------------------------------
### Add Card with Payment.addCard() in JavaScript
Source: https://context7.com/globalpayredeban/globalpayredeban.js/llms.txt
Converts sensitive card data into a secure token using GlobalPay Redeban's tokenization API. This function ensures card details never reach the merchant's server, adhering to PCI compliance. It requires user ID, email, card object, and callback functions for success and error handling.
```javascript
$(function() {
Payment.init('stg', 'TU_CLIENT_APP_CODE', 'TU_CLIENT_APP_KEY');
let myCard = $('#my-card');
let form = $("#add-card-form");
let submitButton = form.find("button");
$("#add-card-form").submit(function(e) {
e.preventDefault();
let cardToSave = myCard.PaymentForm('card');
if (cardToSave == null) {
$('#messages').text("Datos de tarjeta inválidos");
return;
}
submitButton.attr("disabled", "disabled").text("Procesando...");
let uid = "user_12345"; // ID único del usuario en tu sistema
let email = "usuario@ejemplo.com"; // Email del usuario
/**
* @param {string} uid - Identificador del usuario en tu aplicación
* @param {string} email - Email del usuario (formato válido)
* @param {object} card - Objeto Card obtenido del PaymentForm
* @param {function} success_callback - Callback para respuesta exitosa
* @param {function} failure_callback - Callback para errores
* @param {object} payment_form - Instancia del PaymentForm (opcional)
*/
Payment.addCard(uid, email, cardToSave, successHandler, errorHandler, myCard);
});
let successHandler = function(cardResponse) {
console.log('Respuesta:', cardResponse);
if (cardResponse.card.status === 'valid') {
// Tarjeta agregada exitosamente
console.log('Token:', cardResponse.card.token);
console.log('Referencia:', cardResponse.card.transaction_reference);
$('#messages').html(
'Tarjeta agregada correctamente ' +
'Estado: ' + cardResponse.card.status + ' ' +
'Token: ' + cardResponse.card.token + ' ' +
'Referencia: ' + cardResponse.card.transaction_reference
);
} else if (cardResponse.card.status === 'review') {
// Tarjeta requiere verificación adicional
$('#messages').html(
'Tarjeta en revisión ' +
'Estado: ' + cardResponse.card.status + ' ' +
'Token: ' + cardResponse.card.token
);
} else {
// Error en la tarjeta
$('#messages').html(
'Error: ' + cardResponse.card.message
);
}
submitButton.removeAttr("disabled").text("Guardar");
};
let errorHandler = function(err) {
console.error('Error:', err.error);
$('#messages').html('Error: ' + err.error.type + ' - ' + err.error.description);
submitButton.removeAttr("disabled").text("Guardar");
};
});
```
--------------------------------
### Verify Transaction with Payment.verifyTransaction() in JavaScript
Source: https://context7.com/globalpayredeban/globalpayredeban.js/llms.txt
Verifies a pending transaction using a verification code. This function is used when a card requires additional verification (status `pending`) after being added. It requires user ID, transaction ID, verification type, the verification value, and callback functions for success and error.
```javascript
/**
* Verificar una transacción pendiente
* @param {string} user_id - ID del usuario
* @param {string} transaction_id - ID de la transacción a verificar
* @param {string} verification_type - Tipo de verificación (ej: 'by_otp', 'by_amount')
* @param {string} value - Valor de verificación (código OTP o monto)
* @param {function} successCallback - Callback para respuesta exitosa
* @param {function} errorCallback - Callback para errores
*/
Payment.verifyTransaction(
'user_12345',
'TR-123456',
'by_otp',
'123456',
function(response) {
console.log('Verificación exitosa:', response);
if (response.transaction.status === 'success') {
console.log('Transacción verificada correctamente');
}
},
function(error) {
console.error('Error de verificación:', error);
}
);
```
--------------------------------
### Specify Allowed Card Types in PaymentForm - HTML
Source: https://github.com/globalpayredeban/globalpayredeban.js/blob/master/README.md
Configures the PaymentForm to accept only specific card types, such as Exito or Alkosto. If a card of a disallowed type is entered, the form will reset, lock input fields, and display a custom error message defined by 'data-invalid-card-type-message'.
```html
```
--------------------------------
### GlobalPay Redeban Test Card Numbers (JavaScript)
Source: https://context7.com/globalpayredeban/globalpayredeban.js/llms.txt
This JavaScript code snippet provides test card numbers for use in the GlobalPay Redeban staging environment. It includes sample data for Visa, Mastercard, and Amex, along with instructions on using valid expiry dates and CVVs.
```javascript
// Tarjetas de prueba para ambiente STG
const TEST_CARDS = {
visa: {
number: '4111111111111111',
cvv: '123',
expiry: '12/25'
},
mastercard: {
number: '5500000000000004',
cvv: '123',
expiry: '12/25'
},
amex: {
number: '340000000000009',
cvv: '1234', // Amex usa 4 dígitos
expiry: '12/25'
}
};
// Usar cualquier nombre de tarjetahabiente
// Usar cualquier fecha de expiración futura
// Usar cualquier CVV de 3 dígitos (4 para Amex)
```
--------------------------------
### Call PaymentForm Function - JavaScript
Source: https://github.com/globalpayredeban/globalpayredeban.js/blob/master/README.md
This snippet demonstrates the general pattern for calling a function on a PaymentForm element. Replace 'function' with the desired function name. The available functions allow retrieval of card details, card type, captured name, expiry month/year, and fiscal number.
```javascript
$"#my-card").PaymentForm('function')
```
--------------------------------
### Apply Card Number Masks with PaymentForm (JavaScript)
Source: https://github.com/globalpayredeban/globalpayredeban.js/blob/master/examples/05_payment-form-card-type-from-number.html
This snippet shows how to use the PaymentForm library to apply different masking formats to a card number input. It listens for changes in the card number field, cleans the input, and then applies specified masks. Dependencies include the PaymentForm library and jQuery.
```javascript
$(function () {
$("#card-number").change(function () {
var cleanCardNumber = PaymentForm.numbersOnlyString($(this).val());
$(this).val(PaymentForm.applyFormatMask(cleanCardNumber, 'XXXX XXXX XXXX XXXX'));
$("#mask-1").val(PaymentForm.applyFormatMask(cleanCardNumber, 'XX-XX-XX-XX-XX-XX-XX-XX'));
$("#mask-2").val(PaymentForm.applyFormatMask(cleanCardNumber, '+0 XXXX-XXXXXX @XXXXXX'));
});
});
```