카탈로그 UI 생성하기

콘텐츠

카탈로그 UI를 생성하는 3가지 방법:

자체 인터페이스 사용하기

자체 인터페이스에서 디렉터리를 사용할 경우 사용 가능:

알림
SDK 라이브러리를 사용하여 자체 인터페이스에서 카탈로그를 구현할 수도 있습니다. 이미 만들어진 라이브러리는 엑솔라 API 작업에 즉시 사용 가능한 데이터 구조 및 방법을 제공하기에 엑솔라 제품과 프로젝트를 쉽게 통합할 수 있습니다.

엑솔라 로그인 및 클라이언트 측 API 호출

카탈로그를 구현하는 방법:

  1. 클라이언트 메소드를 사용하여 구독 플랜 목록 가져오기:
  2. 인터페이스에서 수신한 플랜 목록 표시를 구현합니다.

제품별로 구독 플랜을 가져오는 클라이언트 측 메소드

애플리케이션의 클라이언트 측에서 HTTP GET 요청을 사용하여 플랜 목록 가져오기를 구현하는 방법: https://subscriptions.xsolla.com​/api/user/v1/projects/{project_id}/products/{​​productId}/plans를 사용합니다.

요청에 Authorization: Bearer <client_user_jwt> 헤더를 포함해야 합니다. 여기서 <client_user_jwt>는 사용자의 JSON 웹 토큰(JWT)으로 Base64 표준에 따라 인코딩한 고유한 토큰입니다. 토큰을 받는 방법:

경로 매개변수로 지정하기:

  • projectId - 프로젝트 ID입니다. 이 매개 변수는 게시자 계정의 프로젝트 이름 옆에서 확인할 수 있습니다.
  • productID - 구독 기반 제품 ID입니다. 이 ID를 가져오려면 계정 관리자에게 문의해야 합니다.

쿼리 매개변수로 지정하기:

매개 변수유형설명
plan_id
array of integers요금제 ID입니다.
plan_external_id
array of strings플랜의 외부 ID입니다. 구독 > 구독 플랜 > 내 플랜 섹션의 게시자 계정이나 플랜 가져오기 API 호출을 통해 확인할 수 있습니다.
limit
integer페이지 요소 개수 한도입니다. 기본적으로 15개의 아이템이 표시됩니다.
offset
integer목록이 생성된 요소의 개수입니다. 개수는 기본적으로 0부터 세기 시작합니다.
locale
string두 글자의 소문자로 된 인터페이스 언어입니다. ISO 639-1 값을 허용합니다. 이 매개변수를 전달하지 않으면 사용자의 IP 주소로 언어를 결정합니다.
country
stringISO 3166-1 alpha-2에 따라 사용자의 국가를 식별하는 데 사용하는 두 글자 코드입니다. 이 매개변수는 로케일 및 통화 선택에 영향을 미칩니다. 이 매개변수를 전달하지 않으면 사용자의 IP 주소로 국가를 결정합니다.
Copy
Full screen
Small screen

    curl -X 'GET' \
'https://subscriptions.xsolla.com​/api/user/v1/projects/{project_id}/products/{​​productId}/plans?country=RU  ' \
  -H 'accept: application/json' \
  -H 'Authorization: Bearer client_user_jwt'

    Copy
    Full screen
    Small screen
    • js

    {
  "items": [
    {
      "plan_id": 54321,
      "plan_external_id": "PlanExternalId",
      "plan_group_id": "TestGroupId",
      "plan_type": "all",
      "plan_name": "Localized plan name",
      "plan_description": "Localized plan description",
      "plan_start_date": "2021-04-11T13:51:02+03:00",
      "plan_end_date": "2031-04-11T13:51:02+03:00",
      "trial_period": 7,
      "period": {
        "value": 1,
        "unit": "month"
      },
      "charge": {
        "amount": 4.99,
        "setup_fee": 0.99,
        "currency": "USD"
      },
      "promotion": {
        "promotion_charge_amount": 3.99,
        "promotion_remaining_charges": 3
      }
    }
  ],
  "has_more": false
}

    플랜 목록을 가져오는 클라이언트 측 메소드

    애플리케이션의 클라이언트 측에서 HTTP GET 요청을 사용하여 플랜 목록 가져오기를 구현하는 방법: https://subscriptions.xsolla.com​/api/user/v1/projects/{project_id}/plans를 사용합니다.

    요청에 Authorization: Bearer <client_user_jwt> 헤더를 포함해야 합니다. 여기서 <client_user_jwt>는 사용자의 JSON 웹 토큰(JWT)으로 Base64 표준에 따라 인코딩한 고유한 토큰입니다. 토큰을 받는 방법:

    프로젝트 ID를 projectId 경로 매개변수로 지정합니다. 이 매개 변수는 게시자 계정의 프로젝트 이름 옆에서 찾을 수 있습니다.

    쿼리 매개변수로 지정하기:

    매개 변수유형설명
    plan_id
    		array of integers요금제 ID입니다.
    plan_external_id
    		array of strings플랜의 외부 ID입니다. 구독 > 구독 플랜 > 내 플랜 섹션의 게시자 계정이나 플랜 가져오기 API 호출을 통해 확인할 수 있습니다.
    limit
    		integer페이지 요소 개수 한도입니다. 기본적으로 15개의 아이템이 표시됩니다.
    offset
    		integer목록이 생성된 요소의 개수입니다. 개수는 기본적으로 0부터 세기 시작합니다.
    locale
    		string두 글자의 소문자로 된 인터페이스 언어입니다. ISO 639-1 값을 허용합니다. 이 매개변수를 전달하지 않으면 사용자의 IP 주소로 언어를 결정합니다.
    country
    		stringISO 3166-1 alpha-2에 따라 사용자의 국가를 식별하는 데 사용하는 두 글자 코드입니다. 이 매개변수는 로케일 및 통화 선택에 영향을 미칩니다. 이 매개변수를 전달하지 않으면 사용자의 IP 주소로 국가를 결정합니다.
    Copy
    Full screen
    Small screen

      curl -X 'GET' \
