Buy Button über ausgehende Links zum Web Shop aktivieren

Warum ist das wichtig?

Nach den jüngsten Änderungen der Apple-Richtlinien in bestimmten Regionen ist es Entwicklern nun gestattet, App-Nutzer auf externe Websites weiterzuleiten, um Zahlungen für virtuelle Artikel entgegenzunehmen.

Sie können sichtbare Schaltflächen, Banner, Nachrichten und andere Call-to-Actions hinzufügen. Über diese gelangen die Nutzer mit einem einzigen Klick von Ihrem Spiel zu einem sicheren, browserbasierten Checkout (Ihrem Web Shop oder Ihrem Zahlungsportal), ohne gegen die Regeln von Apple zu verstoßen oder Sanktionen zu riskieren.

• Nahtloser Ablauf: Durch Antippen des Buy Button wird der Web-Shop-Checkout für einen bestimmten Artikel geöffnet, sodass Nutzer nach erfolgreicher Zahlung automatisch zum Spiel zurückkehren.
• Unterstützung einer Vielzahl von Zahlungsmethoden, darunter One-Click-Zahlungen über Apple Pay für ein schnelles und vertrautes Bezahlerlebnis auf Mobilgeräten.
• Schnelle Einrichtung: Wenn Ihr Web Shop bereits eingerichtet ist, müssen Sie lediglich einen Link samt Parametern dem Spiel hinzufügen.
• Schnelle Einbindung: Wenn Sie noch keinen Web Shop haben, können Sie ohne viel Zeitaufwand einen erstellen, Bezahl-Links Ihrem Spiel hinzufügen und den Shop live schalten.

Bei dieser Integrationsoption erhalten Sie nicht nur Zugriff auf die Buy-Button-Integration, sondern auch auf das gesamte Web-Shop-Erlebnis mit Funktionen wie Personalisierung, Referral-Programm, Treuesystem, Promocodes und vielem mehr.

Falls Sie einen benutzerdefinierten Web Shop verwenden, der nicht auf Site Builder basiert, und Pay Station direkt in Ihr Spiel integrieren möchten, empfiehlt es sich, die Integration mit dem Xsolla Mobile SDK zu überprüfen.

So funktioniert's

1. Der Nutzer öffnet die App unter iOS.
2. Der Nutzer tippt auf den Buy Button neben dem gewünschten Artikel.
3. Die App öffnet einen Browser mit einem Web-Shop-Link, der die Parameter user-id, purchase-sku und redirect-url enthält.
4. Web Shop authentifiziert den Nutzer automatisch und zeigt das Zahlungsportal für den ausgewählten Artikel an.
5. Der Nutzer wählt eine Zahlungsmethode und schließt den Kauf ab.
6. Der Nutzer gelangt automatisch über einen Deep-Link zurück zum Spiel.
7. Die App erhält die Kaufbestätigung über einen Webhook und gewährt den gekauften Artikel.

Wie komme ich dazu

1. Erstellen Sie einen Web Shop:
   1. Erstellen Sie ein Projekt im Kundenportal.
   2. Richten Sie eine Vorlage ein.
   3. Erstellen Sie einen Artikelkatalog.
   4. Konfigurieren Sie die Benutzerauthentifizierung.
   5. Konfigurieren Sie Webhooks, um dem Nutzer Käufe zu gewähren.
   6. Testen Sie die Website.
   7. Veröffentlichen Sie die Website.
2. Fügen Sie Ihrer iOS-App eine Logik hinzu, sodass die Schaltfläche mit dem Kauf-Link nur Nutzern in den USA angezeigt wird:
   1. Fügen Sie die Schaltfläche Ihrem Spiel hinzu.
   2. Ermitteln Sie die iOS-Storefront.

Schnellstart

Im Kundenportal registrieren und ein Projekt erstellen

Das Kundenportal ist das wichtigste Tool für die Konfiguration der Xsolla-Funktionen und auch für die Arbeit mit Analytics und Transaktionen unerlässlich.

Wechseln Sie zum Kundenportal, und erstellen Sie ein Konto, um sich zu registrieren. Um ein Projekt zu erstellen, klicken Sie auf Projekt erstellen in der Seitenleiste und geben Sie die erforderlichen Informationen ein. Sie können die Einstellungen später ändern.

