메타프레임을 설정하고 웹 애플리케이션에 추가
관리자 페이지에서 메타프레임 설정
기본 메타프레임 설정 방법:
- 관리자 페이지의 프로젝트에서, 메타프레임 섹션으로 이동합니다.
- 메타프레임 생성을 클릭합니다.
주의
메타프레임 생성 버튼은 라이선스 계약에 서명한 후에만 사용할 수 있습니다.
- 메타프레임 활성화 창을 클릭합니다.
- 로그인 프로젝트 필드에서, 이전 단계에서 설정한 로그인 프로젝트를 선택합니다.
고급 메타프레임 기능 설정에 대한 자세한 내용은 다음을 참조하십시오:
메타프레임을 웹 애플리케이션에 통합
앱에 메타프레임을 추가하는 방법:
- 관리자 페이지의 프로젝트에서, 메타프레임 섹션으로 이동합니다.
- 스크립트 코드 복사를 클릭합니다.
- 다음 방법 중 하나를 사용하여 코드에 스크립트를 추가합니다:
- 아래 예시와 같이 애플리케이션이 초기화되기 전에 HTML 파일의 제목 또는 본문에 스크립트를 삽입합니다.
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>
- 애플리케이션의 JS 코드 내부에 스크립트 엘리먼트를 생성하고 아래 예시와 같이 스트립트를 로드한 후
window.metaframe.create메서드를 호출합니다. 이를 통해 메타프레임 스크립트를 동적으로 로딩할 수 있습니다.
- 애플리케이션의 JS 코드 내부에 스크립트 엘리먼트를 생성하고 아래 예시와 같이 스트립트를 로드한 후
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);
알림
window.metaframe.create 메서드 매개 변수에 대한 자세한 설명은 메타프레임 메서드 및 이벤트 탐색 섹션을 참조하십시오.이 기사가 도움이 되었나요?
의견을 보내 주셔서 감사드립니다!
메시지를 검토한 후 사용자 경험 향상에 사용하겠습니다.오자 또는 기타 텍스트 오류를 찾으셨나요? 텍스트를 선택하고 컨트롤+엔터를 누르세요.
