Configurer l’achat d’objets

Choisissez la méthode la plus adaptée à votre projet pour accéder aux données Xsolla :

Utilisez des applications Web de test comme exemple d’implémentation :

Créer une commande côté client de l'application

Pour créer une commande avec les données utilisateur et les données de l’objet côté Xsolla, utilisez l’appel API Create order with specified item. Cette méthode renverra un jeton de paiement, nécessaire pour ouvrir l’interface et effectuer un paiement. Pour utiliser le mode bac à sable, passez le paramètre “sandbox”: true dans le corps de la requête d’obtention du jeton.

Par défaut, la durée de vie du jeton est de 24 heures. Si vous souhaitez modifier cette valeur, contactez votre responsable de la réussite client ou envoyez un e-mail à csm@xsolla.com. La nouvelle valeur sera activée pour tous les projets de votre entreprise créés dans le Compte éditeur.

Ouvrir l'interface de paiement

Cette option d’ouverture de l’interface de paiement ne permet pas de vendre des clés de jeu. Pour vendre des clés de jeu, suivez ces instructions.

EXEMPLE DE CHARGEMENT ASYNCHRONE DE SCRIPT

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>

Pay Station Embed permet de recevoir les événements de l’interface de paiement via le mécanismepostMessage. Vous pouvez envoyer ces événements au système d’analyse. Pour configurer le traitement de ces événements dans votre système d’analyse, contactez votre responsable de la réussite client ou envoyez un e-mail à l’adresse csm@xsolla.com.

L’équipe Xsolla a créé un widget qui simplifie l’intégration de l’interface de paiement sur votre site Web. Le script du widget est disponible dans notre dépôt GitHub.

Paramètres d’initialisation du script :

Paramètre	Type	Description
access_token	string	Jeton reçu via API. Obligatoire.
sandbox	boolean	Définissez ce paramètre sur `true` pour tester le processus de paiement : l’URL `sandbox-secure.xsolla.com` sera utilisée à la place de `secure.xsolla.com`.
lightbox	object	Objet avec les paramètres de la lightbox (version de bureau uniquement).
payment_widget_ui.lightbox.width	string	Largeur du cadre de la lightbox. Si définie sur `null`, elle correspondra à la largeur de la Pay Station. La valeur par défaut est `null`.
payment_widget_ui.lightbox.height	string	Hauteur du cadre de la lightbox. Si définie sur `null`, elle correspondra à la hauteur de Pay Station. La valeur par défaut est `100%`.
payment_widget_ui.lightbox.zIndex	integer	Définit l’ordre d’empilement. La valeur par défaut est `1000`.
payment_widget_ui.lightbox.overlayOpacity	integer	Opacité de l’arrière-plan du widget (`0` — complètement transparent, `1` — complètement opaque). La valeur par défaut est 60 % (`.6`).
payment_widget_ui.lightbox.overlayBackground	string	Couleur de fond de la superposition. La valeur par défaut est `#000000`.
payment_widget_ui.lightbox.modal	boolean	Si définie sur `true`, le cadre de la lightbox ne peut pas être fermé. La valeur par défaut est `false`.
lightbox.closeByClick	boolean	Si définie sur `true`, cliquer sur la superposition ferme la lightbox. La valeur par défaut est `true`.
lightbox.closeByKeyboard	boolean	Si définie sur `true`, appuyer sur ESC ferme la lightbox. La valeur par défaut est `true`.
payment_widget_ui.lightbox.contentBackground	string	Couleur de fond du cadre. La valeur par défaut est `#ffffff`. Notez que ce changement de couleur n’affecte pas l’iframe Pay Station, mais uniquement la lightbox qui le contient.
payment_widget_ui.lightbox.contentMargin	string	Marge du cadre. La valeur par défaut est `10px`.
payment_widget_ui.lightbox.spinner	string	Type d’indicateur de chargement animé. Valeurs possibles : `xsolla` ou `round`. La valeur par défaut est `xsolla`.
payment_widget_ui.lightbox.spinnerColor	string	Couleur de l’indicateur de chargement. Aucune valeur par défaut.
childWindow	object	Paramètres de la fenêtre enfant dans laquelle s’ouvre l’interface Pay Station. Prise en charge dans la version mobile.
childWindow.target	string	Détermine où s’ouvre la fenêtre Pay Station. Valeurs possibles : `_blank`, `_self` et`_parent`. La valeur par défaut est `_blank`.

