게임 키 판매 설정
다이텍트 링크, 스토어 UI 혹은 위젯을 통해 게임 키를 판매할 수 있습니다.
아이템 | 판매 방식 |
---|---|
게임(게임 키) 사본 1개. | 다이렉트 링크, 위젯 또는 스토어 인터페이스. 스토어 인터페이스를 통해 판매하는 경우에는 장바구니를 생성하지 않고 빠른 구매 메소드를 사용합니다. |
게임(게임 키) 또는 장바구니에 담긴 여러 게임의 사본 여러 개. | 스토어 인터페이스. 웹사이트 빌더를 사용하거나 IGS API를 연동합니다. |
인증된 사용자와 인증되지 않은 사용자에게 게임 키를 판매할 수 있습니다.
인증을 통해 할 수 있는 작업:
- 사용자에 대한 게임 키 판매 제한 설정
- 상품 카탈로그 및 프로모션 제안 개인 설정
- 자격 시스템 사용
- 엑솔라 결제 인터페이스에 사용자 데이터 저장
로그인 상품 또는 자체 인증 시스템을 사용하여 사용자를 인증할 수 있습니다. 자세한 설정 정보는 이 지침에서 확인할 수 있습니다.
다이렉트 링크로 판매
결제 UI를 열기 위한 링크:
- curl
https://purchase.xsolla.com/pages/buy?type={YOUR-ITEM-TYPE}&project_id={YOUR_PROJECT_ID}&sku={YOUR-ITEM-SKU}
다이렉트 링크를 통해 실제 통화로 게임 키를 구매하는 기능은 엑솔라와 라이선스 계약을 체결한 후에만 가능합니다. 이렇게 하려면 관리자 페이지에서 계약 및 세금 > 계약 섹션으로 이동하여 계약 양식을 작성한 후 확인을 기다립니다. 계약을 검토하는 데에는 영업일 기준 최대 3일이 소요될 수 있습니다.
결제 테스트를 위해 링크에 mode=sandbox
매개변수를 추가하고 테스트 환경을 사용할 수 있습니다.
이 링크에 추가해야 하는 데이터:
YOUR-ITEM-TYPE
— 아이템 유형:game
— 게임.game_key
— 특정 플랫폼의 게임.bundle
— 번들.
YOUR-PROJECT-ID
— 관리자 페이지의 프로젝트 설정 > 일반 설정 > 프로젝트 ID 섹션에서 확인할 수 있는 프로젝트 ID.YOUR-ITEM-SKU
— 게임 키 패키지 SKU. 특정 플랫폼에서 게임을 판매하려면 게임 목록 가져오기(일반적으로 이 SKU는unit_name_drm_sku
와 같음)를 사용하여 SKU를 가져옵니다.
- 결제 UI 스타일: 테마(다크 혹은 기본 라이트 테마), 크기 및 기타 매개변수. URL에서
ui_settings
매개변수를 지정하고 Base64 인코딩을 값으로 가지는settings.ui
JSON-개체를 전달합니다. UI 설정이 된 URL 예시:
- curl
https://purchase.xsolla.com/pages/buy?type={YOUR-ITEM-TYPE}&project_id={YOUR_PROJECT_ID}&sku={YOUR-ITEM-SKU}&ui_settings=ewoJCQkic2l6ZSI6ICJzbWFsbCIsCgkJCSJ0aGVtZSI6ICJkYXJrIgoJCX0=
- 사용자 데이터 전달을 위한 토큰. 인증된 사용자에게만 게임 키를 판매할 때 사용합니다. 이 토큰은 인증 메소드에 따라 달라집니다. 토큰 URL 예시:
- curl
https://purchase.xsolla.com/pages/buy?type={YOUR-ITEM-TYPE}&project_id={YOUR_PROJECT_ID}&sku={YOUR_ITEM_SKU}&xsolla_login_token={ACCESS_TOKEN}
- 결제 테스트용
mode=sandbox
매개변수입니다. 은행 카드 테스트 를 사용하여 결제를 완료할 수 있습니다.
- 테스트용 URL 예시:
- curl
https://purchase.xsolla.com/pages/buy?type={YOUR-ITEM-TYPE}&project_id={YOUR_PROJECT_ID}&sku={YOUR-ITEM-SKU}&mode=sandbox
스토어 UI를 통해 판매
스토어 인터페이스를 통해 게임 키를 판매할 수 있습니다. 스토어 생성 방법:
IGS API를 사용하여 게임 키 패키지를 판매하는 방법:
- 카탈로그를 표시하려면 게임 목록 가져오기 메소드를 사용합니다.
게임 키 구매 구현 방법:
- 하나의 키만 빠르게 구매하는 경우 지정된 아이템으로 주문 생성 메소드를 사용합니다. 이 메소드에 대한 응답으로 결제 인터페이스를 여는 데 사용해야 하는 토큰을 받게 됩니다.
- 여러 개의 게임 키를 구매하는 경우 다음과 같은 관리 메소드를 사용합니다.
- 현재 장바구니의 장바구니 아이템 업데이트는 게임 키를 장바구니에 추가합니다.
- 현재 사용자의 장바구니 가져오기는 장바구니에서 게임 키 목록을 가져옵니다.
- 현재 장바구니의 모든 아이템으로 주문 생성은 장바구니에 있는 게임 키의 비용을 지불합니다.이 메소드에 대한 응답으로 결제 인터페이스를 여는 데 사용해야 하는 토큰을 받게 됩니다.
items.unit_items.sku
매개 변수 값을 게임 목록 가져오기로 전달합니다.위젯으로 판매
페이지에 위젯을 추가하여 게임 키를 판매하고 사용자 정의할 수 있습니다. 위젯 코드를 복사하려면 관리자 페이지에서 키 패키지 생성한 후 위젯 사용자 정의 섹션으로 이동합니다.
게임이 단일 플랫폼에서 판매되는 경우 해당 플랫폼에 맞는 게임 가격이 위젯에 표시됩니다.
예시: 지금 $10에 구매하세요.
게임이 여러 플랫폼에서 판매되는 경우 플랫폼 중에서 가장 낮은 가격이 위젯에 표시됩니다.
예시: 10달러부터 구입할 수 있어요.
주문 생성 창에서 사용자가 모든 플랫폼의 가격을 확인하고 선택할 수 있습니다.
또한 drm 매개변수에서 플랫폼 SKU를 지정하여 위젯에 특정 플랫폼의 가격을 표시할 수도 있습니다.
위젯 코드 예시:
<div id="xsolla-buy-button-widget"></div>
<script>
var options = {
project_id: "101010",
sku: "my_key",
user: {
auth: "9qs9VyCIQQXBlzJQcfETIKWZDvhi4Sz1"
},
drm: "steam",
item_type: "unit",
api_settings: {
sandbox: true,
},
widget_ui: {
target_element: "#xsolla-buy-button-widget",
theme: {
foreground: "green",
background: "light"
},
},
payment_widget_ui: {
lightbox: {
height: '700px',
spinner: 'round'
}
}
};
var s = document.createElement('script');
s.type = "text/javascript";
s.async = true;
s.src = "https://cdn.xsolla.net/embed/buy-button/3.1.8/widget.min.js";
s.addEventListener('load', function (e) {
var widgetInstance = XBuyButtonWidget.create(options);
}, false);
var head = document.getElementsByTagName('head')[0];
head.appendChild(s);
</script>
<style>
#xsolla-buy-button-widget {
/* place code for button positioning here */
margin: 10px
}
/* Styles the button itself */
.x-buy-button-widget.x-buy-button-widget__tiny
.x-buy-button-widget-payment-button {
background-color: #ff005b;
color: black;
}
</style>
위젯 매개변수
매개 변수 | 유형 | 설명 |
---|---|---|
project_id | integer | 게임 키 또는 게임 키가 포함된 번들, 인게임 아이템 또는 아이템이 포함된 번들이 업로드되는 프로젝트의 ID입니다. |
item_type | string | 아이템 유형. virtual_good , virtual_currency , game_key , unit 값을 사용할 수 있음. unit 유형은 게임을 배포할 플랫폼이 여러 개일 때 사용. |
sku | string | 고유한 아이템 ID. |
drm | string | 배포 플랫폼 SKU(예: steam ). 특정 플랫폼의 가격 표시 허용. |
api_settings | object | 환경 및 호스트 구성 설정:
|
user | object | 사용자 데이터가 있는 개체입니다. |
user.auth | string | 사용자 인증 토큰: JSON 웹 토큰 또는 페이 스테이션 액세스 토큰. |
user.locale | string | 사용자 로케일. 버튼 텍스트 및 결제 인터페이스의 언어를 결정. ISO_639-1에 해당하는 두 글자 언어 코드 사용. |
widget_ui.theme | object | 위젯의 색상 테마로, 위젯의 모양을 결정. {foreground:[‘blue’,‘red’,‘green’,‘gold’], background:[’light’,‘dark’]} 의 값을 사용할 수 있음 |
widget_ui.template | string | 템플릿. 사용 가능한 값:
|
widget_ui.target_element | string | 위젯이 렌더링되어야 하는 페이지의 구성 요소(jQuery 선택기를 사용해야 함, 예: #widget-example ). 필수 |
결제 인터페이스의 모양을 결정하는 매개변수
매개 변수 | 유형 | 설명 |
---|---|---|
payment_ui | object | 결제 인터페이스 표시 매개변수. |
payment_widget_ui | object | 결제 인터페이스의 모양을 결정하는 매개변수가 있는 개체. |
payment_widget_ui.lightbox | object | 결제 인터페이스가 열리는 모달 창에 대한 옵션이 있는 개체. |
payment_widget_ui.lightbox.width | string | Lightbox 프레임 높이입니다. null 인 경우, 페이 스테이션 높이에 따라 달라집니다. 기본값은 null 입니다. |
payment_widget_ui.lightbox.height | string | Lightbox 프레임 높이입니다.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.contentBackground | string | 프레임 배경 색상. 기본값은 #ffffff 입니다. 이러한 색상 변경은 이를 포함하는 라이트박스 설정에만 영향을 미치며 페이 스테이션 iframe 자체에는 영향을 미치지 않음에 유의하시기 바랍니다. |
payment_widget_ui.lightbox.spinner | string | 애니메이션 로딩 표시기의 유형입니다. xsolla 또는 round 일 수 있습니다. 기본값은 xsolla 입니다. |
payment_widget_ui.lightbox.spinnerColor | string | 회전자의 색상입니다. 기본값에 의해 설정되지 않습니다. |
payment_widget_ui.childWindow | object | 결제 인터페이스가 열리는 하위 창에 대한 설정. 모바일 버전에서 작동. |
payment_widget_ui.childWindow.target | string | 하위 창이 열릴 위치를 결정하는 속성. _blank , _self , _parent 값을 사용할 수 있음. 기본값 - _blank . |
위젯 메소드
var widgetInstance = XBuyButtonWidget.create(options)
- 위젯 인스턴스를 생성하고 페이지에 렌더링합니다.widgetInstance.on(event, handler)
- 이벤트에 대한 이벤트 핸들러 함수를 위젯에 첨부합니다.event (string)
- 이벤트 유형입니다.handler (function)
- 이벤트가 트리거될 때 실행하는 함수입니다.
widgetInstance.off(event, handler)
- 이벤트 핸들러를 제거합니다.event (string)
- 이벤트 유형입니다.handler (function)
- 이벤트에 대해 이전에 첨부된 핸들러 함수입니다.
이벤트 목록:
매개 변수 | 설명 |
---|---|
init | 위젯 초기화 이벤트입니다. |
open | 위젯 개시 이벤트입니다. |
load | 결제 인터페이스(페이 스테이션)가 로딩된 후 이벤트입니다. |
close | 결제 인터페이스(페이 스테이션)가 닫힌 후 이벤트입니다. |
status | 게임유저가 상태 페이지에서 이동한 경우의 이벤트입니다. |
status-invoice | 게임유저가 상태 페이지에서 이동했지만 결제가 완료되지 않은 경우의 이벤트입니다. |
status-delivering | 게임유저가 상태 페이지에서 이동했고, 결제가 완료되었으며, 결제 알림을 보내는 중인 경우의 이벤트입니다. |
status-done | 게임유저가 상태 페이지에서 이동했고 결제가 성공적으로 완료된 경우의 이벤트입니다. |
status-troubled | 게임유저가 상태 페이지에서 이동했지만 결제에 실패한 경우의 이벤트입니다. |
XBuyButtonWidget.eventTypes
개체를 사용하여 이벤트 목록에 액세스할 수 있습니다.
버튼 사용자 정의
- 관리자 페이지을 엽니다.
- 사이드 메뉴에서 스토어를 클릭합니다.
- 게임 키 창에서 구성을 클릭합니다.
- 게임 키를 선택한 후 위젯 사용자 정의 탭으로 이동합니다.
- 사용자 정의 블록에서 배경 색상을 선택합니다.
background
매개변수가 값으로 빈 문자열을 갖도록 코드에서 theme
개체를 수정할 수 있습니다.- 페이지에 위젯 코드를 추가하면 상속한 스타일이 포함됩니다. 스타일을 다시 정의하려면 아래 스타일을 추가하세요.
script
태그 아래의 style
태그에 이 항목이 추가되었습니다.- css
/* This should be used for button positioning but note this technically repositions the entire widget */
#xsolla-buy-button-widget {
/* place code for button positioning here */
}
/* Styles the button itself */
.x-buy-button-widget.x-buy-button-widget__tiny
.x-buy-button-widget-payment-button {
background-color: #ff005b;
color: black;
}
/* Button on hover */
.x-buy-button-widget.x-buy-button-widget__tiny
.x-buy-button-widget-payment-button:hover {
background-color: #ff005b;
}
/* The following are style overrides to leave you with just the button */
/* space immediately surrounding button */
.x-buy-button-widget-button-block.x-buy-button-widget-button-block__light {
background-color: white;
}
/* space above button (including game title area) */
.x-buy-button-widget.x-buy-button-widget__tiny
.x-buy-button-widget-game-logo {
height: 200px;
background-image: none !important;
background-color: white;
}
/* Game title (located right above button) */
.x-buy-button-widget-game-name.x-buy-button-widget-game-name__light {
display: none !important;
}
- 위의 ID/클래스 이름과 코드 스니펫은 복사한 위젯 코드(5단계의 이미지)와 함께 사용됩니다. 따라서 복사한 위젯 코드를 구현하는 것이 중요합니다.
- 위의 코드를 그대로 사용하거나 시나리오에 따라 코드를 수정할 수 있습니다. 코드 주석(1, 3, 5, 11, 16, 18, 22, 29행)은 각 CSS 규칙의 대상을 결정하고 향후 스타일을 설정하는 데 도움이 됩니다. 예를 들어, 전체 위젯이 아니라 버튼만 변경하려는 경우 아래에서 색상 설정이
white
인 20행과 27행의 페이지의 배경 색상 설정을 대체해야 합니다.
여러 버튼 또는 SKU를 생성하는 방법
Pay2Play 위젯을 사용하여 이를 수행하는 방법에 대한 예제 코드는 엑솔라 Pay2Play 위젯 간단 통합 4 버튼을 참조하세요.
구조는 직접 판매 위젯 코드와 유사합니다. 마이그레이션 예제:
- javascript
<div id="xsolla-buy-button-widget"></div>
<div id="xsolla-buy-button-widget-2"></div>
<script>
var options = {
project_id: "191204",
sku: "789",
item_type: "unit",
api_settings: {
sandbox: false,
},
widget_ui: {
target_element: "#xsolla-buy-button-widget",
theme: {
foreground: "gold",
background: "",
},
},
payment_widget_ui: {
lightbox: {
height: "700px",
spinner: "round",
},
},
};
// options for second buy button - note the different SKU and target_element
var options2 = {
project_id: "191204",
sku: "123",
item_type: "unit",
api_settings: {
sandbox: false,
},
widget_ui: {
target_element: "#xsolla-buy-button-widget-2",
theme: {
foreground: "gold",
background: "",
},
},
payment_widget_ui: {
lightbox: {
height: "700px",
spinner: "round",
},
},
};
var s = document.createElement("script");
s.type = "text/javascript";
s.async = true;
s.src = "https://cdn.xsolla.net/embed/buy-button/3.1.4/widget.min.js";
// one event listener per widget instance. repeat for more buttons, passing in different SKUs
s.addEventListener(
"load",
function (e) {
var widgetInstance = XBuyButtonWidget.create(options);
},
false
);
s.addEventListener(
"load",
function (e) {
var widgetInstance2 = XBuyButtonWidget.create(options2);
},
false
);
var head = document.getElementsByTagName("head")[0];
head.appendChild(s);
</script>
- 1행과 2행 — 버튼 당 하나의
div
. 각각 고유한 ID 부여. - 26행부터 두 번째 버튼의 옵션 보유(
options2
개체에서 레이아웃 설정됨). 각 구매 버튼에 대해 위의 버튼과 같은options
세트가 필요합니다.sku
(28행)와target_element
(34행, 2행의div
을 대상으로 함)의 차이점에 주의해야 합니다.
오자 또는 기타 텍스트 오류를 찾으셨나요? 텍스트를 선택하고 컨트롤+엔터를 누르세요.