Página alojada para tarjetas virtuales
Visualice las tarjetas virtuales de forma segura con Rapyd Issuing. | Enterprise
La página alojada de tarjetas virtuales de Rapyd permite a los titulares de tarjetas visualizarlas en línea.
Los números de las tarjetas virtuales están asegurados y solo se muestran si se solicitan. Las tarjetas virtuales cumplen con las normas PCI y pueden funcionar para clientes que no sean PCI.
Con la página alojada para tarjetas virtuales de Rapyd, su empresa puede emitir tarjetas virtuales a pedido para que los empleados, contratistas y otros usuarios realicen compras cómodamente para viajes de negocios, transporte y compra de productos.
La API de emisión de Rapyd se utiliza para generar una página alojada que puede mostrar todos los detalles de la tarjeta emitida.
Ejemplo de página alojada para tarjetas virtuales
Haga clic en Mostrar detalles para revelar la información de la tarjeta.
Asegúrese de Emitir una tarjeta antes de que el empleado solicite usar una tarjeta virtual en una página alojada.
Un empleado de la empresa solicita utilizar una tarjeta virtual para un gasto de la empresa.
Usted le pide a Rapyd Mostrar los detalles de la tarjeta emitida .
Rapyd procesa su solicitud y envía la respuesta con la
redirect_url.Usted envía y muestra la
redirect_urla su empleado.El empleado completa el captcha y usa la URL dentro del período de caducidad de 5 minutos.
Siga los pasos para Crear una Rapyd Wallet, Emitir una tarjeta, y Activar la tarjeta emitida antes de crear su página alojada para una tarjeta virtual.
Listar tarjetas emitidas, tarjetas por contacto.
Parámetros de consulta | Descripción |
|---|---|
contacto | ID del contacto de la billetera. Una cadena que empieza por cont_. |
Enviar solicitud de API Mostrar los detalles de la tarjeta emitida al cliente
El ID de la tarjeta que quiere mostrar empezará por
card_...
Parámetros de ruta | Descripción |
|---|---|
tarjeta | ID de la tarjeta emitida, una cadena que comience por |
Página alojada para la solicitud de tarjetas virtuales
Mostrar los detalles de la tarjeta emitida a un cliente describe los campos de la solicitud.
Solicitud
// POST https://sandboxapi.rapyd.net/v1/hosted/issuing/card_details/card { "card_color": "#f9f9f9", "logo": "https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTNgldxyUfmVPmQV1YpTcDWo_kjX-TO_EiccQ&usqp=CAU", "language": "en", "logo_orientation": "landscape" }
Página alojada para la respuesta de tarjetas virtuales
Mostrar los detalles de la tarjeta emitida a un cliente describe los campos de la respuesta.
Respuesta
{ "status": { "error_code": "", "status": "SUCCESS", "message": "", "response_code": "", "operation_id": "137d6ec5-51bd-4c47-a163-3b86c8457e54" }, "data": { "id": "hp_issued_3b4f08ef2da59d20ebc8e82a6266e50c", "redirect_url": "https://sandboxhosted.rapyd.net/issuing/card_details?token=hp_issued_3b4f08ef2da59d20ebc8e82a6266e50c", "merchant_color": "0036ff", "merchant_language": "", "merchant_logo": "https://sboxiconslib.rapyd.net/merchant-logos/ohpc_b811c506b5347ce4f107d8ee72a1ce90.jpg", "merchant_website": "https://www.rapyd.net", "merchant_alias": "N/A", "merchant_customer_support": {}, "status": "NEW", "expiration": 1614851280, "card_color": "#f9f9f9", "logo": "https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTNgldxyUfmVPmQV1YpTcDWo_kjX-TO_EiccQ&usqp=CAU", "logo_orientation": "landscape", "card": {}, "language": "en" } }
Redirija al cliente a la URL que ha recibido en la respuesta. La URL de redireccionamiento aparece en el campo redirect_url.
Seguridad de redireccionamiento de URL
Esta página está protegida por Google reCAPTCHA
Esta página es accesible solo durante 5 minutos (desde el momento en que se generó)
Rapyd Toolkit ha sido especialmente diseñado para integrarse directamente en su sitio web y dar a su empresa más control sobre toda la experiencia.
1. Crear su página alojada
Antes de incorporar el iframe en su página, siga los pasos 1, 2 y 3 descritos en Cómo funciona la página alojada de tarjetas virtuales para crear su página alojada para tarjetas virtuales.
2. Recaudar el ID de su página
Una vez que haya creado la página, en la respuesta recibirá el ID del objeto de página, una cadena que empieza por hp_issued, (por ejemplo, id: hp_issued_bd334669c8a80bc68c124b144c350b7f).
3. Agregar el código del Toolkit
Añada el siguiente código a su página:
<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>
Add a <div> tag with id="rapyd-toolkit":
<div id="rapyd-toolkit"></div>
Inicie el objeto de la página con los siguientes campos:
JavaScript
let toolkit = new RapydToolkit({ button_color: "blue", /* Color of the Show Details 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 Hosted Page for Virtual Cards response. Optional.*/ id: "hp_issued_bd334669c8a80bc68c124b144c350b7f", /* ID of the Hosted Page for Virtual Cards response. String. Required.*/ close_on_complete: true, /* Causes the embedded Rapyd Toolkit window to close when we fail to retrieve the card details. Boolean. Default is 'true'. Optional.*/ page_type: "card_issuing" /* Mandatory for the Hosted Page for Virtual Cards Default is "collection". */ });
Solicite la visualización Toolkit() para mostrar la página alojada para tarjetas virtuales:
checkout.displayToolkit();
Paso opcional para cerrar la ventana al finalizar. Si close_on_complete está establecido en falso, solicite Toolkit.closeToolkit () para cerrar la ventana de Rapyd Toolkit.
toolkit.closeToolkit();
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 «ventana».
JavaScript
window.addEventListener(issuingOnSuccess, (event) => { console.log(event.detail) // Sent after clicking the Show Details button and the details are successfully displayed // Client code. }) window.addEventListener(issuingOnFail, (event) => { console.error(event.detail.error) // Returns an error object when we fail to retrieve the card details // Client code.
Las páginas alojadas se pueden personalizar mediante el Client Portal, tal y como se describe en Personalizar la página alojada para editar la apariencia de la página.