Während dees Integrationsprozesses benötigen Sie die Projekt-ID. Diese wird im Kundenportal neben dem Projektnamen angezeigt.

Web-Shop-Vorlage einrichten

1. Öffnen Sie Ihr Projekt im Kundenportal.
2. Klicken Sie auf der Hauptseite des Projekts auf Schwerpunkt ändern, und wählen Sie Buy Button über ausgehende Links zum Web Shop aktivieren.
3. Klicken Sie beim Schritt Erstellen Sie Ihre Web Shop-Seite auf Vorlage erstellen.

4. Wählen Sie den Web-Shop-Typ aus:
   • Shop mit einzelner Seite – Website, auf der alle Abschnitte auf einer einzigen Seite angeordnet sind.
   • Portal mit mehreren Seiten – Website mit drei separaten Seiten: einer Hauptseite, einer Produktkatalogseite und einer Neuigkeitenseite.

5. Klicken Sie auf Weiter.
6. Fügen Sie auf der Registerkarte Express einen Link hinzu, der auf Ihr Spiel im App Store verweist. Auf diese Weise können Sie schnell eine auf Ihr Spiel zugeschnittene Website erstellen, weil das Spielbild, der Titel, der Entwicklername und das Farbschema bei der Erstellung der Website automatisch übernommen werden.
7. Klicken Sie auf Web Shop erstellen.

Artikelkatalog einrichten

Sie müssen bei Xsolla einen Katalog mit den Artikeln erstellen, die Sie in Ihrem Spiel verkaufen. Den Katalog können Sie auf einen der folgenden Wege einrichten:

• Artikel importieren: Laden Sie eine JSON-Datei hoch, um einen Katalog schnell im Kundenportal hinzuzufügen.
• API-Aufrufe verwenden: Ideal für automatisierte oder umfangreiche Aktualisierungen.
• Katalog aus dem App Store, aus Google Play oder aus PlayFab importieren: Übertragen Sie einen bestehenden Katalog direkt von einer externen Plattform.
• Katalog manuell einrichten: Sie können Artikel direkt im Kundenportal hinzufügen und bearbeiten.

Benutzerauthentifizierung einrichten

Konfigurieren Sie, dass Nutzer über ihre ID aus dem Spiel authentifiziert werden, um Käufe auf den Ingame-Account des Nutzers zu übertragen.

Sie müssen außerdem die Webhook-Verarbeitung einrichten, um zu überprüfen, ob der Nutzer existiert. Wird der Web Shop über einen Direktlink aus dem Spiel geöffnet, erfolgt eine zusätzliche Validierung über einen Webhook. Eine Benutzerauthentifizierung ist erforderlich, sofern der Web Shop außerhalb des Spiel-Clients aufgerufen wird.

So konfigurieren Sie die Authentifizierung:

1. Implementieren Sie aufseiten Ihrer Anwendung das Handling des Webhooks für die Benutzervalidierung.

Beim Empfang eines Webhooks sollte die Anwendung Folgendes tun:

• Nach einem Benutzer anhand seiner im Webhook übermittelten ID suchen.
• Je nach Ergebnis einen der folgenden HTTP-Statuscodes senden:
  • 200 inklusive einer Antwort vom Webhook, sofern ein Benutzer gefunden wurde
  • 404, sofern keine Benutzer-ID gefunden wurde
• Benutzerattribute zum Zwecke der Personalisierung senden.

2. Öffnen Sie Ihr Projekt im Kundenportal, und navigieren Sie zum Menüpunkt Storefronts > Websites.
3. Klicken Sie bei der gewünschten Website auf Site Builder öffnen.
4. Wechseln Sie in die Login-Einstellungen.

5. Wählen Sie die Option Benutzer-ID aus.

6. Wählen Sie in der Drop-down-Liste Neuer Login aus.

7. Geben Sie die URL ein, unter der Sie Webhooks empfangen möchten. Diese URL kann von der unter Projekteinstellungen > Webhooks angegebenen URL abweichen.

Konfigurieren Sie Webhooks, um dem Nutzer Käufe zu gewähren