Le script vous permet de suivre les événements de l’interface de paiement. Selon le type d’événement, vous pouvez effectuer différentes actions sur la page Web.

Liste des événements :

Paramètre	Description
init	Widget initialisé.
open	Widget ouvert.
load	L’interface de paiement (Pay Station) est chargée.
close	L’interface de paiement (Pay Station) est fermée.
status	L’utilisateur est sur la page d’état.
status-invoice	L’utilisateur est sur la page d’état ; le paiement est en cours.
status-delivering	L’utilisateur a été déplacé sur la page d’état ; le paiement a été effectué ; la notification de paiement a été envoyée.
status-done	L’utilisateur est sur la page d’état ; le paiement est crédité sur le compte de l’utilisateur.
status-troubled	L’utilisateur a été déplacé sur la page d’état, mais le paiement a échoué.

Si vous souhaitez initialiser l’ouverture de l’interface de paiement, utilisez le lien suivant : https://secure.xsolla.com/paystation4/?token=TOKEN.

Il est impératif de n’utiliser qu’un lien avec le préfixe https:// pour l’ouverture de l’interface de paiement.

Utilisez l’URL suivante à des fins de test : https://sandbox-secure.xsolla.com/paystation4/?token=TOKEN.

Le paramètre access_token contient des données utilisateur privées. Assurez-vous d’utiliser la communication serveur-serveur lors de l’obtention de ce paramètre.

Pour ouvrir l’interface de paiement dans un iframe :

Implémentez le mécanisme postMessage pour recevoir les événements de l’interface de paiement.
Ouvrez l’interface de paiement en suivant le lien https://sandbox-secure.xsolla.com/paystation4/?token=TOKEN, où TOKEN est le jeton reçu.

Problème potentiel : Si le bouton de copie du code de confirmation de paiement, requis par certains systèmes de paiement ne s’affiche pas lors de l’ouverture de l’interface de paiement dans une iframe, passez l’attribut allow=“clipboard-read; clipboard-write; payment” à l’iframe.

Exemple :

Copy

Full screen

Small screen

<iframe
  src="https://sandbox-secure.xsolla.com/paystation4/?token=TOKEN"
  width="800"
  height="700"
  allow="clipboard-read; clipboard-write; payment"
></iframe>

Effectuer un paiement test

Pour tester le processus de paiement, utilisez le mode bac à sable. Il s’agit d’un environnement autonome qui reproduit toutes les fonctionnalités d’un environnement réel, à l’exception des paiements réels et des paiements refusés. Pour accéder au mode bac à sable, passez le paramètre “sandbox”: true lorsque vous créez une commande.

Avant la signature d’un contrat avec Xsolla, le test du processus de paiement n’est disponible qu’en mode bac à sable.

Les tests n’impliquent pas de retrait d’argent d’un compte bancaire réel.

