Establecer la apertura de la interfaz de pago

En función de la configuración de autenticación del proyecto, puede utilizar una de las siguientes opciones para abrir la interfaz de pago:

• llamada API Crear token en el lado cliente si:
  • utiliza su propio sistema de autorización en su aplicación.
  • los planes de suscripción se establecen con una cuota de suscripción asociada al primer pago de su proyecto.
• método del lado cliente para obtener un enlace para abrir una interfaz de pago si utiliza Xsolla Login en su proyecto.

Mediante la llamada API Crear token de servidor

1. Implemente la obtención de un token para abrir la interfaz de pago de una de las siguientes maneras:
   • en la página de selección del método de pago
   • en la página de introducción de los datos de pago
2. Implemente el modo de apertura de la interfaz de pago:
   • Script Pay Station Embed
   • Iframe
   • Nueva ventana

Con la visualización de la página de selección de la forma de pago

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"
    }
  }
}'

Ejemplo de página de selección del método de pago:

Con la visualización de la página de introducción de los datos de pago

• purchase.subscription.plan_id con el ID del plan seleccionado.
• settings.payment_method con el ID del método de pago. Para encontrar la lista de identificadores, en su proyecto en Cuenta del editor, vaya a la sección Pay Station > Payment methods, o solicítela a su gestor del éxito del cliente.

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"
    }
  }
}'

Ejemplo de página de introducción de datos de pago:

Mediante el método API de cliente

1. Implemente la obtención de un enlace para abrir la interfaz de pago utilizando el método API de cliente.
2. Implemente la apertura de la interfaz de pago de una de las siguientes maneras:
   • Script Pay Station Embed
   • Iframe
   • Nueva ventana

Método de cliente para obtener un enlace para abrir una interfaz de pago

En el lado cliente de su aplicación, utilice una solicitud HTTP POST para implementar la apertura de la interfaz de pago: https://subscriptions.xsolla.com​/api/user/v1/projects/{project_id}/subscriptions/buy.

La solicitud debe contener un encabezado Authorization: Bearer <client_user_jwt>, en el cual <client_user_jwt> es el JSON Web Token (JWT) del usuario, un token único codificado en Base64 según el estándar Base64. Para obtener el token:

• Utilice las llamadas API Register new user y Auth by username y de contraseña si su aplicación utiliza la autorización de inicio de sesión y contraseña.

• Utilice la llamada API Auth via social network si su aplicación utiliza autorización mediante redes sociales.

Especifique country como parámetro de consulta: la designación de dos letras del país del usuario según la norma ISO 3166-1 alpha-2. Afecta a la elección de la configuración regional y de la moneda. Si no se especifica este parámetro, el país vendrá determinado por la dirección IP del usuario.

Introduzca los siguientes parámetros en la solicitud:

• plan_external_id para abrir la interfaz de pago en la página de selección del método de pago.

• plan_external_id y settings.payment_method para abrir la interfaz de pago presente en la página de introducción de los datos de pago.

Parámetros del cuerpo de la solicitud:

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
          }
        },
        "mode": "user_account"
        }
      },
      "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"
      }
    }

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

Con Pay Station Embed

Agregue un script a la página de su sitio web para abrir el widget de la interfaz de pago. Hay disponible una descripción completa del script en el repositorio de GitHub .

EJEMPLO: CARGA ASINCRÓNICA DE SCRIPTS

<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>

Pay Station Embed permite obtener eventos de la interfaz de pago a través de postMessage. Puede enviar estos eventos a sistemas de análisis. Para configurar el procesamiento de eventos en su sistema analítico, contacte con su gestor del éxito del cliente o envíe un correo electrónico a csm@xsolla.com.

Parámetros de inicialización del script:

En un Iframe

Debe implementar los siguientes mecanismos en su lado:

• Compruebe el tipo de dispositivo (de escritorio o móvil) y envíelo dentro del parámetro settings.ui.version del token.
• Obtenga eventos de la interfaz de pago a través de postMessage. Puede enviar estos eventos a los sistemas de análisis. Para establecer el procesamiento de eventos en su sistema de análisis, contacte con su gestor del éxito del cliente o envíe un correo electrónico a csm@xsolla.com.

Para abrir la interfaz de usuario de pago en un iframe, utilice el siguiente enlace: https://secure.xsolla.com/paystation4/?token=ACCESS_TOKEN, en el cual ACCESS_TOKEN es el token obtenido con el método Crear token. También puede obtener un enlace prediseñado con un token al implementar el método de cliente para abrir la interfaz de pago.

Para realizar pruebas, utilice esta URL: https://sandbox-secure.xsolla.com/paystation4/?token=ACCESS_TOKEN.

En una nueva ventana

Para abrir la interfaz de pago en un iframe, utilice el siguiente enlace: https://secure.xsolla.com/paystation4/?token=ACCESS_TOKEN, en el cual ACCESS_TOKEN es el token obtenido con el método Crear token. También puede obtener un enlace prediseñado con un token al implementar el método de cliente para abrir la interfaz de pago.

Para realizar pruebas, utilice esta URL: https://sandbox-secure.xsolla.com/paystation4/?token=ACCESS_TOKEN.