Intégrer le magasin dans le jeu

Après avoir créé et configuré des biens (objets virtuels, monnaies virtuelles, lots, clés) dans votre Compte éditeur, ajoutez In-Game Store à votre jeu :

1. Implémentez l’affichage du catalogue des objets.
2. Implémentez la logique de vente des objets.

Affichage du catalogue des objets

Implémentez l’affichage du catalogue des objets via les appels In-Game Store & Buy Button API :

Vente des objets

Vous pouvez vendre des objets comme suit :

1. Achat rapide d’un bien. Il s’agit de la vente d’une UGS dans n’importe quelle quantité (par exemple, 100 potions identiques ou un montant quelconque de monnaie virtuelle).
2. Achat via le panier. Dans ce cas, le joueur remplit le panier, ajoute ou supprime des biens, ou modifie leur quantité.

Achat rapide

Achat via le panier

1. Pour configurer le panier et obtenir le jeton :
   • Sur le client — si vous voulez implémenter vous-même le panier dans votre application ;
   • Sur le serveur — si vous voulez utiliser une solution Xsolla (les appels In-Game Store & Buy Button API) pour gérer le panier.
2. Pour ouvrir l’interface de paiement.

Remplir et acheter le panier sur le client

Implémentez vous-même la logique d’ajout et de suppression de biens. De plus, gardez à l’esprit que, avant l’appel à l’API pour remplir le panier, l’utilisateur n’aura pas d’informations sur les promotions qui seront appliquées à l’achat. Cela signifie que le coût total et les informations sur les objets bonus ajoutés ne seront pas connus à l’avance.

1. Une fois que le joueur a rempli son panier, appelez l'API Fill cart with items. Les informations actuelles sur les biens sélectionnés (prix avant et après les remises, objets bonus) seront passées dans la réponse.
2. Appelez l'API Create order with all items from current cart. L'ID de la commande et le jeton de paiement seront passés dans la réponse. La commande créée aura le statut New.
3. Ouvrez l'interface de paiement.

Remplir et acheter le panier sur le serveur

Cette option peut nécessiter plus de temps pour configurer le panier, car chaque modification du panier doit être accompagnée d’appels API.

Suivez les étapes suivantes :

1. Modifiez le panier :
   • Pour ajouter un bien ou modifier la quantité d’un bien, appelez l’API Update cart item by card ID ;
   • Pour supprimer un bien, appelez l’API Delete cart item by card ID.

2. Appelez l'API Create order with all items from the current cart. L'ID de la commande et le jeton de paiement seront passés dans la réponse. La commande créée aura le statut New.
3. Ouvrez l'interface de paiement.

Ouverture de l'interface de paiement

Pour payer les biens, ouvrez l’interface de paiement. Le jeton permettant d’ouvrir l’interface de paiement sera passé dans la réponse à l’appel API Create order with all items from current cart.

Implémentez l’ouverture de l’interface de paiement de l’une des manières suivantes :

• Dans une nouvelle fenêtre. Pour ouvrir l’interface de paiement dans une nouvelle fenêtre du navigateur, utilisez le lien : https://secure.xsolla.com/paystation3/?access_token=ACCESS_TOKEN où ACCESS_TOKEN est le jeton reçu lors de la création de la commande.
• Via un widget. Utilisez le script Xsolla PayStation Widget (le fichier README contient les instructions).

Tester la procédure de paiement

Pour tester le flux de paiement, utilisez le mode bac à sable. Faites usage d’une carte bancaire de test et de n’importe quel compte.

Obtenir le statut de la commande de l'utilisateur

Utilisez les moyens suivants pour obtenir le statut de la commande de l’utilisateur :

1. Côté serveur via les webhooks.
2. Côté client via l’API WebSocket API ou IGS & BB API.

Obtenir le statut de la commande de l'utilisateur côté serveur via des webhooks

Obtenir le statut de la commande de l'utilisateur côté client via WebSocket API ou IGS & BB API

1. WebSocket API.
2. Short-polling.

Obtenir l'état d'une commande côté client à l'aide de l'API WebSocket

La solution utilise WebSockets pour obtenir les statuts des commandes sans récupérer d’informations détaillées sur celles-ci. Cette méthode est préférable, car elle établit une seule connexion entre le client (par exemple, votre site web ou votre application mobile) et le serveur Xsolla, évitant ainsi une charge supplémentaire pour le client ou le serveur.

Effectuez les étapes suivantes:

1. Pour permettre au serveur Xsolla WebSocket et à votre client d’identifier les messages d’état des commandes, créez une connexion :

const client = new Centrifuge(
connectionURL,
{
data: {
  user_external_id: user_external_id,
  auth: auth,
  project_id: project_id
}
}
)
connectionURL - wss://ws-store.xsolla.com/connection/websocket
auth - user JWT token

2. Pour recevoir de nouveaux messages sur les statuts des commandes, abonnez-vous aux événements à l'aide de la fonction client.on :

client.on('publication', (ctx) => {
   //handle the status
});

3. Déclenchez l'établissement effectif de la connexion :

client.connect()

4. Pour recevoir l'historique des changements de statuts des commandes, connectez la méthode API d'historique.

client.on('subscribed', function (ctx) {
   client.history(ctx.channel, { limit: -1, since: { offset: 0 }, reverse: false }).then(function (resp) {
resp.publications.forEach((ctx) => {
   /handle the status
});

   }, function (err) {
       //handle the status
   });
});

Exemple de corps de message:

{
order_id: 59614241,
status: 'new'
}

Les statuts de commande suivants sont possibles :

• New — la commande a été créée, mais n’est pas encore payée ;
• Paid — la commande est payée ;
• Done — la commande a été livrée (tous les reçus ont été envoyés, les livraisons ont été effectuées du côté de Xsolla, des plateformes externes, etc.) ;
• Canceled — la commande a été annulée et le paiement a été remboursé à l’utilisateur.

Le temps nécessaire pour une réponse via websocket est de 5 minutes. Passé ce délai ou en cas de problème avec le websocket, il est recommandé d’utiliser un short-polling.

Short-polling