Intégration de carte de crédit avec Rokt
Aperçu de l'intégration
Ce document d'intégration décrit certaines des capacités d'intégration spécifiques que Rokt peut fournir. Ce n'est pas une liste exhaustive des méthodes d'intégration actuelles ou potentielles. Parlez avec votre Directeur de Compte pour en discuter plus en détail.
Rokt rendra votre flux d'application dans une iframe hébergée par le plugin de superposition du fournisseur de carte de crédit Rokt. Ce plugin :
- Intermédie la communication avec le SDK Web ainsi qu'avec la page parente.
- Est hébergé sur votre domaine et doit être une application web standard.
- Doit inclure l'URL de la page d'application dans les champs de données pour chaque carte de crédit unique que vous proposerez via Rokt.
L'interaction entre la page d'application de carte de crédit et le plugin Rokt sera activée via le passage de messages basé sur le navigateur. Les détails spécifiques de l'implémentation avec des exemples de code sont inclus ci-dessous.
Décisions d'application en temps réel
Le processus de demande de carte de crédit doit communiquer les décisions d'application avec Rokt en temps réel via l'API du plugin, afin d'afficher le contenu de placement pertinent. Pour toute décision en attente qui est résolue ultérieurement, vous devez communiquer ces résultats à Rokt via l'Event API ou un autre mécanisme de livraison de données.
Hébergement de votre application dans un iframe
Pour activer les workflows de demandes de carte de crédit de tiers directement sur une page partenaire, Rokt gère un plugin wrapper qui intègre le formulaire de demande de carte de crédit cible dans un iframe.
Considérations sur la politique de sécurité du contenu
Veuillez confirmer que la politique de sécurité du contenu de votre formulaire de demande de carte de crédit permet l'hébergement via le domaine de Rokt : https://apps.rokt.com. Sinon, le plugin de Rokt ne pourra pas héberger votre formulaire de demande sur les pages pertinentes.
Taille de l'iframe
Le plugin de carte de crédit de Rokt redimensionnera et centrera la demande de carte de crédit pour s'adapter aux écrans des utilisateurs et créera également des dégradés d'arrière-plan.
Suppression en cas de dépassement de délai du plugin
Rokt surveille le statut des iframes/plugins chargés pour garantir la meilleure expérience utilisateur si quelque chose empêche l'iframe de se charger correctement. Pour cette raison, le SDK Web de Rokt démarre un minuteur en attente de la poignée de main (handshake) du MessagePort une fois que le plugin cible a émis son événement onload. Cela garantit que le SDK Web de Rokt peut supprimer le plugin s'il y a un dépassement de délai indiquant qu'il est bloqué.
Les attributs appliqués à la balise <script> déclencheront l'événement onload du document avant l'évaluation complète du JavaScript dans le script cible. Cela signifie que les appareils plus lents peuvent prendre plus de temps pour évaluer le JavaScript que notre délai d'attente ne le permet. Pour cette raison, il est important que le <script> contenant la logique d'initialisation du plugin soit chargé de manière synchrone.
Communication via messages
À la fin de ce document se trouve une implémentation qui démontre cette poignée de main (handshake) et peut être copiée directement dans l'application cible. Ce qui suit expliquera cette poignée de main plus en détail.
Format du message
Le SDK Web de Rokt enverra des données au plugin cible via l'API postMessage du navigateur à travers le MessagePort obtenu après l'établissement initial de la connexion.
Les détails du message seront fournis dans la propriété event.data de l'événement et respecteront la structure suivante :
type PluginMessage = {
type: PluginMessageAction
payload?: BasicObject
}
Connexion initiale au plugin Rokt
Pour écouter en toute sécurité les événements provenant de l'iframe hébergée sur un domaine Rokt, le plugin cible doit obtenir et écouter un MessagePort reçu lors d'un événement de message sur la fenêtre.
Ce MessagePort facilitera les communications entre les deux cadres, garantissant que les événements sont filtrés par domaine. Cela garantira que le plugin cible n'est pas ouvert illicitement par des entités non-Rokt.
Voici un exemple de configuration pour initialiser les communications avec le Plugin Rokt :
// Commencer à écouter pour le port de message
const onPort = new Promise((res) => {
function onPort(event) {
// Filtrer les domaines non fiables
if (event.origin.endsWith(".rokt.com")) {
window.removeEventListener("message", onPort);
res(event.ports[0]);
}
}
window.addEventListener("message", onPort);
});
// Un message vide indique au parent que le
// plugin cible est prêt à recevoir le MessagePort
window.parent.postMessage({ type: 'send-port' }, "*");
// Lorsque le port arrive
const port = await onPort;
// Commencer à écouter les événements postMessage sur le port
port.addEventListener("message", (event) => {
const { type, payload } = event.data;
});
// Instruire le MessagePort de commencer à envoyer des messages,
// rejouant les messages mis en mémoire tampon
port.start();
// Envoyer un message au SDK Web de Rokt
port.postMessage({ type: "close" });
Il est important de commencer à écouter les événements de message avant d'envoyer le message “ready”
Envoi de messages à Rokt
Le plugin cible peut envoyer des messages au cadre parent Rokt en utilisant l'API postMessage sur le MessagePort obtenu.
// ...
port.postMessage({ type: 'close' })
Événements
Du plugin Rokt à l'application de carte de crédit
- Nom de l'événement :
config
Envoyé une fois lorsque le plugin se lance et contient toutes les informations nécessaires pour un rendu correct.
type Payload = {
creditCard: unknown
offer: unknown
partner: {
name: string
}
}
Réduisez les frictions pour le demandeur en pré-remplissant les champs trouvés dans le payload config
De l'application de carte de crédit au plugin Rokt
- Nom de l'événement :
complete
Envoyé une fois que le client a terminé l'application, prouvant un statut de complétion.
type Payload = {
status:
'approved' |
'pending' |
'declined'
}
- Nom de l'événement :
interactive
Envoyé une fois que l'interface utilisateur du plugin est interactive - définie comme rendue et interagissable par l'utilisateur.
Ceci est déclenché manuellement par le plugin et se produit normalement après le cycle de rendu initial du framework utilisé.
void
- Nom de l'événement :
close
Envoyé une fois que le plugin est prêt à être retiré de la page partenaire.
Cela arrêtera toute exécution ultérieure de JavaScript au sein du plugin cible car il sera retiré de la page.
void
- Nom de l'événement :
failure
Envoyé si le plugin échoue de manière critique et nécessite un retrait de la page partenaire.
Cela arrêtera toute exécution ultérieure de JavaScript au sein du plugin cible car il sera retiré de la page.
void
Exemple d'implémentation de FrameTransport
Ci-dessous se trouve une implémentation wrapper pour le handshake MessagePort avec une API simplifiée pour la consommation. Elle est conçue comme un point de départ simple, n'hésitez pas à la copier, la convertir en classes ES6, TypeScript ou à l'utiliser telle quelle.
export function FrameTransport() {
const onPort = new Promise(res => {
const onMessage = (event) => {
if (event.origin.endsWith(".rokt.com")) {
window.removeEventListener('message', onMessage)
res(event.ports[0]);
}
}
window.addEventListener('message', onMessage)
})
this.on = async (type, callback) => {
const port = await onPort
port.addEventListener('message', event => {
if (event.data.type === type) {
callback(event.data.payload)
}
})
}
this.send = async (type, body) => {
const port = await onPort
port.postMessage({ type, payload: body })
}
this.listen = async () => {
const port = await onPort
port.start()
}
window.parent.postMessage({ type: 'send-port' }, '*')
}
Utilisation :
const transport = new FrameTransport()
transport.on('config', body => {
console.log(body.creditCard)
})
transport.listen()
transport.send('complete', { status: 'approved' })
transport.send('close')