Intégration de la 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. Il ne s'agit pas d'une liste exhaustive des méthodes d'intégration actuelles ou potentielles. Parlez-en avec votre directeur de compte pour discuter plus en détail.
Rokt rendra votre flux d'application dans un iframe hébergé par le plugin de superposition du fournisseur de carte de crédit Rokt. Ce plugin :
- Fait office de proxy pour la communication avec le Web SDK ainsi que la page parent.
- Est hébergé sur votre domaine et doit être une application web standard.
- Doit inclure l'URL de la page de l'application dans les champs de données pour chaque carte de crédit unique que vous proposerez via Rokt.
L'interaction entre la page de l'application de la carte de crédit et le plugin Rokt sera activée via le message passing basé sur le navigateur. Des détails d'implémentation spécifiques 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 à Rokt en temps réel via l'API du plugin, afin de rendre le contenu de placement pertinent. Pour toutes les décisions en attente qui sont résolues ultérieurement, vous devez communiquer ces résultats à Rokt via l'API d'événement ou un autre mécanisme de livraison de données.
Hébergement de votre application dans un iframe
Pour permettre des flux de travail de demande de carte de crédit de tiers directement sur une page partenaire, Rokt gère un plugin enveloppant qui intègre le formulaire de demande de carte de crédit cible dans un iframe.
Considérations relatives à 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 concernées.
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 du délai d'attente du plugin
Rokt observe l'état des iframes/plugins chargés pour garantir la meilleure expérience utilisateur en cas d'empêchement du chargement correct de l'iframe. Pour cette raison, le SDK Web de Rokt lance un minuteur en attendant le handshake de MessagePort une fois que le plugin cible a émis son événement onload. Cela permet au SDK Web de Rokt de supprimer le plugin s'il y a un dépassement du délai d'attente 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 ne le permet notre délai d'attente. Pour cette raison, il est important que la balise <script> contenant la logique d'initialisation du plugin soit chargée 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 et peut être copiée directement dans l'application cible. Ce qui suit expliquera cette poignée de main en détail.
Format du message
Le Web SDK de Rokt enverra des données au plugin cible via l'API postMessage du navigateur à travers le MessagePort obtenu après la poignée de main initiale.
Les détails du message seront fournis dans la propriété event.data sur l'événement et suivront la structure suivante:
type PluginMessage = {
type: PluginMessageAction
payload?: BasicObject
}
Connexion initiale au plugin Rokt
Afin d'écouter de manière sécurisée les événements provenant de l'iframe hébergé sur un domaine Rokt, le plugin cible doit obtenir et écouter un MessagePort reçu lors d'un événement message sur la fenêtre.
Ce MessagePort facilitera les communications entre les deux frames, en veillant à ce que les événements soient filtrés par domaine. Cela garantira que le plugin cible ne soit pas ouvert illicitement par des entités non-Rokt.
Voici un exemple de configuration pour initialiser les communications avec le plugin Rokt :
// Commencer à écouter 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 à commencer à envoyer des messages,
// rejouer les messages mis en mémoire tampon
port.start();
// Envoyer un message au SDK Web Rokt
port.postMessage({ type: "close" });
Il est important de commencer à écouter les événements message avant d'envoyer le message "prêt"
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 est lancé et contient toutes les informations nécessaires pour un rendu correct.
type Payload = {
creditCard: unknown
offer: unknown
partner: {
name: string
}
}
Réduire les frictions de l'application pour le demandeur en pré-remplissant les champs trouvés dans la charge utile config
De la demande de carte de crédit au plugin Rokt
- Nom de l'événement :
complete
Envoyé une fois que le client a terminé la demande, 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 interactive par l'utilisateur.
Cela 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 supprimé de la page partenaire.
Cela arrêtera toute exécution supplémentaire de JavaScript dans le plugin cible car il sera supprimé de la page.
void
- Nom de l'événement :
failure
Envoyé si le plugin échoue de manière critique et nécessite d'être supprimé de la page partenaire.
Cela arrêtera toute exécution supplémentaire de JavaScript dans le plugin cible car il sera supprimé de la page.
void
Exemple d'implémentation de FrameTransport
Voici une implémentation d'enveloppe pour la poignée de main MessagePort avec une API simplifiée pour la consommation. Il est destiné comme point de départ simple, n'hésitez pas à le copier, à le convertir en classes ES6, TypeScript ou à l'utiliser tel quel.
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')