Webhooks sind Benachrichtigungen über Ereignisse, die im System auftreten. Wenn ein bestimmtes Ereignis eintritt, sendet Xsolla eine HTTP-Anfrage, die Ereignisdaten an Ihren Spieleserver übermittelt. Diese Webhooks sind wichtig für den Spiel-Client und/oder Server, um Benachrichtigungen über erfolgreiche und erfolglose Zahlungen und Benutzerauthentifizierungsversuche zu erhalten.

Webhooks aktivieren

1. Navigieren Sie im Kundenportal zum Menüpunkt Projekteinstellungen > Webhooks.
2. Geben Sie im Feld Webhook-Server die Server-URL an, unter der Sie die Webhooks im Format https://example.com empfangen wollen. Sie können auch eine URL aus einem Webhook-Testtool angeben.
3. Ein geheimer Schlüssel zum Signieren von Projekt-Webhooks wird standardmäßig generiert. Wenn Sie einen neuen geheimen Schlüssel generieren möchten, klicken Sie auf das Aktualisieren-Symbol.
4. Klicken Sie auf Webhooks aktivieren.

Webhooks testen

Auf der Registerkarte Payments und Store können Sie folgende Webhooks testen:

Benutzervalidierung (“notification_type”:“user_validation”):

 1curl -v 'https://your.hostname/your/uri' \
 2-X POST \
 3-H 'Accept: application/json' \
 4-H 'Content-Type: application/json' \
 5-H 'Authorization: Signature 13342703ccaca5064ad33ba451d800c5e823db8f' \
 6-d '{
 7    "notification_type":"user_validation",
 8    "settings": {
 9      "project_id": 18404,
10      "merchant_id": 2340
11    },
12    "user": {
13        "ip": "127.0.0.1",
14        "phone": "18777976552",
15        "email": "email@example.com",
16        "id": "1234567",
17        "name": "John Smith",
18        "country": "US"
19    }
20}'

