Activación de la tarjeta emitida
Active las tarjetas emitidas con una página alojada o insértelas con una integración de Toolkit.
La página de activación de tarjetas alojadas es una página segura generada para que los usuarios activen una tarjeta emitida y reciban un PIN. La página de activación de la tarjeta alojada solicitará que se envíe un código de verificación al teléfono móvil del cliente. Una vez que se envíe el código de verificación, aparecerá una página de confirmación con el PIN de la tarjeta.
Casos de uso comunes
Ha emitido tarjetas para sus clientes y necesita una forma segura de activar la tarjeta y mostrar el PIN de la tarjeta a los titulares de la tarjeta.
Ejemplo de página de activación de tarjetas alojadas
Introduce el código de verificación enviado a tu dispositivo móvil.
Haga clic Siguiente.

Ingresa el número de la tarjeta.
Haga clic Activar.

Redirigir a la La activación de la tarjeta fue exitosa página.
Haga clic Mostrar PIN para mostrar el PIN de la tarjeta activada.

Paso 1: Emitir una tarjeta a un contacto

Solicitas crear un monedero electrónico y ponerte en contacto.
Rapyd crea una billetera electrónica y un contacto y regresa con los ID que comienzan con la billetera electrónica, cont.
Solicitas emitir una tarjeta a un contacto de monedero electrónico.
Rapyd crea una tarjeta en la parte superior del contacto del monedero electrónico con un identificador que empieza por ci_.
Paso 2: Activar la tarjeta

