Buy Button mit eigenem Checkout 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.

Buy Button über Headless Checkout zu integrieren, ist ideal, wenn Sie Ihr eigenes Zahlungsportal erstellen und eine einzigartige User Experience bieten möchten. Dank dieser Integrationsoption können Nutzer nahtlos aus dem Spiel heraus zu einem browserbasierten Checkout gelangen und mit einer Vielzahl von Zahlungsmethoden bezahlen, darunter One-Click-Zahlung über Apple Pay, für einen schnellen und vertrauten Bezahlvorgang auf Mobilgeräten.

Headless Checkout ist eine auf der Headless-Architektur basierende Zahlungslösung, bei der die Funktionen über eine API zugänglich sind. Dieser Ansatz trennt das Backend und die Geschäftslogik von der Benutzeroberfläche.

So nutzen Sie Headless сheckout in iOS-Spiele-Apps:

1. Erstellen Sie Ihren eigenen Shop.
2. Integrieren Sie Headless сheckout in Ihren Shop.
3. Fügen Sie Ihrem Spiel einen Link hinzu, über den die Nutzer zu Ihrem Shop gelangen.

Die schnellste Low-Code-Integration ist die auf dem Web Shop basierende Integration.

Falls Sie einen eigenen Web Shop verwenden, der nicht mit Xsolla Site Builder erstellt wurde, und ein vorgefertigtes Zahlungsportal in Ihr Spiel integrieren möchten, empfiehlt es sich, die Integration mit dem Xsolla Mobile SDK zu überprüfen.

So funktioniert's

Ablauf für den Nutzer:

1. Der Nutzer öffnet die Spiele-App unter iOS.
2. Der Nutzer klickt neben dem gewünschten Artikel auf die Kaufen-Schaltfläche.
3. Ihr Shop öffnet sich in einem Browser. Für eine nahtlose User Experience sollten Sie eine End-to-End-Autorisierung implementieren.
4. Der Nutzer wählt einen Artikel aus und kauft ihn, ohne den Shop zu verlassen.
5. Der Nutzer wird nach erfolgreicher Transaktion zur Spiele-App weitergeleitet.
6. Die Anwendung erhält die Kaufbestätigung über einen Webhook.

Integrationsablauf

1. Erstellen Sie ein Projekt im Kundenportal, und unterzeichnen Sie die Xsolla-Lizenzvereinbarung.
2. Erstellen Sie einen Artikelkatalog.
3. Implementieren Sie die Backend-Interaktionen: Token erstellen und Webhooks einrichten.
4. Installieren Sie das SDK.
5. Integrieren Sie das SDK anwendungsseitig.
6. Fügen Sie Ihrem Spiel einen Link hinzu, über den die Nutzer zu Ihrem Shop gelangen, in dem Headless сheckout integriert ist.

Projekt erstellen und Lizenzvereinbarung unterzeichnen

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.

Navigieren Sie zu Vereinbarungen und Steuern > Vereinbarungen, füllen Sie das Formular aus, und unterzeichnen Sie die Lizenzvereinbarung.

Artikelkatalog erstellen

Bei den Produkten, die im Xsolla-Ökosystem per In-App-Kauf erworben werden können, handelt es sich um virtuelle Gegenstände. Diese haben einen Namen, eine Beschreibung, eine SKU und einen Preis. Einen SKU-Produktkatalog können Sie wie folgt einrichten:

1. Durch den Upload einer JSON-Datei können Sie Ihren Katalog schnell im Kundenportal importieren.
2. Erstellen Sie einen Artikelkatalog mithilfe der API-Aufrufe aus dem Dokumentationsabschnitt Virtuelle Gegenstände und Währung > Verwaltung.

Backend-Interaktion implementieren

Token erstellen

Webhooks konfigurieren

So aktivieren Sie Webhooks:

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.

Für die volle Operation des In-Game Stores und Zahlungsmanagements ist es notwendig, die Verarbeitung des Hauptwebhooks zu implementieren:

SDK installieren

1. Installieren Sie das SDK als npm-Paket, indem Sie den folgenden Befehl ausführen:

1npm install --save @xsolla/pay-station-sdk

2. Initialisieren Sie das SDK, indem Sie Umgebungsparameter übermitteln:

1import { headlessCheckout } from '@xsolla/pay-station-sdk';
2
3await headlessCheckout.init({
4  sandbox: true,
5});

3. Übermitteln Sie den Zahlungstoken für das initialisierte SDK:

1await headlessCheckout.setToken(accessToken);

SDK aufseiten der Anwendung integrieren

Nach der Installation und Initialisierung des SDK:

1. Initialisieren Sie das Zahlungsportal, indem Sie die Zahlungsmethoden-ID angeben. Die Methode headlessCheckout.form.init gibt ein Objekt zurück, das für die weitere Interaktion mit dem Zahlungsportal verwendet wird.

1await headlessCheckout.form.init({
2  paymentMethodId: 3175, // Apple Pay payment ID
3});

2. Fügen Sie die Verarbeitung des Ereignisses show_fields für die Anzeige zusätzlicher Felder hinzu.

