결제 UI 열기
결제 UI를 열 수 있는 세 가지 방법:
- 페이 스테이션 임베드 스크립트
- Iframe
- 새 창
엑솔라와 계약을 체결하기 전에 결제 프로세스 테스트는 샌드박스 모드에서만 가능합니다. 오류가 있는 경우 해당 설명을 참조하세요.
샌드박스 모드에서 결제 UI를 열려면 다음 URL을 사용합니다 https://sandbox-secure.xsolla.com/
.
페이 스테이션 임베드
예시: 동기화 스크립트 로딩
- html
<script>
var options = {
access_token: 'ACCESS_TOKEN', //TODO use access token, received on previous step
sandbox: true //TODO please do not forget to remove this setting when going live
};
var s = document.createElement('script');
s.type = "text/javascript";
s.async = true;
s.src = "https://static.xsolla.com/embed/paystation/1.0.7/widget.min.js";
s.addEventListener('load', function (e) {
XPayStationWidget.init(options);
}, false);
var head = document.getElementsByTagName('head')[0];
head.appendChild(s);
</script>
<button data-xpaystation-widget-open>Buy Credits</button>
페이 스테이션 임베드는 postMessage를 통해 결제 UI에서 이벤트를 받도록 해줍니다. 이러한 이벤트를 분석 시스템으로 보낼 수 있습니다. 분석 시스템에 이벤트 처리 기능을 설정하려면, 계정 관리자에게 연락하거나 am@xsolla.com로 메일을 보내 주세요.
스크립트는 저희 CDN에 위치해 있으며 이곳 에서 구할 수 있습니다. 스크립트를 개발자 웹 사이트와 연동하려면 이 URL을 사용하십시오. 자세한 내용을 알아보려면 Github 저장소 를 확인해 보십시오.
스크립트 초기화 매개 변수 목록:
매개 변수 | 유형 | 설명 |
---|---|---|
access_token | string | 토큰. API에 의해 수신됩니다. 필수. |
sandbox | boolean | true 를 설정하여 결제 프로세스를 테스트합니다. sandbox-secure.xsolla.com 이 secure.xsolla.com 대신 사용됩니다. |
lightbox | object | 옵션 목록 관련 객체로서, Lightbox 열기에 사용할 수 있습니다(PC 버전) |
lightbox.width | string | Lightbox 프레임 높이입니다.null 인 경우, 페이 스테이션 높이에 따라 달라집니다. 기본값은 null 입니다. |
lightbox.height | string | Lightbox 프레임 높이입니다.null 인 경우, 페이 스테이션 높이에 따라 달라집니다. 기본값은 100% 입니다. |
lightbox.zIndex | integer | 속성에 의해 수직 스태킹 순서가 제어됩니다. 기본값은 1000 입니다. |
lightbox.overlayOpacity | integer | 오버레이의 불투명도(0~1)입니다. 기본값은 .6 입니다. |
lightbox.overlayBackground | string | 오버레이의 배경입니다. 기본 값은 #000000 입니다. |
lightbox.modal | boolean | true 인 경우 Lightbox 프레임을 닫을 수 없습니다. 기본값은 false 입니다. |
lightbox.closeByClick | boolean | true 인 경우 오버레이를 클릭하면 Lightbox가 닫힙니다. 기본값은 true 입니다. |
lightbox.closeByKeyboard | boolean | true 인 경우 ESC 키를 누르면 Lightbox가 닫힙니다. 기본값은 true 입니다. |
lightbox.contentBackground | string | 프레임 배경 색상. 기본값은 #ffffff 입니다. 이러한 색상 변경은 이를 포함하는 라이트박스 설정에만 영향을 미치며 페이 스테이션 iframe 자체에는 영향을 미치지 않음에 유의하시기 바랍니다. |
lightbox.contentMargin | string | 프레임 여백입니다. 기본값은 10px 입니다. |
lightbox.spinner | string | 애니메이션 로딩 표시기의 유형입니다. xsolla 또는 round 일 수 있습니다. 기본값은 xsolla 입니다. |
lightbox.spinnerColor | string | 회전자의 색상입니다. 기본값에 의해 설정되지 않습니다. |
childWindow | object | 페이 스테이션 UI에 포함된 하위 창에 대한 옵션입니다. 모바일 버전에 적합합니다. |
childWindow.target | string | 페이 스테이션을 열 위치를 지정합니다. _blank , _self , _parent 일 수 있습니다. 기본값은 _blank 입니다. |
결제 인터페이스 관련하여 발생하는 이벤트는 스크립트를 통해 추적할 수 있습니다. 인터페이스 이벤트 유형에 따라 다양한 작업을 웹 페이지에서 수행할 수 있습니다.
이벤트 목록:
매개 변수 | 설명 |
---|---|
init | 위젯 초기화 이벤트입니다. |
open | 위젯 개시 이벤트입니다. |
load | 결제 인터페이스(페이 스테이션)가 로딩된 후 이벤트입니다. |
close | 결제 인터페이스(페이 스테이션)가 닫힌 후 이벤트입니다. |
status | 게임유저가 상태 페이지에서 이동한 경우의 이벤트입니다. |
status-invoice | 게임유저가 상태 페이지에서 이동했지만 결제가 완료되지 않은 경우의 이벤트입니다. |
status-delivering | 게임유저가 상태 페이지에서 이동했고, 결제가 완료되었으며, 결제 알림을 보내는 중인 경우의 이벤트입니다. |
status-done | 게임유저가 상태 페이지에서 이동했고 결제가 성공적으로 완료된 경우의 이벤트입니다. |
status-troubled | 게임유저가 상태 페이지에서 이동했지만 결제에 실패한 경우의 이벤트입니다. |
결제 UI 열기를 직접 초기화하려면 https://secure.xsolla.com/paystation3/?access_token=ACCESS_TOKEN
링크를 이용하십시오.
테스트 목적을 위해 다음 URL을 사용하십시오 https://sandbox-secure.xsolla.com/paystation3/?access_token=ACCESS_TOKEN
.
Iframe
직접 다음 메커니즘을 구현해야 합니다.
- 장치 유형(데스크톱 또는 모바일)을 확인하고 장치 유형을 토큰의 settings.ui.version 매개 변수 내에서 전송합니다.
- postMessage를 통해 결제 UI로부터 이벤트를 수신합니다. 이러한 이벤트를 분석 시스템으로 전송할 수 있습니다. 분석 시스템에서 이벤트 처리를 설정하려면 계정 관리자에게 문의하거나 am@xsolla.com으로 메일을 보내 주세요.
Iframe에서 결제 UI를 열려면 https://secure.xsolla.com/paystation3/?access_token=ACCESS_TOKEN
링크를 사용하십시오. 여기에서 ACCESS_TOKEN
은(는) 이전 단계에서 얻은 토큰입니다. 테스트 목적으로는 URL https://sandbox-secure.xsolla.com/paystation3/?access_token=ACCESS_TOKEN
을(를) 사용하십시오.
새 창
새 창에서 결제 UI를 열려면 https://secure.xsolla.com/paystation3/?access_token=ACCESS_TOKEN
링크를 사용하십시오. 여기에서 ACCESS_TOKEN
은(는) 이전 단계에서 얻은 토큰입니다. 테스트 목적으로는 URL https://sandbox-secure.xsolla.com/paystation3/?access_token=ACCESS_TOKEN
을(를) 사용하십시오.
오자 또는 기타 텍스트 오류를 찾으셨나요? 텍스트를 선택하고 컨트롤+엔터를 누르세요.