결제 UI 열기

프로젝트 인증 설정에 따라 다음과 같이 결제 UI를 열 수 있습니다.

토큰 생성하기 API 호출을 통해

  1. 토큰 가져오기를 구현하여 결제 UI를 여는 방법:
  2. 결제 UI 열기를 구현하는 방법:

결제 방법 선택 페이지 표시 사용

결제 UI를 열었을 때 결제 방법 선택 페이지가 표시되도록 설정하려면 선택한 플랜의 ID와 함께 purchase.subscription.plan_id 매개변수를 토큰 생성 API 호출로 전달합니다. 필요한 경우 추가 사용자 정의 매개변수를 전달합니다.

Copy
Full screen
Small screen
    요청 예제:
    curl -v https://api.xsolla.com/merchant/v2/merchants/{merchant_id}/token \
    -X POST \
    -u your_merchant_id:merchant_api_key \
    -H 'Content-Type:application/json' \
    -H 'Accept: application/json' \
    -d '
    {
      "user":{
        "id":{
          "value": "1234567",
          "hidden": true
        },
        "email": {
          "value": "user1234@game1234.com"
        },
        "name": {
          "value": "UserName",
          "hidden": false
        }
      },
      "settings": {
        "project_id": 12345,
        "currency": "USD"
      },
      "purchase": {
        "subscription": {
          "plan_id": "54321"
        }
      }
    }'

    결제 방식 선택 페이지의 예시:

    결제 데이터 입력 페이지 표시 사용

    결제 UI가 열릴 때 결제 데이터 입력 페이지를 표시하도록 설정하려면 토큰 생성 API 호출로 다음 매개변수를 전달합니다.

    • 선택한 플랜의 ID와 purchase.subscription.plan_id.
    • 결제 방식 ID가 있는 settings.payment_method입니다. 게시자 계정의 프로젝트에서 식별자 목록을 확인하려면 페이 스테이션 > 결제 방식 섹션으로 이동하거나 계정 관리자에게 요청합니다.

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

    Copy
    Full screen
    Small screen
    요청 예제:
    curl -v https://api.xsolla.com/merchant/v2/merchants/{merchant_id}/token \
    -X POST \
    -u your_merchant_id:merchant_api_key \
    -H 'Content-Type:application/json' \
    -H 'Accept: application/json' \
    -d '
    {
      "user":{
        "id":{
          "value": "1234567",
          "hidden": true
        },
        "email": {
          "value": "user1234@game1234.com"
        },
        "name": {
          "value": "UserName",
          "hidden": false
        }
      },
      "settings": {
        "project_id": 12345,
        "payment_method": 1380,
        "currency": "USD"
      },
      "purchase": {
        "subscription": {
          "plan_id": "54321"
        }
      }
    }'

    결제 데이터 입력 페이지의 예시:

    구독 관리 및 청구 계정 페이지 표시 사용

    열렸을 때 구독과 결제 계정을 관리하는 페이지를 표시하도록 하려면 settings.ui.mode = user_account 매개변수를 토큰 생성하기 API 호출에 전달합니다.

    Copy
    Full screen
    Small screen
      요청 예제:
      curl -v https://api.xsolla.com/merchant/v2/merchants/{merchant_id}/token \
      -X POST \
      -u your_merchant_id:merchant_api_key \
      -H 'Content-Type:application/json' \
      -H 'Accept: application/json' \
      -d '
      
      {
      
      
          "user": {
              "id": {
                  "value": "1234567",
                  "hidden": true
              }
          },
          "settings": {
            "project_id": 146026,
            "language": "en",
            "currency": "USD",
            "ui": {
                "mode": "user_account",
                "theme": "default_dark",
                "desktop": {
                   "subscription_list": {
                     "layout": "grid"
                   }
                 }
               }
          }
        }

      구독 관리 페이지 및 청구 계정의 예시:

      클라이언트 API 메소드를 통해

      1. 다음 방법 중 하나로 결제 UI를 여는 클라이언트 메소드 구현하기:
      2. 결제 UI 열기를 구현하는 방법:

      결제 방식 선택 페이지를 표시하거나 결제 데이터를 입력

      애플리케이션의 클라이언트 측에서 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 표준에 따라 인코딩한 고유한 토큰입니다. 토큰을 받는 방법:

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

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

      요청에서 전달해야 하는 매개변수:

      • plan_external_id는 결제 방식 선택 페이지에서 결제 인터페이스를 엽니다.

      결제 UI의 예시:

      결제 UI의 예시:

      요청 본문 매개변수:

      매개 변수유형설명
      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>"
          }

          구독 관리 페이지 및 청구 계정 표시 사용

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

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

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

          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/manage?country=RU  ' \
              -H 'accept: application/json' \
              -H 'Authorization: Bearer client_user_jwt'
            {
              "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": "str",
                "locale": "st",
                "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>"
              }

              결제 UI의 예시:

              사용자 정의

              결제 UI에서 다음 사용자 정의 옵션을 사용할 수 있습니다.

              다크 테마의 결제 UI 예시:

              다크 테마 토큰 요청 예시:

              Copy
              Full screen
              Small screen
              요청 예제:
              curl -v https://api.xsolla.com/merchant/v2/merchants/{merchant_id}/token \
              -X POST \
              -u your_merchant_id:merchant_api_key \
              -H 'Content-Type:application/json' \
              -H 'Accept: application/json' \
              -d '
              {
                "user":{
                  "id":{
                    "value": "1234567",
                    "hidden": true
                  },
                  "email": {
                    "value": "user1234@game1234.com"
                  },
                  "name": {
                    "value": "UserName",
                    "hidden": false
                  }
                },
                "settings": {
                  "project_id": 12345,
                  "currency": "USD"
                  "ui": {
                     "theme": "default_dark"
                  }
                }
              }
              '

              • 플랜 섹션의 자체 설명을 배치합니다. 이렇게 하려면 ui.desktop.subscription_list.description 매개변수의 토큰 생성 API 호출로 설명 텍스트를 전달합니다.
              주의
              이 유형의 사용자 정의는 클라이언트 메소드를 구현할 때 사용할 수 없습니다.

              결제 UI의 예시:

              구독 관리 섹션과 플랜 섹션 설명이 있는 라이트 테마에 대한 토큰 요청의 예시:

              Copy
              Full screen
              Small screen
              요청 예제:
              curl -v https://api.xsolla.com/merchant/v2/merchants/{merchant_id}/token \
              -X POST \
              -u your_merchant_id:merchant_api_key \
              -H 'Content-Type:application/json' \
              -H 'Accept: application/json' \
              -d '
              {
                "user":{
                  "id":{
                    "value": "1234567",
                    "hidden": true
                  },
                  "email": {
                    "value": "user1234@game1234.com"
                  },
                  "name": {
                    "value": "UserName",
                    "hidden": false
                  }
                },
                "settings": {
                  "project_id": 12345,
                  "currency": "USD",
                  "ui": {
                     "desktop": {
                       "subscription_list": {
                         "description": "Your Description"
                       }
                     },
                      "user_account": {
                        "subscriptions": {
                            "order": 1,
                            "enable": true
                        }
                      }
                    }
                  }
              }
              '

              • 표준 구독 목록 보기를 블록 형식의 대체 보기 유형으로 변경합니다. 이렇게 하려면 settings.ui.desktop.subscription_list.layout = grid 매개변수를 토큰 생성 API 호출로 전달합니다. 매개변수는 기본값으로 list 값을 사용합니다.
              주의
              이 유형의 사용자 정의는 클라이언트 메소드를 구현할 때 사용할 수 없습니다.

              결제 UI의 예시:

              대체 구독 목록 보기에 대한 토큰 요청의 예시:

              Copy
              Full screen
              Small screen
                요청 예제:
                curl -v https://api.xsolla.com/merchant/v2/merchants/{merchant_id}/token \
                -X POST \
                -u your_merchant_id:merchant_api_key \
                -H 'Content-Type:application/json' \
                -H 'Accept: application/json' \
                -d '
                {
                  "user":{
                    "id":{
                      "value": "1234567",
                      "hidden": true
                    },
                    "email": {
                      "value": "user1234@game1234.com"
                    },
                    "name": {
                      "value": "UserName",
                      "hidden": false
                    }
                  },
                  "settings": {
                    "project_id": 111111,
                    "currency": "USD",
                    "ui": {
                       "desktop": {
                         "subscription_list": {
                           "layout": "grid"
                         }
                       }
                    }
                  }
                }
                '

                페이 스테이션을 사용자 정의하는 방법 가이드에서 여기에 사용하는 사용자 정의 설정과 매개변수에 대한 자세한 정보를 확인할 수 있습니다.

                페이 스테이션 임베드 사용

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

                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로 메일을 보내 주세요.

                엑솔라 팀에서 웹사이트와의 결제 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)입니다. 기본값은 .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을 사용합니다. 여기서 ACCESS_TOKEN토큰 생성하기 메소드로 얻은 토큰입니다. 결제 인터페이스를 여는 클라이언트 메소드를 구현할 때 이미 만들어진 링크를 가져올 수도 있습니다.

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

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

                주의
                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을 사용합니다.

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

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

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