Skip to main content

Documentación

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
  1. Introduce el código de verificación enviado a tu dispositivo móvil.

  2. Haga clic Siguiente.

    648084d38c52b.png
  3. Ingresa el número de la tarjeta.

  4. Haga clic Activar.

    648084d606704.png
  5. Redirigir a la La activación de la tarjeta fue exitosa página.

  6. Haga clic Mostrar PIN para mostrar el PIN de la tarjeta activada.

    648084d8acefa.png
Paso 1: Emitir una tarjeta a un contacto
issued-card-activation.jpg
  1. Solicitas crear un monedero electrónico y ponerte en contacto.

  2. Rapyd crea una billetera electrónica y un contacto y regresa con los ID que comienzan con la billetera electrónica, cont.

  3. Solicitas emitir una tarjeta a un contacto de monedero electrónico.

  4. 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
issued-card-activation-activate-card.jpg
  1. 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.

  2. Rapyd crea la página de activación de la tarjeta alojada: devuelve la URL.

  3. Muestras la página alojada a tu cliente o la insertas en tu sitio web.

  4. 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.

hosted-page.svg

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:

  1. 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>
  2. Add a <div> tag with id="card_issuing_activate":

    <div id="card_issuing_activate"></div>
  3. 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". */
          });
  4. Llama a display Toolkit () para mostrar la página de pago.

    toolkit.displayToolkit();
  5. Paso opcional. Si close_on_complete está establecido en falso, llame a Toolkit.closeToolkit () para cerrar la ventana del kit de herramientas

    toolkit.closeToolkit();
  6. 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_ .