Erfolgreiche Bezahlung der Bestellung (“notification_type”: “order_paid”):

  1curl -v 'https://your.hostname/your/uri' \
  2-X POST \
  3-H 'Accept: application/json' \
  4-H 'Content-Type: application/json' \
  5-H 'Authorization: Signature d09695066c52c1b8bdae92f2d6eb59f5b5f89843' \
  6-d '{
  7    "notification_type": "order_paid",
  8    "items": [
  9      {
 10        "sku": "com.xsolla.item_1",
 11        "type": "virtual_good",
 12        "is_pre_order": false,
 13        "quantity": 3,
 14        "amount": "1000",
 15        "promotions": [
 16          {
 17            "amount_without_discount": "6000",
 18            "amount_with_discount": "5000",
 19            "sequence": 1
 20          },
 21          {
 22            "amount_without_discount": "5000",
 23            "amount_with_discount": "4000",
 24            "sequence": 2
 25          }
 26        ],
 27        "custom_attributes":
 28          {
 29            "purchased": 0,
 30            "attr": "value"
 31          }
 32      },
 33      {
 34        "sku": "com.xsolla.item_new_1",
 35        "type": "bundle",
 36        "is_pre_order": false,
 37        "quantity": 1,
 38        "amount": "1000",
 39        "promotions": []
 40      },
 41      {
 42        "sku": "com.xsolla.gold_1",
 43        "type": "virtual_currency",
 44        "is_pre_order": false,
 45        "quantity": 1500,
 46        "amount": null,
 47        "promotions": []
 48      }
 49    ],
 50    "order": {
 51      "id": 1,
 52      "mode": "default",
 53      "currency_type": "virtual",
 54      "currency": "sku_currency",
 55      "amount": "2000",
 56      "status": "paid",
 57      "platform": "xsolla",
 58      "comment": null,
 59      "invoice_id": "1",
 60      "promotions": [
 61        {
 62          "amount_without_discount": "4000",
 63          "amount_with_discount": "2000",
 64          "sequence": 1
 65        }
 66      ],
 67      "promocodes": [
 68        {
 69          "code": "promocode_some_code",
 70          "external_id": "promocode_sku"
 71        }
 72      ],
 73      "coupons": [
 74        {
 75          "code": "WINTER2021",
 76          "external_id": "coupon_sku"
 77        }
 78      ]
 79    },
 80    "user": {
 81      "external_id": "id_xsolla_login_1",
 82      "email": "gc_user@xsolla.com"
 83    },
 84    "billing": {
 85      "notification_type": "payment",
 86      "settings": {
 87        "project_id": 18404,
 88        "merchant_id": 2340
 89      },
 90      "purchase": {
 91          "subscription": {
 92              "plan_id": "b5dac9c8",
 93              "subscription_id": "10",
 94              "product_id": "Demo Product",
 95              "date_create": "2014-09-22T19:25:25+04:00",
 96              "date_next_charge": "2014-10-22T19:25:25+04:00",
 97              "currency": "USD",
 98              "amount": 9.99
 99          },
100          "total": {
101              "currency": "USD",
102              "amount": 200
103          },
104          "promotions": [{
105              "technical_name": "Demo Promotion",
106              "id": 853
107          }],
108          "coupon": {
109              "coupon_code": "ICvj45S4FUOyy",
110              "campaign_code": "1507"
111          }
112        },
113      "transaction": {
114          "id": 1,
115          "external_id": 1,
116          "payment_date": "2014-09-24T20:38:16+04:00",
117          "payment_method": 1,
118          "payment_method_name": "PayPal",
119          "payment_method_order_id": 1234567890123456789,
120          "dry_run": 1,
121          "agreement": 1
122      },
123      "payment_details": {
124          "payment": {
125              "currency": "USD",
126              "amount": 230
127          },
128          "vat": {
129              "currency": "USD",
130              "amount": 0,
131              "percent": 20
132          },
133          "sales_tax": {
134              "currency": "USD",
135              "amount": 0,
136              "percent": 0
137          },
138          "direct_wht": {
139              "currency": "USD",
140              "amount": 0,
141              "percent": 0
142          },
143          "payout_currency_rate": "1",
144          "payout": {
145              "currency": "USD",
146              "amount": 200
147          },
148          "country_wht": {
149              "currency": "USD",
150              "amount": 2,
151              "percent": 10
152          },
153          "user_acquisition_fee": {
154              "currency": "USD",
155              "amount": 2,
156              "percent": 1
157          },
158          "xsolla_fee": {
159              "currency": "USD",
160              "amount": 10
161          },
162          "payment_method_fee": {
163              "currency": "USD",
164              "amount": 20
165          },
166          "repatriation_commission": {
167              "currency": "USD",
168              "amount": 10
169          }
170      }
171    }
172 ,
173  "custom_parameters": {
174    "parameter1": "value1",
175    "parameter2": "value2"
176  }
177}'

Website in der Testumgebung testen

Zum Testen der Website in der Testumgebung:

1. Öffnen Sie Ihr Projekt im Kundenportal, und navigieren Sie zum Menüpunkt Storefronts > Websites.
2. Klicken Sie bei der gewünschten Website auf Site Builder öffnen.
3. Klicken Sie auf Vorschau.

4. Wählen Sie einen Artikel aus, und klicken Sie auf die Kaufen-Schaltfläche.
5. Wählen Sie als Zahlungsmethode die Option Karte aus.
6. Geben Sie die Daten einer Testbankkarte ein. In die verbleibenden Felder können Sie beliebige Werte eingeben. Sie dürfen auch falsche Angaben (Kartennummer, Ablaufdatum oder CVV) machen, um einen Fehler zu generieren.

Website veröffentlichen

1. So verbessern Sie die Leistung Ihrer Website:

   a. Legen Sie in den SEO-Einstellungen die Parameter fest, die von Suchmaschinen und für die Seitenvorschau in sozialen Netzwerken verwendet werden sollen: Laden Sie ein Favicon hoch, geben Sie den Shoptitel und eine Beschreibung ein, und fügen Sie ein Vorschaubild hinzu.

   b. Konfigurieren Sie die Website-Lokalisierung.

   c. Nehmen Sie Änderungen an der Domain vor (optional). Navigieren Sie dafür zum Menüpunkt Storefronts > Websites, und klicken Sie bei der gewünschten Website auf Konfigurieren. Bearbeiten Sie im Abschnitt Domäne den Wert Xsolla-Domain oder richten Sie Ihre eigene Domain ein.