1headlessCheckout.form.onNextAction((nextAction) => {
2  switch (nextAction.type) {
3    case 'show_fields':
4      this.handleShowFieldsAction(nextAction);
5  }
6});

3. Fügen Sie dem HTML-Markup des Zahlungsportals die folgenden Komponenten hinzu:
   • Zwingend erforderliche Komponenten:
     • psdk-legal – zur Anzeige von Informationen über Rechtsdokumente.
     • psdk-total – zur Anzeige des insgesamt zu zahlenden Kaufbetrags.
   • Zahlunsgmasken-Komponenten. Sie können entweder die integrierte Komponente psdk-payment-form verwenden oder die Zahlungsportal-Elemente manuell mithilfe gebrauchsfertiger Komponenten erstellen.
   • Die Zahlungsschaltflächen-Komponente – psdk-apple-pay. Sie können auch die Komponente psdk-submit-button verwenden, die bereits psdk-apple-pay enthält.

1<psdk-legal></psdk-legal>
2<psdk-total></psdk-total>
3
4
5<psdk-payment-form></psdk-payment-form>
6<psdk-apple-pay text="Apple Pay"></psdk-apple-pay>

4. Fügen Sie die Verarbeitung des Ereignisses check_status für die Zahlungsstatusänderung hinzu.

1headlessCheckout.form.onNextAction((nextAction) => {
2  switch (nextAction.type) {
3    case 'check_status': {
4      showStatus = true;
5    }
6  }
7});

5. Fügen Sie die Komponente psdk-status dem HTML-Markup des Zahlungsportals hinzu, um einen Zahlungsstatus anzuzeigen.

1@if (showStatus) {
2  <psdk-status></psdk-status>
3}

So erkennen Sie die Startseite des iOS Store

Verwenden Sie folgende Codeschnipsel, um die aktuelle Startseite des iOS-Store zu ermitteln und die SDK-Funktionalität auf der Grundlage der Region anzupassen.

1[SKPaymentQueue loadCurrentStorefrontCountryCodeWithCompletion:^(NSString* _Nullable countryCode) {
2    settings.enablePayments = countryCode && [countryCode isEqualToString:@"USA"];
3
4    [[SKPaymentQueue defaultQueue] startWithSettings:settings];
5}];

1SKPaymentQueue.loadCurrentStorefrontCountryCode { countryCode in
2    settings.enablePayments = countryCode == "USA"
3
4    SKPaymentQueue.default().start(settings)
5}

Die Methode loadCurrentStorefrontCountryCode ruft asynchron den aus drei Buchstaben bestehenden Ländercode der aktuellen Startseite des Store ab. Sie können diese Informationen verwenden, um SDK-Funktionen für bestimmte Regionen zu aktivieren oder zu deaktivieren.

Alternativ können Sie auch direkt ursprüngliche Storefront des Apple Store verwenden, wie unten dargestellt:

1let storefront = await Storefront.current   
2let countryCode = storefront?.countryCode
3
4settings.enablePayments = countryCode == "USA"
5
6SKPaymentQueue.default().start(settings)

One-Click-Zahlung über Apple Pay

Bei der One-Click-Zahlung können Nutzer auf unterstützten Geräten mit Apple Pay bezahlen, einer vertrauten und sicheren nativen Zahlungsmethode. So konfigurieren Sie die One-Click-Zahlung:

1. Bitten Sie darum, diese Option zu aktivieren. Gehen Sie dazu wie folgt vor:

   a. Öffnen Sie das Kundenportal, und navigieren Sie zum Support Hub.

   b. Klicken Sie auf Anfrage senden.

   

   c. Füllen Sie im sich öffnenden Fenster die folgenden Felder aus:

   • Zusammenfassung, z. B.: Einrichtung der One-Click-Zahlung über Apple Pay.
   • Beschreibung. Geben Sie die Domain an, die für das Öffnen des Zahlungsportals verwendet wird, z. B.: amazing.store.com.
   • Projekt-ID. Wählen Sie eine Projekt-ID aus der Drop-down-Liste aus. Wenn Sie die One-Click-Zahlungsmöglichkeit für mehrere Projekte konfigurieren möchten, geben Sie die IDs der jeweiligen Projekte im Feld Beschreibung an.

   d. Klicken Sie auf Senden.

2. Warten Sie auf Ihre Domain-Zuordnungsdatei. Dieser Schritt wird von Xsolla durchgeführt:
   1. Xsolla registriert Ihre Domain bei Apple.
   2. Xsolla erhält die Domain-Zuordnungsdatei von Apple.
   3. Xsolla sendet Ihnen die Domain-Zuordnungsdatei per E-Mail und gibt Anweisungen, wo diese hochzuladen ist.

3. Aktualisieren Sie das SDK-Initialisierungsskript wie folgt:

1const config: InitialOptions = {
2  isWebview: false,
3  theme: 'default',
4  language: parameters.language,
5  topLevelDomain: 'amazing.store.com',
6  isApplePayInstantFlowEnabled: true
7};
8
9await initHeadlessCheckoutLib(config);