Ouvrez l'interface de paiement en mode bac à sable.
Choisissez le mode de paiement Carte bancaire.
Entrez les informations de la carte bancaire. Dans les autres champs (par exemple, le nom ou l'adresse), entrez n'importe quelle donnée. Vous pouvez également indiquer des informations incorrectes (numéro de carte ou date d'expiration) pour vérifier si une erreur est générée.
Cliquez sur Pay.

Liste des cartes de test

Voir la liste des cartes bancaires de test.

Outre les informations de la carte, vous devez indiquer le code postal si au moins l’une des conditions suivantes est vraie :

Le pays de l’utilisateur est les États-Unis ou le Canada.
Le numéro d’identification bancaire (BIN) indique que la carte a été émise aux États-Unis.

Vous pouvez indiquer n’importe quel code postal valide (par exemple, 12345). Il détermine le taux de la taxe de vente, mais n’affecte pas la progression du paiement test.
Les paiements par carte bancaire en mode bac à sable peuvent être effectués dans les devises suivantes : USD, EUR, RUB, GBP, AED, ALL, AMD, ARS, AUD, AZN, BGN, BRL, BYN, CAD, CHF, CLP, CNY, COP, CZK, DKK, DZD, EGP, GEL, HKD, HRK, HUF, IDR, ILS, INR, ISK, JPY, KES, KGS, KRW, KZT, MAD, MDL, MKD, MNT, MXN, MYR, NGN, PEN, PHP, PKR, PLN, RON, RSD, SAR, SEK, SGD, THB, TRY, TWD, UAH, UYU, UZS, VEF, VND, ZAR.

En mode bac à sable, vous pouvez tester le paiement unique et le paiement par modes de paiement enregistrés en utilisant des cartes bancaires ou PayPal.

Pour voir les informations détaillées, y compris les frais, sur les transactions effectuées en mode bac à sable :

Ouvrez votre Compte éditeur.
Accédez à Accounting > Transaction registry.
Cochez la case Show test transactions.

Vous pouvez également consulter les détails des transactions et demander des remboursements dans le Compte éditeur dans la section Support > Transaction search.

Créer une commande et ouvrir l'interface de paiement

Pour créer une commande avec les données de l’utilisateur et du bien côté Xsolla, appelez la méthode SDK XsollaCatalog.Purchase ; passez les paramètres suivants :

itemSku — UGS de l’objet que l’utilisateur souhaite acheter.
onSuccess — fonction de rappel en cas d’achat réussi, déclenché lorsque le statut de la commande passe à done.
onError — fonction de rappel en cas d’erreur de requête.
onBrowseClosed — fonction de rappel en cas de fermeture du navigateur (facultatif). L’événement n’est suivi que lorsque l’utilisateur ouvre l’interface de paiement dans le navigateur intégré. Les événements liés à un navigateur externe ne sont pas suivis.
purchaseParams — paramètres d’achat et d’interface de paiement de l’utilisateur, tels que la devise et la langue (facultatif).
customHeaders — en-têtes personnalisés de la requête Web (facultatif).

La méthode XsollaCatalog.Purchase lance le processus d’achat pour l’objet spécifié, incluant la création de la commande, l’ouverture de l’interface de paiement et le suivi de l’état de la commande. Le paramètre onSuccess contient une fonction qui est appelée lorsque le statut de la commande passe à done.

Lorsqu’une commande est créée, Xsolla génère un jeton de paiement nécessaire pour ouvrir l’interface de paiement et effectuer le paiement.

Effectuer un paiement test

Pour tester le processus de paiement, utilisez le mode bac à sable. Il s’agit d’un environnement autonome qui reproduit toutes les fonctionnalités d’un environnement réel, à l’exception des paiements réels et des paiements refusés. Pour accéder au mode bac à sable, cochez la case Test Payments Mode dans l’éditeur Unity, dans le panneauInspector (cochée par défaut).

Avant la signature d’un contrat avec Xsolla, le test du processus de paiement n’est disponible qu’en mode bac à sable.

Les tests n’impliquent pas de retrait d’argent d’un compte bancaire réel.

Lancez votre application ou la scène dans l'éditeur Unity.
Choisissez le mode de paiement Bank card.
Entrez les informations de la carte bancaire. Dans les autres champs (par exemple, le nom ou l'adresse), entrez n'importe quelle donnée. Vous pouvez également indiquer des informations incorrectes (numéro de carte ou date d'expiration) pour vérifier si une erreur est générée.
Cliquez sur Pay.

Liste des cartes de test

Voir la liste des cartes bancaires de test.

Outre les informations de la carte, vous devez indiquer le code postal si au moins l’une des conditions suivantes est vraie :

Le pays de l’utilisateur est les États-Unis ou le Canada.
Le numéro d’identification bancaire (BIN) indique que la carte a été émise aux États-Unis.

En mode bac à sable, vous pouvez tester le paiement unique et le paiement par modes de paiement enregistrés en utilisant des cartes bancaires ou PayPal.

Pour voir les informations détaillées, y compris les frais, sur les transactions effectuées en mode bac à sable :

Ouvrez votre Compte éditeur.
Accédez à Accounting > Transaction registry.
Cochez la case Show test transactions.

Vous pouvez également consulter les détails des transactions et demander des remboursements dans le Compte éditeur dans la section Support > Transaction search.

Créer une commande et ouvrir l'interface de paiement

Pour créer une commande avec les données de l'utilisateur et du bien côté Xsolla, appelez la méthode createOrderByItemSku de la bibliothèque Store ; passez les paramètres suivants :

- callback — fonction de rappel en cas de création de commande réussie. Elle reçoit le jeton nécessaire pour ouvrir l'interface de paiement et effectuer le paiement ;

- itemSku — UGS de l'objet que l'utilisateur souhaite acheter ;

- options — paramètres de paiement (facultatif) ;

- quantity — nombre d'objets que l'utilisateur souhaite acheter (facultatif). Si la quantité n'est pas spécifiée, la valeur 1 est fixée par défaut.

Implémentez la logique d'ouverture de l'interface UI :

Copy

Full screen

Small screen

val intent = XPayments.createIntentBuilder(activity)
    .accessToken(AccessToken(<payment token>))
    .isSandbox(<isSandbox>)
    .build()
startActivityForResult(intent, RC_PAYSTATION)

implémentez la gestion des résultats des paiements :

Copy

Full screen

Small screen

override fun onActivityResult(requestCode: Int, resultCode: Int, data: Intent?) {
    super.onActivityResult(requestCode, resultCode, data)
    if (requestCode == RC_PAYSTATION) {
        val (status, _) = XPayments.Result.fromResultIntent(data)
        when (status) {
            XPayments.Status.COMPLETED -> Log.d("MainActivity", "Payment completed")
            XPayments.Status.CANCELLED -> Log.d("MainActivity", "Payment cancelled")
            XPayments.Status.UNKNOWN -> Log.d("MainActivity", "Status unknown")
        }
    }
}

Consultez le projet de démo pour un exemple d’implémentation.

Effectuer un paiement test

Pour tester le processus de paiement, utilisez le mode bac à sable. Il s’agit d’un environnement autonome qui reproduit toutes les fonctionnalités d’un environnement réel, à l’exception des paiements réels et des paiements refusés. Pour accéder au mode bac à sable, appelez la méthode isSandbox et passez true comme argument lors de la création d’un objetIntentBuilder.

Avant la signature d’un contrat avec Xsolla, le test du processus de paiement n’est disponible qu’en mode bac à sable.

Les tests n’impliquent pas de retrait d’argent d’un compte bancaire réel.

Lancez votre application.
Choisissez le mode de paiement Bank card.
Entrez les informations de la carte bancaire. Dans les autres champs (par exemple, le nom ou l'adresse), entrez n'importe quelle donnée. Vous pouvez également indiquer des informations incorrectes (numéro de carte ou date d'expiration) pour vérifier si une erreur est générée.
Cliquez sur Pay.

Liste des cartes de test

Voir la liste des cartes bancaires de test.

Outre les informations de la carte, vous devez indiquer le code postal si au moins l’une des conditions suivantes est vraie :

Le pays de l’utilisateur est les États-Unis ou le Canada.
Le numéro d’identification bancaire (BIN) indique que la carte a été émise aux États-Unis.

En mode bac à sable, vous pouvez tester le paiement unique et le paiement par modes de paiement enregistrés en utilisant des cartes bancaires ou PayPal.

Pour voir les informations détaillées, y compris les frais, sur les transactions effectuées en mode bac à sable :

Ouvrez votre Compte éditeur.
Accédez à Accounting > Transaction registry.
Cochez la case Show test transactions.

Vous pouvez également consulter les détails des transactions et demander des remboursements dans le Compte éditeur dans la section Support > Transaction search.

Créer une commande et ouvrir l'interface de paiement

Pour créer une commande avec les données de l'utilisateur et du bien côté Xsolla, appelez la méthode SDK FetchPaymentToken ; passez les paramètres suivants :

- AuthToken — jeton d'authentification utilisateur, obtenu lors de l'authentification via Xsolla Login ;

- ItemSKU — UGS de l'objet que l'utilisateur souhaite acheter ;

- SuccessCallback — fonction de rappel déclenché lors de la réception du jeton de paiement ;

- ErrorCallback — fonction de rappel d'état ;

- PurchaseParams — paramètres d'achat et d'interface de paiement de l'utilisateur, tels que la devise et la langue (facultatif).

Implémentez l'ouverture de l'interface de paiement. Pour ce faire, appelez la méthode SDK LaunchPaymentConsole ; passez les paramètres suivants :

- WorldContextObject — objet de contexte mondial (pour les appels C++) ;

- OrderId — ID de la commande ;

- AccessToken — jeton de paiement ;

- SuccessCallback — fonction de rappel déclenché lors de la réception du jeton de paiement ;

- ErrorCallback — fonction de rappel d'état ;

- BrowserClosedCallback — fonction de rappel an cas de fermeture du navigateur. L'événement n'est suivi que lorsque l'utilisateur ouvre l'interface de paiement dans le navigateur intégré. Les événements liés à un navigateur externe ne sont pas suivis ;

- PayStationVersion — version de Pay Station. Par défaut, la version 4 est utilisée.

Effectuer un paiement test

Pour tester le processus de paiement, utilisez le mode bac à sable. Il s’agit d’un environnement autonome qui reproduit toutes les fonctionnalités d’un environnement réel, à l’exception des paiements réels et des paiements refusés. Pour accéder au mode bac à sable, cochez la case Enable Sandbox dans l’éditeur Unreal, dans la section Settings > Project Settings > Plugins > Xsolla Settings > Purchases (cochée par défaut).

Avant la signature d’un contrat avec Xsolla, le test du processus de paiement n’est disponible qu’en mode bac à sable.

Les tests n’impliquent pas de retrait d’argent d’un compte bancaire réel.

Lancez votre application ou la map dans l'éditeur Unreal.
Choisissez le mode de paiement Bank card.
Entrez les informations de la carte bancaire. Dans les autres champs (par exemple, le nom ou l'adresse), entrez n'importe quelle donnée. Vous pouvez également indiquer des informations incorrectes (numéro de carte ou date d'expiration) pour vérifier si une erreur est générée.
Cliquez sur Pay.

Liste des cartes de test

Voir la liste des cartes bancaires de test.

Outre les informations de la carte, vous devez indiquer le code postal si au moins l’une des conditions suivantes est vraie :

Le pays de l’utilisateur est les États-Unis ou le Canada.
Le numéro d’identification bancaire (BIN) indique que la carte a été émise aux États-Unis.

En mode bac à sable, vous pouvez tester le paiement unique et le paiement par modes de paiement enregistrés en utilisant des cartes bancaires ou PayPal.

Pour voir les informations détaillées, y compris les frais, sur les transactions effectuées en mode bac à sable :

Ouvrez votre Compte éditeur.
Accédez à Accounting > Transaction registry.
Cochez la case Show test transactions.

Vous pouvez également consulter les détails des transactions et demander des remboursements dans le Compte éditeur dans la section Support > Transaction search.

Merci pour votre commentaire !

Nous examinerons votre message et l'utiliserons pour améliorer votre expérience.

Dernière mise à jour: 1 Novembre 2024

Faute de frappe ou autre erreur dans le texte ? Sélectionnez le texte concerné et appuyez sur Ctrl+Entée.

Your browser is not supported. Please try a different browser

Articles populaires

Ou choisissez les questions les plus fréquemment posées:

Réponse basée sur les sources suivantes:

Laissez-nous un commentaire (facultatif)

Laissez-nous un commentaire (facultatif)

Payments

Configurer l’achat d’objets

Créer une commande côté client de l'application

Ouvrir l'interface de paiement

access_token

sandbox

lightbox

payment_widget_ui.lightbox.width

payment_widget_ui.lightbox.height

payment_widget_ui.lightbox.zIndex

payment_widget_ui.lightbox.overlayOpacity

payment_widget_ui.lightbox.overlayBackground

payment_widget_ui.lightbox.modal

lightbox.closeByClick

lightbox.closeByKeyboard

payment_widget_ui.lightbox.contentBackground

payment_widget_ui.lightbox.contentMargin

payment_widget_ui.lightbox.spinner

payment_widget_ui.lightbox.spinnerColor

childWindow

childWindow.target

Effectuer un paiement test

Créer une commande et ouvrir l'interface de paiement

Effectuer un paiement test

Créer une commande et ouvrir l'interface de paiement

Effectuer un paiement test

Créer une commande et ouvrir l'interface de paiement

Effectuer un paiement test