Página alojada para tarjetas virtuales
Muestre tarjetas virtuales de forma segura con Rapyd Issuing. | Empresarial
La página alojada de tarjetas virtuales de Rapyd permite a los titulares de tarjetas mostrarlas en línea.
Los números de las tarjetas virtuales están asegurados y solo se muestran si se solicitan. Las tarjetas virtuales son PCI cumple con las normas y también puede 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.
Le pides a Rapyd que Mostrar los detalles de la tarjeta emitida .
Rapyd procesa su solicitud y envía la respuesta con el
redirect_url.Envías y muestras el
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 Crea una billetera Rapyd, 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 del monedero. Una cadena que empieza por cont_. |
Enviar solicitud de API Mostrar los detalles de la tarjeta emitida al cliente
El identificador de la tarjeta que quieres mostrar empezará por
tarjeta_...
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 Virtual Cards Response
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" } }
Redirige al cliente a la URL que has recibido en la respuesta. URL de redireccionamiento aparece en redirect_url campo.
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. Crea tu página alojada
Antes de incrustar el iframe en tu página, sigue los pasos 1, 2 y 3 descritos en Cómo funciona la página alojada de tarjetas virtuales para crear tu página alojada para tarjetas virtuales.
2. Recopila el ID de tu página
Una vez que hayas creado la página, en la respuesta recibirás el ID del objeto de página, una cadena que empieza por hp_issued, (por ejemplo, id: hp_issued_bd334669c8a80bc68c124b144c350b7f).
3. Agregue el código del kit de herramientas
Añade el siguiente código a tu página:
<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="rapyd-toolkit":
<div id="rapyd-toolkit"></div>
Initialize the Page object with the following fields:
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". */ });
Visualización de llamadas Kit de herramientas () para mostrar la página alojada para tarjetas virtuales:
checkout.displayToolkit();
Paso opcional para cerrar la ventana al finalizar. close_on_complete está establecido en falso, llama Toolkit.closeToolkit () para cerrar la ventana de Rapyd Toolkit.
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 «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 Portal del cliente, tal y como se describe en Personalización de la página alojada para editar la apariencia de la página.