'https://subscriptions.xsolla.com​/api/user/v1/projects/{project_id}/plans?country=RU  ' \
  -H 'accept: application/json' \
  -H 'Authorization: Bearer client_user_jwt'

      Copy
      Full screen
      Small screen
      • js

      {
  "items": [
    {
      "plan_id": 54321,
      "plan_external_id": "PlanExternalId",
      "plan_group_id": "TestGroupId",
      "plan_type": "all",
      "plan_name": "Localized plan name",
      "plan_description": "Localized plan description",
      "plan_start_date": "2021-04-11T13:51:02+03:00",
      "plan_end_date": "2031-04-11T13:51:02+03:00",
      "trial_period": 7,
      "period": {
        "value": 1,
        "unit": "month"
      },
      "charge": {
        "amount": 4.99,
        "setup_fee": 0.99,
        "currency": "USD"
      },
      "promotion": {
        "promotion_charge_amount": 3.99,
        "promotion_remaining_charges": 3
      }
    }
  ],
  "has_more": false
}

      엑솔라 페이 스테이션 사용하기

      결제 UI에서 카탈로그를 생성하는 방식은 프로젝트의 인증 설정에 따라 다릅니다.

      자체 인증 시스템

      애플리케이션에서 자체 인증 시스템을 사용하는 경우:

      1. 서버 토큰 생성하기 API 호출을 통해 토큰 가져오기를 구현합니다. 요청에서 user.id 및 user.email 매개변수의 사용자 정보를 전달합니다.
      2. 페이 스테이션 임베드, iframe 혹은 새 창에서 결제 UI 열기를 구현합니다.
      Copy
      Full screen
      Small screen
      • js

      {
    "user": {
        "id": {
            "value": "1234567",
            "hidden": true
        }
    },
    "settings": {
        "project_id": 123456,
        "language": "en",
        "currency": "USD"
    }
}

      엑솔라 로그인

      프로젝트에서 엑솔라 로그인을 설정한 경우:

      애플리케이션의 클라이언트 측에서 HTTP POST 요청을 사용하여 결제 UI 열기를 구현: https://subscriptions.xsolla.com​/api/user/v1/projects/{project_id}/subscriptions/buy

      요청에 Authorization: Bearer <client_user_jwt> 헤더를 포함해야 합니다. 여기서 <client_user_jwt>는 사용자의 JSON 웹 토큰(JWT)으로 Base64 표준에 따라 인코딩한 고유한 토큰입니다. 토큰을 가져오는 방법:

      프로젝트 ID를 projectId 경로 매개변수로 지정합니다. 이 매개 변수는 게시자 계정의 프로젝트 이름 옆에서 찾을 수 있습니다.

      country를 쿼리 매개변수로 지정합니다. ISO 3166-1 alpha-2에 따라 사용자의 국가를 두 글자 코드로 지정합니다. 이러한 설정은 로케일과 통화 선택에 영향을 줍니다. 이 매개변수를 전달하지 않으면 사용자의 IP 주소로 국가를 결정합니다.

      요청 본문 매개변수:

      매개 변수유형설명
      plan_external_id
      		string필수입니다. 구독 플랜의 외부 ID입니다. 게시자 계정 > 구독 > 구독 플랜 섹션에서 확인할 수 있습니다.
      settings
      		object사용자 지정 프로젝트 설정와 관련된 객체입니다.
      settings.ui
      		object인터페이스 설정입니다(객체).
      settings.ui.size
      		string결제 UI의 크기입니다. 가능한 크기:
      • small: 결제 UI의 가능한 최소 크기입니다. 창 크기가 엄격히 제한되는 경우 이 값을 사용합니다(크기: 620 x 630픽셀).
      • medium: 결제 UI의 권장 크기입니다. 이 값을 사용하여 라이트박스에 결제 UI를 표시합니다(크기: 740 x 760픽셀).
      • large: 새 창 또는 탭에 결제 UI 표시를 위한 최적의 크기입니다(크기: 820 x 840픽셀).
      settings.ui.theme
      		string결제 UI 테마. default 또는 default_dark일 수 있습니다.
      settings.ui.version
      		string장치 유형입니다. desktop(기본값) 또는 mobile이 가능합니다.
      settings.ui.desktop
      		object데스크톱 버전의 인터페이스 설정입니다(객체).
      settings.ui.desktop.header
      		object헤더 설정 데이터와 관련된 값입니다.
      settings.ui.desktop.header.close_button
      		boolean페이 스테이션 데스크톱에 닫기 버튼을 표시할지를 설정합니다. 이 버튼은 페이 스테이션을 종료하고 settings.return_url 매개 변수에 지정된 URL로 사용자를 리디렉션합니다. 기본값은 false입니다.
      settings.ui.desktop.header.is_visible
      		boolean결제 UI에 헤더가 표시되는지 여부를 나타냅니다.
      settings.ui.desktop.header.is_visible.type
      		string헤더의 외관입니다. compact(이 경우 게임 이름과 사용자 ID는 헤더에 표시하지 않음) 혹은 normal일 수 있습니다.
      booleantrue일 경우, 로고가 헤더에 표시됩니다(먼저 계정 관리자에게 이미지 파일을 제공하세요).
      settings.ui.desktop.header.visible_name
      		boolean프로젝트 이름이 헤더에 표시되는지 여부를 나타냅니다.
      settings.ui.desktop.header.type
      		string헤더를 표시하는 설정 방식입니다. compact(프로젝트 이름 및 사용자 ID 표지 안 함) 또는 normal (기본값)을 설정할 수 있습니다.
      settings.ui.mobile.mode
      		string사용자는 오직 저장된 결제 방법을 사용해서 결제할 수 있습니다. saved_accounts일 수 있습니다.
      boolean모바일 버전의 결제 UI에서 바닥글을 표시하거나 숨길지 여부입니다.
      settings.ui.mobile.header.close_button
      		boolean페이 스테이션 모바일에 닫기 버튼을 표시할지를 설정합니다. 이 버튼은 페이 스테이션을 종료하고 settings.return_url 매개 변수에 지정된 URL로 사용자를 리디렉션합니다. 기본값은 false입니다.
      settings.ui.license_url
      		stringEULA의 링크입니다.
      settings.ui.mode
      		string페이 스테이션의 인터페이스 모드. user_account만 가능합니다. 헤더는 계정 탐색 메뉴만 포함할 수 있으며 사용자는 제품을 선택하거나 결제를 할 수 없습니다. 이 모드는 데스크톱에서만 사용 가능합니다.
      settings.ui.user_account
      		object사용자 계정에 관한 데이터가 담긴 객체.
      settings.ui.user_account.history
      		object기록의 하위 메뉴입니다.
      settings.ui.user_account.history.enable
      		integer결제 UI의 드롭다운 메뉴에 섹션을 표시할지 여부입니다. true 혹은 false일 수 있습니다. 매개변수를 전달하지 않으면 섹션이 표시되지 않습니다.
      settings.ui.user_account.history.order
      		integer결제 인터페이스의 드롭다운 메뉴에서 섹션의 위치입니다.
      settings.ui.user_account.info
      		object내 계정 페이지입니다.
      settings.ui.user_account.info.order
      		integer결제 UI의 드롭다운 메뉴에서 섹션의 위치입니다.
      settings.ui.user_account.info.enable
      		boolean결제 UI의 드롭다운 메뉴에 섹션을 표시할지 여부입니다. true 혹은 false일 수 있습니다. 매개변수를 전달하지 않으면 섹션이 표시되지 않습니다.
      settings.ui.user_account.payment_accounts
      		object내 결제 계정 페이지입니다.
      settings.ui.user_account.payment_accounts.order
      		integer결제 UI의 드롭다운 메뉴에서 섹션의 위치입니다.
      settings.ui.user_account.payment_accounts.enable
      		boolean하위 메뉴를 표시할지 여부입니다. true 혹은 false일 수 있습니다. 매개변수를 전달하지 않으면 섹션을 표시하지 않습니다.
      settings.ui.user_account.subscriptions
      		object구독 관리 페이지입니다.
      settings.ui.user_account.subscriptions.enable
      		boolean하위 메뉴를 표시할지 여부입니다. true 혹은 false일 수 있습니다. 매개변수를 전달하지 않으면 섹션을 표시하지 않습니다.
      settings.ui.user_account.subscriptions.order
      		integer결제 UI의 드롭다운 메뉴에서 섹션의 위치입니다.
      settings.currency
      		string선호하는 결제 통화입니다. 통화의 3자리 정의가 ISO 4217에 따라 사용됩니다.
      settings.external_id
      		string게임의 트랜잭션 ID 입니다. 각 사용자 결제별로 고유해야 합니다.
      settings.payment_method
      		integer결제 방식 ID입니다. 결제 방식 ID 목록은 게시자 계정에서 또는 결제 방식 가져오기 API 호출을 사용하여 가져올 수 있습니다.
      settings.return_url
      		string결제 후 사용자를 리디렉션하는 페이지입니다. 매개 변수 user_id, foreigninvoice, invoice_id, status가 링크에 자동으로 추가됩니다.
      settings.redirect_policy
      		object리디렉션 정책 설정입니다(객체).
      settings.redirect_policy.redirect_conditions
      		string결제 후 사용자를 반환 URL로 리디렉션하는 결제 상태입니다. none, successful, successful_or_canceled 혹은 any일 수 있습니다.
      settings.redirect_policy.delay
      		integer사용자가 복귀 URL로 자동 재지정된 이후 지연 시간(초).
      settings.redirect_policy.status_for_manual_redirection
      		string결제 후 사용자를 반환 URL로 리디렉션하는 결제 상태입니다. none, successful, successful_or_canceled 혹은 any일 수 있습니다.
      settings.redirect_policy.redirect_button_caption
      		string수동 리디렉션 버튼 텍스트입니다.

      필요한 경우 사용자 정의용 추가 매개변수를 전달하세요.

      Copy
      Full screen
      Small screen

        curl -X 'POST' \
