결제 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 버전).
payment_widget_ui.lightbox.width
stringLightbox 프레임 높이입니다. null인 경우, 페이 스테이션 높이에 따라 달라집니다. 기본값은 null입니다.
payment_widget_ui.lightbox.height
stringLightbox 프레임 높이입니다.null인 경우, 페이 스테이션 높이에 따라 달라집니다. 기본값은 100%입니다.
payment_widget_ui.lightbox.zIndex
integer속성에 의해 수직 스태킹 순서가 제어됩니다. 기본값은 1000입니다.
payment_widget_ui.lightbox.overlayOpacity
integer위젯 배경의 불투명도입니다(0 - 완전히 투명함, 1 - 완전히 불투명함). 기본값은 60%입니다(.6).
payment_widget_ui.lightbox.overlayBackground
string오버레이의 배경입니다. 기본 값은 #000000입니다.
payment_widget_ui.lightbox.modal
booleantrue인 경우 Lightbox 프레임을 닫을 수 없습니다. 기본값은 false입니다.
lightbox.closeByClick
booleantrue인 경우 오버레이를 클릭하면 Lightbox가 닫힙니다. 기본값은 true입니다.
lightbox.closeByKeyboard
booleantrue인 경우 ESC 키를 누르면 Lightbox가 닫힙니다. 기본값은 true입니다.
payment_widget_ui.lightbox.contentBackground
string프레임 배경 색상. 기본값은 #ffffff입니다. 이러한 색상 변경은 이를 포함하는 라이트박스 설정에만 영향을 미치며 페이 스테이션 iframe 자체에는 영향을 미치지 않음에 유의하시기 바랍니다.
payment_widget_ui.lightbox.contentMargin
string프레임 여백입니다. 기본값은 10px입니다.
payment_widget_ui.lightbox.spinner
string애니메이션 로딩 표시기의 유형입니다. xsolla 또는 round일 수 있습니다. 기본값은 xsolla입니다.
payment_widget_ui.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일

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

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