결제 위젯 표시 설정
플랫폼에 결제 위젯 인터페이스를 추가하려면 위젯 라이브러리를 추가해야 합니다. 사용자 경험을 개선하기 위해 위젯 높이와 이벤트 처리해야 할 수도 있습니다.
결제 위젯 라이브러리 추가
스크립트를 사용해 설정하기
플랫폼 웹사이트 페이지에 스크립트를 추가합니다. 스크립트 초기화 매개변수에서 이전 통합 단계에서 받은 인증 토큰을 전달합니다. 페이지가 로드될 때마다 스크립트가 실행됩니다.
Copy
<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를 사용해 설정하기
npm install @xsolla/payouts-sdk명령을 실행하고 위젯 라이브러리를 설정합니다.- 플랫폼 사이트에 라이브러리 링크를 추가합니다. 요청에서 이전 통합 단계에서 받은 인증 토큰을 전달합니다.
다음 초기화 코드 사용:
Copy
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');
});추가 설정
높이
초기화 코드에 다음 파라미터를 전달해 결제 위젯의 높이를 조정할 수 있습니다:
| 매개 변수 | 유형 | 설명 |
|---|---|---|
| string | 결제 위젯 높이:
|
이벤트 처리
다음 이벤트 처리 방법을 설정할 수 있습니다.
loaded- iframe으로 위젯 로딩.tokenExpired- 토큰 만료.requestWithdrawal- 성공적인 인출 요청 접수.heightResize- 위젯 높이 변경.size=='auto'매개변수가 전달되는 경우에만 이벤트를 처리합니다.
이벤트 처리 설정 예시:
Copy
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}`);
});진행률
오자 또는 기타 텍스트 오류를 찾으셨나요? 텍스트를 선택하고 컨트롤+엔터를 누르세요.