2. Wenn Sie alle erforderlichen Änderungen vorgenommen haben und Ihr Webshop startbereit ist, klicken Sie auf Veröffentlichen.

Schaltfläche mit Kauf-Link Ihrem Spiel hinzufügen

Fügen Sie Ihrem Spiel eine Schaltfläche hinzu, die den Nutzer zum Web Shop weiterleitet, wo er den ausgewählten Artikel bezahlen kann. Die Schaltfläche muss einen Link im folgenden Format enthalten: https://yourwebshop.xsolla.site/?user-id=<USER_ID>&purchase-sku=<ITEM_SKU>&redirect-url=<RETURN_TO_GAME_URL>, wobei:

• yourwebshop.xsolla.site der Link zu Ihrer Web-Shop-Website ist.
• user-id die Benutzer-ID in Ihrem System ist.
• purchase-sku die SKU des gewünschten Artikels aus dem Web-Shop-Katalog ist.
• redirect-url ist die URL-Adresse einer Website (z. B.: https://example.com/success) oder ein Deep Link (z. B.: mygame://open), zu der bzw. dem der Nutzer nach der Zahlung weitergeleitet wird. Bei Nutzung eines Deep Links ist auf Folgendes zu achten:
  • Verwendung des korrekten Formats, einschließlich des Schemas und des Pfads (z. B.: mygame://open) und nicht nur das Schema (mygame://)
  • Verarbeitung des Deep Links innerhalb Ihrer Spiele-App

So finden Sie die Artikel-SKU (am Beispiel eines virtuellen Gegenstands):

1. Öffnen Sie Ihr Projekt im Kundenportal, und navigieren Sie zum Menüpunkt Artikelkatalog > Virtuelle Gegenstände.
2. Öffnen Sie die Gegenstandsgruppe, in der sich der Gegenstand befindet.
3. Kopieren Sie die SKU aus der Zeile unter dem Gegenstandsnamen.

iOS-Storefront ermitteln

Rufen Sie die storefront-Informationen beim ersten Start der App nach der Installation oder, falls erforderlich, bei späteren Starts ab, um zu ermitteln, ob Sie den Buy Button anzeigen können. Die Storefront ist womöglich bereits als Teil Ihrer bestehenden StoreKit-Implementierung vorhanden oder von Ihrem Mobile Measurement Partner (MMP) bereitgestellt. Aktivieren Sie die Funktion zur Anzeige des Buy Button, wenn der Storefront-Ländercode “USA” lautet.

Stellen Sie sicher, dass Ihre Implementierung flexibel genug ist, um in Zukunft weitere Länder zu unterstützen, da sich die rechtlichen Bedingungen und die Plattformpolitik ändern können.

Beachten Sie, dass sich der Storefront-Wert auf dem Gerät nicht ändert, es sei denn, der Nutzer aktualisiert explizit seine Apple-ID-Region in den Systemeinstellungen.

1let countryCode = await Storefront.current?.countryCode
2let showBuyButton = countryCode == "USA"

Weitere Funktionen

Sie können Nutzern schnellen Zugriff auf die Funktionen des Web Shops gewähren, indem Sie Abfrageparameter in der Website-URL verwenden. Weitere Informationen finden Sie in der Anleitung für Abfrageparameter.

Advanced Analytics in AppsFlyer

Wenn Sie ausgehende Links verwenden, um Nutzern die Möglichkeit zu geben, direkt aus dem Spiel heraus Käufe im browserbasierten Zahlungsportal zu tätigen, können Sie die Käufe dennoch tracken und den Lifetime Value (LTV) mit einem Mobile Measurement Partner (MMP) wie AppsFlyer messen. Xsolla unterstützt zwei Integrationsarten für ein nahtloses Tracken von Nutzerakquise, Retargeting und Kaufaktivitäten über app- und webbasierte Plattformen hinweg.

Wählen Sie eine Integrationsart, die am besten zu Ihrer Einrichtung passt, und gewinnen Sie einen vollständigen Überblick über Ihre Kampagnen und Einnahmen: