결제 UI를 여는 방법

알림

엑솔라와 계약을 체결하기 전에 결제 프로세스 테스트는 샌드박스 모드에서만 가능합니다. 오류가 있는 경우 해당 설명을 참조하세요.

샌드박스 모드에서 결제 UI를 열려면 https://sandbox-secure.xsolla.com/paystation4/?token=ACCESS_TOKEN URL을 사용합니다. 여기에서 ACCESS_TOKEN이전 단계에서 얻은 토큰입니다.

새 창

새 창에서 결제 UI를 열려면 https://sandbox-secure.xsolla.com/paystation4/?token=TOKEN URL을 사용합니다. 여기서 TOKEN는 수령한 토큰입니다.

알림
위의 링크를 사용하여 샌드박스 모드에서 결제 UI를 엽니다. 프로젝트 런칭 후에는 https://secure.xsolla.com/paystation4/?token=TOKEN URL을 사용합니다.
다른 옵션을 사용하여 결제 UI를 열 수도 있습니다.
  • 페이 스테이션 임베드 사용. 제한 사항: 인게임 브라우저(WebView)에서 여는 경우 문제가 발생할 수 있습니다.
  • iFrame 사용. 제한 사항: 인게임 브라우저(WebView)와 애플리케이션의 모바일 버전에서 여는 경우 문제가 발생할 수 있습니다.

페이 스테이션 임베드

주의
이 방식의 결제 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에서 이벤트를 받도록 해줍니다. 이러한 이벤트를 분석 시스템으로 보낼 수 있습니다. 분석 시스템에 이벤트 처리 기능을 설정하려면, 고객 성공 매니저에게 연락하거나 csm@xsolla.com으로 이메일을 보내주세요.

엑솔라 팀에서 웹사이트와의 결제 UI 통합을 간소화하는 위젯을 만들었습니다. 위젯 스크립트는 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 - 완전히 불투명함). 기본값은 60%입니다(.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/paystation4/?token=TOKEN링크를 사용하세요.
알림
결제 UI를 여는 경우에만 https:// 형식의 링크를 사용해야 합니다.
테스트하려면 https://sandbox-secure.xsolla.com/paystation4/?token=TOKEN URL을 사용하세요.
주의
access_token 매개변수에 비공개 사용자 데이터가 포함되어 있습니다. 이 매개변수를 가져오는 경우 서버 간 통신을 사용해야 합니다.

Iframe

Iframe에서 결제 UI를 여는 방법:

  1. 결제 UI에서 이벤트를 수신하는 postMessage 메커니즘을 구현합니다.
  2. https://sandbox-secure.xsolla.com/paystation4/?token=TOKEN 링크로 결제 UI를 엽니다. 여기서 TOKEN는 수신한 토큰입니다.

잠재적 문제: 일부 결제 시스템에서 요구하는 결제 확인 코드 복사 버튼이 iframe에서 결제 UI를 열 때 표시되지 않는 경우 iframe에 allow=“clipboard-read; clipboard-write; payment” 특성을 전달하세요.

:

Copy
Full screen
Small screen
<iframe
  src="https://sandbox-secure.xsolla.com/paystation4/?token=TOKEN"
  width="800"
  height="700"
  allow="clipboard-read; clipboard-write; payment"
></iframe>
이 기사가 도움이 되었나요?
감사합니다!
개선해야 할 점이 있을까요? 메시지
유감입니다
이 기사가 도움이 안 된 이유를 설명해 주세요. 메시지
의견을 보내 주셔서 감사드립니다!
메시지를 검토한 후 사용자 경험 향상에 사용하겠습니다.

계속 읽기

마지막 업데이트: 2024년 1월 22일

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

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