Skip to main content

Documentación

Activación de la tarjeta emitida

Active las tarjetas emitidas con una página alojada o incorpórelas con una integración de Toolkit.

La página alojada de activación de tarjetas es una página segura generada para que los usuarios activen una tarjeta emitida y reciban un PIN. La página alojada de activación de tarjetas 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

  • Usted 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 alojada de activación de tarjetas
  1. Introduzca el código de verificación enviado a su dispositivo móvil.

  2. Haga clic en Siguiente.

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

  4. Haga clic en Activar.

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

  6. Haga clic en 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. Usted solicita crear una ewallet y un contacto.

  2. Rapyd crea una ewallet y un contacto y regresa con los ID que comienzan con la ewallet, cont.

  3. Usted solicita emitir una tarjeta a un contacto de una ewallet.

  4. Rapyd crea una tarjeta en la parte superior del contacto de la ewallet con un ID que empieza por ci_.

Paso 2: Activar la tarjeta
issued-card-activation-activate-card.jpg
  1. Usted solicita crear una página alojada de activación de tarjetas y enviar la URL al contacto, o utilizar la integración del toolkit para incorporar la página en su sitio web.

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

  3. Muestra la página alojada a su cliente o la incorpora en su 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 alojada de activación de tarjetas.

hosted-page.svg

Descripción de los estados

Estado

Descripción

NEW

Nuevo: se generó la página alojada de activación de tarjetas.

DON

Listo: la página alojada se completó. Rapyd activó la tarjeta.

EXP

Caducada: la página alojada ha caducado.

Crear una Rapyd Wallet y el contacto personal de la billetera.

Nota: Asegúrese de seguir el proceso de verificación de identidad para un contacto.

Emitir una tarjeta a un contacto de la ewallet.

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"
                        }
                     }

La activación de tarjetas Toolkit está diseñada para incorporar la página alojada de activación de tarjetas directamente en su página web para un flujo de trabajo continuo en la activación de tarjetas emitidas.

Pasos para crear la integración de su Toolkit

Crear una página alojada de activación de tarjetas como se describe en la solicitud y respuesta.

Añada el siguiente código a su página de finalizar pago:

  1. Añada el tag <script> con la URL del Toolkit de Rapyd de finalizar pago:

    <script src="https://toolkit.rapyd.net"></script>

    Nota:Para ejecutar este método en la sandbox, utilice el siguiente código:

    <script src="https://sandboxtoolkit.rapyd.net"></script>
  2. Añada el tag <div> con id="card_issuing_activate":

    <div id="card_issuing_activate"></div>
  3. Inicie el objeto Página de finalizar 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. Solicite la visualización Toolkit () para mostrar la página de pago.

    toolkit.displayToolkit();
  5. Paso opcional. Si close_on_complete está establecido en falso, solicite Toolkit.closeToolkit () para cerrar la ventana del Toolkit de activación de tarjetas de Rapyd.

    toolkit.closeToolkit();
  6. Inserte el código que se ejecuta cuando se producen los siguientes eventos. Use su 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 del Toolkit 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 Toolkit:

    • 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 para la página alojada de activación de tarjetas 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_.

card_id

ID del objeto de la tarjeta emitida, una cadena que comience por ci_.

assigned_at

Hora en la que se asignó la tarjeta a un titular de la tarjeta, en hora de Unix. Solo respuesta

activated_at

Hora en la que se activó la tarjeta, en tiempo Unix. Solo respuesta

created_at

Hora de creación del objeto de tarjeta emitido, en hora Unix. Solo respuesta

card_program

ID del programa de tarjetas desde el que se emitió la tarjeta. Cadena que comienza por cardprog_ .