결제 위젯 표시 설정

플랫폼에 결제 위젯 인터페이스를 추가하려면 위젯 라이브러리를 추가해야 합니다. 사용자 경험을 개선하기 위해 위젯 높이이벤트 처리해야 할 수도 있습니다.

결제 위젯 라이브러리 추가

알림
샌드박스 모드에서 결제 위젯을 열려면 다음 지침을 참조해 주세요.

스크립트를 사용해 설정하기

플랫폼 웹사이트 페이지에 스크립트를 추가합니다. 스크립트 초기화 매개변수에서 이전 통합 단계에서 받은 인증 토큰을 전달합니다. 페이지가 로드될 때마다 스크립트가 실행됩니다.
Copy
Full screen
Small screen
    <script>
        var s = document.createElement('script');
        s.type = "text/javascript";
        s.async = true;
        s.src = "https://static.xsolla.com/payouts/v0/_bundles/santorelli.min.js";
        s.addEventListener('load', function () {
            const widget = new XPayoutsWidget.Widget({
    					token: '<auth token>',
    					theme: 'black',
    					size: 'fixed'  
    				});
    
            widget.show('<container_id>');
    
    		widget.addEventListener('load', () => {
    			console.log('loaded');
    		});
        }, false);
        var head = document.getElementsByTagName('head')[0];
        head.appendChild(s);
    </script>
    

    npm-package를 사용해 설정하기

    1. npm install @xsolla/payouts-sdk 명령을 실행하고 위젯 라이브러리를 설정합니다.
    2. 플랫폼 사이트에 라이브러리 링크를 추가합니다. 요청에서 이전 통합 단계에서 받은 인증 토큰을 전달합니다.
    FAQ
    일반 문제를 해결하려면 답변을 참조하세요.
    다음 초기화 코드 사용:
    Copy
    Full screen
    Small screen
      import {Widget} from '@xsolla/payouts-sdk';
      
      const widget = new Widget({
      	token: '<auth token>',
      	theme: 'black',
      	size: 'fixed'  
      });
      
      widget.show('<container_id>');
      
      widget.addEventListener('load', () => {
      	console.log('loaded');
      });
      

      추가 설정

      높이

      초기화 코드에 다음 파라미터를 전달해 결제 위젯의 높이를 조정할 수 있습니다:
      매개 변수유형설명
      size
      string결제 위젯 높이:
      • fixed - 고정 위젯 높이는 600px 입니다.
      • auto - 화면 크기에 따라 동적으로 위젯 높이가 변경됩니다.

      이벤트 처리

      다음 이벤트 처리 방법을 설정할 수 있습니다.

      • loaded - iframe으로 위젯 로딩.
      • tokenExpired - 토큰 만료.
      • requestWithdrawal - 성공적인 인출 요청 접수.
      • heightResize - 위젯 높이 변경. size==‘auto’ 매개변수가 전달되는 경우에만 이벤트를 처리합니다.

      이벤트 처리 설정 예시:

      Copy
      Full screen
      Small screen
        widget.addEventListener('tokenExpired', () => {
        	console.log('tokenExpired');
        });
        widget.addEventListener('heightResize', ({ height }) => {
        	console.log(`height resize to: ${height}`);
        });
        widget.addEventListener('requestWithdrawal', ({ amount }) => {
        	console.log(`success request withdrawal, amount: ${amount}`);
        });
        
        진행률
        의견을 보내 주셔서 감사드립니다!
        마지막 업데이트: 2024년 1월 22일

        오자 또는 기타 텍스트 오류를 찾으셨나요? 텍스트를 선택하고 컨트롤+엔터를 누르세요.

        문제 보고
        콘텐츠를 항상 검토합니다. 여러분의 피드백은 콘텐츠를 개선에 도움이 됩니다.
        후속 조치를 위해 이메일을 제공해 주세요
        의견을 보내 주셔서 감사드립니다!