Configurer Metaframe et l’ajouter à l’application Web
Configurer Metaframe dans le Compte éditeur
Pour effectuer la configuration de base de Metaframe :
- Dans votre projet, dans le Compte éditeur, accédez à la section Metaframe.
- Cliquez sur Create Metaframe.
Avis
Le bouton Create Metaframe est disponible uniquement après la signature du contrat de licence.
- Cliquez sur la bascule Enable Metaframe.
- Dans le champ Login project, sélectionnez le projet de Login configuré à l’étape précédente.
Pour des informations détaillées sur la configuration des fonctions avancées de Metaframe, voir :
Intégrer Metaframe dans une application Web
Pour ajouter Metaframe à votre application :
- Dans votre projet, dans le Compte éditeur, accédez à la section Metaframe.
- Cliquez sur Copy script code.
- Ajoutez le script à votre code de l’une des manières suivantes :
- Insérez le script dans l'en-tête ou le corps du fichier HTML avant que votre application ne soit initialisée, comme le montre l'exemple ci-dessous.
Copy
- html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Integration example</title>
</head>
<body>
<script src="https://cdn.xsolla.net/metaframe-web-wallet-widget-prod/container/v1/metaframe.js"></script>
<script>
window.metaframe.create({
loginProjectId: '00000000-0000-0000-0000-000000000000',
merchantId: 000001,
projectId: 000001,
orbsApiHostId: '00000000-0000-0000-0000-000000000000',
isMobile: false,
isCollapsed: false,
layoutSettings: {
desktop: {
widgetMarginTop: 16
},
mobile: {
widgetMarginTop: 72
},
},
});
</script>
<script src="YOUR_APPLICATION_HERE.js"></script>
</body>
</html>
- Créez un élément de script dans le code JS de votre application et appelez la méthode
window.metaframe.createaprès le chargement du script, comme le montre l'exemple ci-dessous. Cela permet de charger dynamiquement le script Metaframe.
- Créez un élément de script dans le code JS de votre application et appelez la méthode
Copy
- javascript
const metaframeScript = document.createElement("script");
metaframeScript.src = "https://cdn.xsolla.net/metaframe-web-wallet-widget-prod/container/v1/metaframe.js";
metaframeScript.onload = () => {
window.metaframe.create(
{
loginProjectId: '00000000-0000-0000-0000-000000000000',
merchantId: 000001,
projectId: 000001,
orbsApiHostId: '00000000-0000-0000-0000-000000000000',
isMobile: false,
isCollapsed: false,
layoutSettings: {
desktop: {
widgetMarginTop: 16
},
mobile: {
widgetMarginTop: 72
},
},
}
);
};
document.body.appendChild(metaframeScript);
Note
Pour une description détaillée des paramètres de la méthode
window.metaframe.create , voir la section Explore Metaframe methods and events.Cet article vous a été utile ?
Merci pour votre commentaire !
Nous examinerons votre message et l'utiliserons pour améliorer votre expérience.Faute de frappe ou autre erreur dans le texte ? Sélectionnez le texte concerné et appuyez sur Ctrl+Entée.
