구독 UI 열기

결제 UI를 열 수 있는 세 가지 방법:

Note
샌드박스 모드에서 결제 UI를 열려면 다음 URL을 사용합니다 https://sandbox-secure.xsolla.com/.

Pay Station Embed

Notice
이 방식의 결제 UI 열기는 게임 키 판매를 지원하지 않습니다. 게임 키를 판매하려면 다음 지침을 따르세요.

예시: 동기화 스크립트 로딩

Copy
Full screen
Small screen
<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
booleanTrue로 설정하여 결제 프로세스를 테스트합니다. sandbox-secure.xsolla.comsecure.xsolla.com 대신 사용됩니다.
lightbox
object옵션 목록 관련 객체로서, Lightbox 열기에 사용할 수 있습니다(PC 버전)
lightbox.width
stringLightbox 프레임의 너비입니다. null인 경우, 페이 스테이션 너비에 따라 달라집니다. 기본값은 null입니다.
lightbox.height
stringLightbox 프레임 높이입니다. null인 경우, 페이 스테이션 높이에 따라 달라집니다. 기본값은 100%입니다.
lightbox.zIndex
integer속성에 의해 수직 스태킹 순서가 제어됩니다. 기본값은 1000입니다.
lightbox.overlayOpacity
integer오버레이의 불투명도(0~1)입니다. 기본값은 .6입니다.
lightbox.overlayBackground
string오버레이의 배경입니다. 기본 값은 #000000입니다.
lightbox.modal
booleantrue인 경우 Lightbox 프레임을 닫을 수 없습니다. 기본값은 false입니다.
lightbox.closeByClick
booleantrue인 경우 오버레이를 클릭하면 Lightbox가 닫힙니다. 기본값은 true입니다.
lightbox.closeByKeyboard
booleantrue인 경우 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 링크를 이용하십시오.

Note
지불 UI를 여는 경우에만 https:// 형식의 링크를 사용해야 합니다.

테스트 목적을 위해 다음 URL을 사용하십시오 https://sandbox-secure.xsolla.com/paystation3/?access_token=ACCESS_TOKEN.

Notice
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.

이 기사가 도움이 되었나요?
감사합니다!
개선해야 할 점이 있을까요? 메시지
유감입니다
이 기사가 도움이 안 된 이유를 설명해 주세요. 메시지
의견을 보내 주셔서 감사드립니다!
메시지를 검토한 후 사용자 경험 향상에 사용하겠습니다.
이 페이지 평가
이 페이지 평가
개선해야 할 점이 있을까요?

답하기 원하지 않습니다

의견을 보내 주셔서 감사드립니다!
마지막 업데이트: 2021년 9월 1일

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

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