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
1<!doctype html>
2<html lang="en">
3
4<head>
5 <meta charset="UTF-8" />
6 <title>Integration example</title>
7</head>
8
9<body>
10 <script src="https://cdn.xsolla.net/metaframe-web-wallet-widget-prod/container/v1/metaframe.js"></script>
11 <script>
12
13 window.metaframe.create({
14
15 loginProjectId: '00000000-0000-0000-0000-000000000000',
16 merchantId: 000001,
17 projectId: 000001,
18 orbsApiHostId: '00000000-0000-0000-0000-000000000000',
19 isMobile: false,
20 isCollapsed: false,
21 layoutSettings: {
22 desktop: {
23 widgetMarginTop: 16
24 },
25 mobile: {
26 widgetMarginTop: 72
27 },
28 },
29
30 });
31
32 </script>
33 <script src="YOUR_APPLICATION_HERE.js"></script>
34</body>
35
36</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
1const metaframeScript = document.createElement("script");
2
3metaframeScript.src = "https://cdn.xsolla.net/metaframe-web-wallet-widget-prod/container/v1/metaframe.js";
4
5metaframeScript.onload = () => {
6
7 window.metaframe.create(
8
9 {
10 loginProjectId: '00000000-0000-0000-0000-000000000000',
11 merchantId: 000001,
12 projectId: 000001,
13 orbsApiHostId: '00000000-0000-0000-0000-000000000000',
14 isMobile: false,
15 isCollapsed: false,
16 layoutSettings: {
17 desktop: {
18 widgetMarginTop: 16
19 },
20 mobile: {
21 widgetMarginTop: 72
22 },
23 },
24 }
25
26 );
27
28};
29
30document.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.