'https://subscriptions.xsolla.com​/api/user/v1/projects/{project_id}/subscriptions/buy?country=RU  ' \
  -H 'accept: application/json' \
  -H 'Authorization: Bearer client_user_jwt'

{
  "plan_external_id": "PlanExternalId",
  "settings": {
    "ui": {
      "size": "large",
      "theme": "string",
      "version": "desktop",
      "desktop": {
        "header": {
          "is_visible": true,
          "visible_logo": true,
          "visible_name": true,
          "type": "compact",
          "close_button": true
        }
      },
      "mobile": {
        "mode": "saved_accounts",
        "footer": {
          "is_visible": true
        },
        "header": {
          "close_button": true
        }
      },
      "license_url": "string",
      "mode": "user_account",
      "user_account": {
        "history": {
          "enable": true,
          "order": 1
        },
        "payment_accounts": {
          "enable": true,
          "order": 1
        },
        "info": {
          "enable": true,
          "order": 1
        },
        "subscriptions": {
          "enable": true,
          "order": 1
        }
      }
    },
    "currency": "string",
    "locale": "string",
    "external_id": "string",
    "payment_method": 1,
    "return_url": "string",
    "redirect_policy": {
      "redirect_conditions": "none",
      "delay": 0,
      "status_for_manual_redirection": "none",
      "redirect_button_caption": "string"
    }
  }
}

        Copy
        Full screen
        Small screen

          {
  "link_to_ps": "https://secure.xsolla.com/paystation2/?access_token=<access_token>"
}

          엑솔라 페이 스테이션에 구독 카탈로그를 표시하는 예시:

          엑솔라 사이트 빌더 사용하기

          엑솔라 사이트 빌더를 사용하여 구독 판매용 사이트를 생성하고 설정할 수 있습니다. 이렇게 하려면 웹 상점 템플릿을 사용하여 사이트를 생성해야 합니다. 사용자 인증을 사용하는 웹 상점 지침에서 역할 설정에 대한 자세한 내용을 확인할 수 있습니다.

          진행률
          의견을 보내 주셔서 감사드립니다!
          마지막 업데이트: 2023년 2월 14일

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

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