Solicitas crear una página de activación de Hosted Card y enviar la URL al contacto, o utilizar la integración del kit de herramientas para incrustar la página en tu sitio web.
Rapyd crea la página de activación de la tarjeta alojada: devuelve la URL.
Muestras la página alojada a tu cliente o la insertas en tu sitio web.
El contacto del cliente completa la página alojada y Rapyd le envía una notificación.
El siguiente diagrama de estados finitos resume los estados de la página de activación de Hosted Card.
Descripción de los estados
Estado | Descripción |
|---|---|
NUEVO | Nuevo: se generó la página de activación de Hosted Card. |
DON | Listo: la página alojada se completó. Rapyd activó la tarjeta |
EXP | Caducada: la página alojada ha caducado. |
Crea una billetera Rapyd y el contacto personal de la billetera.
Nota: Asegúrate de seguir el proceso de verificación de identidad de un contacto.
Emitir una tarjeta a un contacto de monedero electrónico.
Solicitud
Solicitud
{ "ewallet_contact": "cont_0a73f7d860c7bbd1b8891b322151337b" }
Respuesta
Respuesta
{ "status": { "error_code": "", "status": "SUCCESS", "message": "", "response_code": "", "operation_id": "df7b7787-23e7-4edf-bd03-95335e29f0d0" }, "data": { "status": "NEW", "cancel_url": "http://rapyd.net", "complete_url": "http://rapyd.net", "language": "", "merchant_color": "323fff", "merchant_logo": "", "merchant_website": "http://rapyd.net", "merchant_customer_support": { "url": "http://support.rapyd.net", "email": "support@rapyd.net", "phone_number": "555-555-5555" }, "merchant_alias": "Test Business", "merchant_terms": "", "merchant_privacy_policy": "", "page_expiration": 1647319627, "redirect_url": "https://sandboxcheckout.rapyd.net/otp?token=hp_issuing_act_5801a620cc1ace4bad6149ace5c61cd7", "region": null, "geo_country": null, "id": "hp_issuing_act_5801a620cc1ace4bad6149ace5c61cd7", "ewallet_contact": "cont_0a73f7d860c7bbd1b8891b322151337b" } }
The Card Activation Toolkit is designed to embed the Hosted Card Activation Page directly into your website for a seamless workflow to activate issued cards.
Pasos para crear la integración de su kit de herramientas
Create a Hosted Card Activation Page as described in the request and response.
Add the following code to your checkout page:
Add a
<script>tag with the URL of the Rapyd Checkout Toolkit:<script src="https://toolkit.rapyd.net"></script>
Nota:Para ejecutar este método en el entorno limitado, utilice el siguiente código:
<script src="https://sandboxtoolkit.rapyd.net"></script>
Add a
<div>tag with id="card_issuing_activate":<div id="card_issuing_activate"></div>
Inicializa el objeto Página de pago con los siguientes campos:
JavaScript
let toolkit = new RapydToolkit({ button_text: "Submit", // Text that appears on the 'Submit' button. // String. Maximum length is 16 characters. // Default is "Place Your Order". Optional. pay_button_color: "blue", // Color of the 'Submit' button. String. // Standard CSS color name or hexadecimal code such as #323fff. // Default is the color that is returned in the 'merchant_color' // field of the response to 'Create Card Activation Page'. Optional. id: "hp_issuing_act_5801a620cc1ace4bad6149ace5c61cd7", // ID of the 'Card Activation' response. String. Required. close_on_complete: true, // Causes the embedded Card Activation Toolkit window to close // when the payment is complete. Boolean. Default is 'true'. Optional. page_type: "card_issuing_activate" /* Mandatory for Card Activation page Default is "collection". */ });
Llama a display Toolkit () para mostrar la página de pago.
toolkit.displayToolkit();
Paso opcional. Si close_on_complete está establecido en falso, llame a Toolkit.closeToolkit () para cerrar la ventana del kit de herramientas
toolkit.closeToolkit();
Inserta el código que se ejecuta cuando se producen los siguientes eventos. Usa tu código para leer el campo del evento en el objeto de la ventana.
JavaScript
window.addEventListener('onIssuedCardActivationSuccess', (event) => { console.log(event.detail) // Returns 'Issued Card' object. // Client code. }) window.addEventListener('onIssuedCardActivationFailure', (event) => { console.error(event.detail.error) // Triggered when the activation action fails with the error object // Client code. }) window.addEventListener('onOTPFailure', (event) => { console.error(event.detail.error) // Triggered when the OTP confirmation fails with the error object // Client code. }) window.addEventListener('onIssuedCardSetPinFailure', (event) => { console.error(event.detail.error) // Triggered when the card activation is successful but the PIN code was not set // Client code. }) window.addEventListener('onLoading', (event) => { console.log(event.detail.loading) // returns true or false depending on the loading state // Client code })
Ejemplo de kit de herramientas integrado para la activación de tarjetas emitidas por Rapyd
Este es un ejemplo de una página de activación de tarjetas emitidas por Rapyd creada con el kit de herramientas:
HTML
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Rapyd Card Activation</title> <script src="https://toolkit.rapyd.net"></script> <script> window.onload = function () { let toolkitcheckout = new RapydToolkit({ pay_button_text: "Submit", pay_button_color: "blue", id: "hp_issuing_act_5801a620cc1ace4bad6149ace5c61cd7" }); toolkit.displayToolkit(); } window.addEventListener('onIssuedCardActivationSuccess', function (event) { console.log(event.detail) }); window.addEventListener('onIssuedCardActivationFailure', function (event) { console.log(event.detail.error) }); </script> </head> <body style="background-color: #f1f1f1; display: flex; align-items: center; flex-direction: column; margin: 0"> <h1>Rapyd Card Activation Demo</h1> <div style="width: 500px" id="card_issuing_activate"></div> </body> </html>
Si la activación se realiza correctamente, los clientes reciben un evento «onIssuedCardActivationSuccess» con el objeto de la tarjeta emitida.
Tome nota de los siguientes campos de objetos paginados para la activación de tarjetas alojadas y de las tareas asociadas a cada uno de ellos.
Descripción de los campos
Campo | Descripción |
|---|---|
ewallet_contact | ID del objeto de contacto. Cadena que empieza por cont_. |
id_tarjeta | ID del objeto de la tarjeta emitida, una cadena que comience por ci_. |
asignado_en | Hora en la que se asignó la tarjeta a un titular de la tarjeta, en hora de Unix. Solo respuesta |
activado_en | Hora en la que se activó la tarjeta, en tiempo Unix. Solo respuesta |
creado_en | Hora de creación del objeto de tarjeta emitido, en hora Unix. Solo respuesta |
programa_tarjeta | ID del programa de tarjetas desde el que se emitió la tarjeta. Cadena que comienza por cardprog_ . |