Bezahlen über Amazon: WidgetHandbuch für die Standard-Integration
2 | Bezahlen über Amazon | Inhaltsverzeichnis
Inhalt Überblick über die Inline-IntegrationStandard-Integration von Bezahlen über Amazon ................................... 3 Über dieses Dokument............................................................................................................................. 3 Voraussetzungen ..................................................................................................................................... 3 Code-Beispiele......................................................................................................................................... 3 Letzte Änderungen in diesem Dokument.................................................................................................3 Überblick über "Bezahlen über Amazon"-Widgets............................................................................................. 5 Widget-Konfiguration.............................................................................................................................. 5 Allgemeine Widget-Methoden................................................................................................................. 5 Allgemeine Widget-Parameter................................................................................................................. 6 Widgets.................................................................................................................................................................7 Liste der Widgets nach Funktion............................................................................................................. 7 StandardCheckoutWidget.....................................................................................................................................8 Beschreibung............................................................................................................................................ 8 Widget-Parameter.....................................................................................................................................8 Widget-Methoden.....................................................................................................................................9 Beispiel.....................................................................................................................................................9 Bestelldetails-Widget......................................................................................................................................... 12 Beschreibung.......................................................................................................................................... 12 Widget-Parameter...................................................................................................................................12 Widget-Methoden...................................................................................................................................12 Beispiel...................................................................................................................................................13
Bezahlen über Amazon | Überblick über die Inline-IntegrationStandard-Integration von Bezahlen über Amazon | 3
Überblick über die Inline-IntegrationStandard-Integration von Bezahlen über Amazon Dieser Abschnitt beschreibt, wer dieses Handbuch lesen sollte und wie dieses aufgebaut ist.
Über dieses Dokument Dieses Dokument enthält die Informationen und Schritte, die Sie benötigen, um die Inline-Integration StandardIntegration der "Bezahlen über Amazon"-Widgets auf Ihrer Website vorzunehmen.
Voraussetzungen Bevor Sie die Inline-IntegrationStandard-Integration für Bezahlen über Amazon nutzen können, müssen Sie die folgenden Voraussetzungen erfüllen: • • •
Sie müssen mit der Nutzung von Webservice-APIs vertraut sein. Sie müssen mit der Programmierung dynamischer Webseiten vertraut sein. Sie müssen mit der Nutzung von JavaScript vertraut sein. (Es gibt verschiedene erforderliche JavaScriptCodebausteine, die Sie in Ihren Einkaufswagen-Code einfügen müssen, um die Inline-IntegrationStandardIntegration durchzuführen.)
Für weitere Informationen zur Nutzung der Inline-IntegrationStandard-Integration lesen Sie bitte die folgenden Handbücher: • •
API-Referenz zur Inline-Integration (PDF) Inline Checkout Implementation Guide (PDF, englisch)
• •
HTML Implementation Guide (PDF, englisch) XML Implementation Guide (PDF, englisch)
Code-Beispiele Bezahlen über Amazon stellt Ihnen Code-Beispiele in verschiedenen Programmiersprachen zur Verfügung, um Sie bei der Implementierung der Inline-IntegrationStandard-Integration zu unterstützen. Klicken Sie auf die jeweilige Programmiersprache, um das zugehörige Code-Beispiel herunterzuladen. • • •
Java .NET PHP
• • • •
Java C# (ASP.NET) VB.NET PHP
Letzte Änderungen in diesem Dokument Veröffentlichungsdatum
Änderungen
13.12.2011
Kleine Korrekturen
4 | Bezahlen über Amazon | Überblick über die Inline-IntegrationStandard-Integration von Bezahlen über Amazon
Veröffentlichungsdatum
Änderungen
15.09.2010
Dokument erstmalig veröffentlicht
Bezahlen über Amazon | Überblick über "Bezahlen über Amazon"-Widgets | 5
Überblick über "Bezahlen über Amazon"-Widgets
Widget-Konfiguration Wir empfehlen Ihnen, für die Generierung der Widgets den Integrationsassistenten für die Inline-Integration zu verwenden, den Sie in Seller Central finden. Passen Sie den von uns zur Verfügung gestellten Code-Baustein an (Beispiel unten) und fügen Sie ihn auf jeder Seite ein, auf der Sie das Widget rendern möchten. Platzieren Sie den div-Block an der Stelle, an der Sie das Widget anzeigen möchten.
new CBA.Widgets.XXXWidget ({ // Widget-specific parameters }).render("AmazonWidget"); Die Widget-Konfiguration besteht aus 3 Schritten: 1. Fügen Sie die Datei PaymentWidgets.js auf Ihrer Seite hinzu. Wenn Sie mehrere "Bezahlen über Amazon"-Widgets auf derselben Seite einfügen möchten, dann laden Sie externe JavaScript-Dateien (wie zum Beispiel PaymentsWidget.js) nur einmal. 2. Platzieren Sie ein div-HTML-Element an der Stelle, an der Sie das Widget auf Ihrer Seite anzeigen möchten. Geben Sie dem div-Element einen eindeutigen Namen. 3. Erzeugen Sie innerhalb eines script-Blocks eine Instanz des Widgets, das Sie anzeigen möchten. Hinweis: Die Erzeugung einer Widget-Instanz macht dieses nicht automatisch sichtbar. Sie müssen die Methode render() der Widget-Instanz aufrufen, wenn Ihre Seite für die Anzeige des Widgets bereit ist. URLs für Bezahlen über Amazon Bezahlen über Amazon bietet länderspezifische URLs an, um die Internationalisierung (i18n) zu unterstützen. Die JavaScript-URL für den Produktiv-Modus lautet: https://static-eu.payments-amazon.com/cba/js/de/PaymentWidgets.js Die JavaScript-URL für den Sandbox-Modus (Testmodus) lautet: https://static-eu.payments-amazon.com/cba/js/de/sandbox/PaymentWidgets.js
Allgemeine Widget-Methoden Jedes Widget unterstützt die folgenden Methoden: Name
Beschreibung
render(locationId)
Rendert das Widget inline. Der Eingabeparameter locationId muss die ID des HTML-Elements (div oder span) mit dem zu rendernden Widget enthalten. locationId muss immer angegeben werden und eindeutig sein.
string getLocation()
Gibt die verknüpfte locationId zurück, eingestellt durch die RenderMethode.
6 | Bezahlen über Amazon | Überblick über "Bezahlen über Amazon"-Widgets
Name
Beschreibung
string getWidgetType()
Gibt den Widget-Typ zurück, basierend auf dem Widget. Liste der möglichen Werte: 'StandardCheckoutWidget', 'ExpressCheckoutWidget', 'InlineCheckoutWidget', 'AddressWidget', 'WalletWidget', 'OrderDetailsWidget'
Allgemeine Widget-Parameter Die folgenden Parameter sind für jedes Widget einsetzbar. Die zusätzlichen Parameter für die jeweiligen Widgets finden Sie in den jeweiligen Kapiteln. Pflichtfeld
Name
Typ
Beschreibung
Pflichtfeld
merchantId
String
Ihre Händlernummer ist in jedem Widget ein Pflichtfeld.
Bezahlen über Amazon | Widgets | 7
Widgets
Liste der Widgets nach Funktion Bestellprozess starten • • •
Inline-Bestellprozess-Widget (InlineCheckoutWidget) Expressbestellungen-Widget (ExpressCheckoutWidget) Standard-Bestellprozess-Widget (StandardCheckoutWidget) Hinweis: Bitte lesen Sie die jeweiligen "Bezahlen über Amazon"-Implementierungshandbücher, um weitere Details zum Starten des Bestellprozesses mithilfe der obenstehenden Widgets zu erhalten.
Auf Kontoinformationen zugreifen • •
Adressbuch-Widget (AddressWidget) Zahlungsarten-Widget (WalletWidget)
Auf Bestelldetails zugreifen •
Bestelldetails-Widget (OrderDetailsWidget)
8 | Bezahlen über Amazon | StandardCheckoutWidget
StandardCheckoutWidget
Beschreibung Das StandardCheckoutWidget rendert den "Bezahlen über Amazon"-Button, mit dessen Hilfe Ihre Käufer Bestellungen in einem von Amazon Payments gehosteten Pop-Up-Fenster aufgeben können. Bitte lesen Sie die Implementierungshandbücher XML und HTML für Details zur Integration von Bezahlen über Amazon auf Ihrer Website.
Widget-Parameter Die folgenden zusätzlichen Parameter werden von diesem Widget unterstützt. Allgemeine Parameter entnehmen Sie bitte dem ersten Kapitel, diese werden hier nicht noch einmal aufgelistet. Tabelle 1: Pflichtfeld
Name
Typ
Beschreibung
bedingt
orderInput
Objekt
orderInput hat zwei Eigenschaften: {format: "HTML", value: "formid"} Das Formatfeld muss einen der folgenden beiden Werte beinhalten: "HTML" oder "XML". Im Formatfeld wird das Format der Bestelleingabedatei festgelegt. •
•
Wenn das Format "HTML" festgelegt wurde, dann muss das value-Feld die ID des FormularElements mit dem HTML-Einkaufswagen enthalten. Für weitere Informationen zum Generieren eines Formular-Elements lesen Sie bitte das Implementierungshandbuch HTML. Wenn das Format "XML" festgelegt wurde, dann muss das Feld einen base64-kodierten XML-Einkaufswagen-String (signiert oder unsigniert) enthalten. Bitte lesen Sie das Implementierungshandbuch XML für Anweisungen zur Kodierung von Strings.
Der orderInput-Parameter kann gesetzt werden, nachdem das Widget initialisiert und gerendert wurde. Er muss allerdings verfügbar sein, bevor der Käufer die Einkaufswagendetails sehen kann. optional
onOpen
CallbackFunktion
JavaScript-Funktion, die ausgeführt wird, wenn das Pop-Up-Fenster mit dem StandardBestellprozess nach einem Klick auf den "Bezahlen über Amazon"-Button aufgerufen wird. Der Code wird ausgeführt, bevor Ihr Käufer die Bestelldetails im Pop-Up-Fenster sehen kann. Das Widget-Objekt wird als Eingabeparameter an die Funktion weitergegeben. Sie können den orderInput-Parameter innerhalb dieser Funktion
Bezahlen über Amazon | StandardCheckoutWidget | 9
Pflichtfeld
Name
Typ
Beschreibung setzen, so dass der Käufer die letzten Bestelldetails sieht, nachdem das Pop-Up-Fenster geladen wurde. Erst nachdem Sie die submit-Methode aufgerufen haben, wird Ihr Käufer die Details zur Bestellung sehen.
optional
buttonSettings
Objekt
Nachfolgend sehen Sie ein Beispiel für die ButtonEinstellungen: {size:'large'; color:'orange'; background:'white'} Die folgenden Werte sind für Buttons möglich: Size: medium | large | x-large. Large (groß) ist der Standard-Wert. Color: orange | tan. Orange ist der Standard-Wert. Background: white | light | dark. White (weiß) ist der Standard-Wert.
optional
cartOrigin
String
Mögliche Werte sind "CartPage" und "DetailPage". "CartPage" ist der Standard-Wert.
Widget-Methoden Die folgenden Methoden werden zusätzlich von diesem Widget unterstützt. Die allgemein verfügbaren Methoden finden Sie im ersten Kapitel dieses Handbuchs. Tabelle 2: Name
Beschreibung
updateOrderInput(orderInput)
Verwenden Sie diese Methode, um den orderInput-Parameter nach der Initialisierung des Widgets zu aktualisieren. Diese Funktion wird meistens dann verwendet, wenn eine JavaScript-Funktion mit dem onOpenParameter verknüpft wurde.
submit()
Wenn Sie eine Funktion mit dem onOpen-Parameter verknüpfen, kann der Käufer erst dann eine Adresse und eine Zahlungsart auswählen, nachdem Sie die Methode submit() aufgerufen haben.
Beispiel Unten sehen Sie einen einfachen Einsatz des Widgets mit einem Einkaufswagen im XML-Format. Der Button verwendet die folgenden Standard-Einstellungen: {size:'large'; color:'orange'; background:'white'} (Größe: Groß, Farbe: Orange, Hintergrundfarbe: Weiß).
new CBA.Widgets.StandardCheckoutWidget({ merchantId: "AEIOU1234AEIOU", orderInput: {format: "XML", value: "type:merchant-signed-order/awsaccess-key/1; order:PD94bWwgdmVyc2lvbj0nMS4wJyBlbmNvZGluZz0nVVRGL TgnPz48T3JkZXIgeG1sbnM9J2h0dHA6Ly9wYXltZW50cy5hbWF6 b24uY29tL2NoZWNrb3V0LzIwMDgtMTEtMzAvJz48Q2FydD48SXR lbXM+PEl0ZW0+PFNLVT5BQkMxMjM8L1NLVT48TWVyY2hhbnRJZD 5BMUVKTjJKSUcxMEs2NzwvTWVyY2hhbnRJZD48VGl0bGU+UmVkI EZpc2g8L1RpdGxlPjxQcmljZT48QW1vdW50PjE5Ljk5PC9BbW91 bnQ+PEN1cnJlbmN5Q29kZT5VU0Q8L0N1cnJlbmN5Q29kZT48L1B yaWNlPjxRdWFudGl0eT4xPC9RdWFudGl0eT48RnVsZmlsbG1lbn ROZXR3b3JrPk1FUkNIQU5UPC9GdWxmaWxsbWVudE5ldHdvcms+P C9JdGVtPjwvSXRlbXM+PC9DYXJ0PjwvT3JkZXI+; signature:0nppbXTktfoV80Kh41GK7ruUhq8=; aws-access-keyid:19G7E7X2QE2V45LETX2E"} }).render("cbaButton"); Unten sehen Sie ein anderes einfaches Beispiel des Widgets, diesmal mit einem Einkaufswagen im HTML-Format. Achten Sie darauf, wie die ID des Formular-Elements innerhalb des orderInput-Parameters genutzt wird. Der Button wird mit den Eigenschaften x-large (extra groß), tan (beige) und mit einem dunklen Hintergrund generiert.
new CBA.Widgets.StandardCheckoutWidget({ merchantId: "AEIOU1234AEIOU", buttonSettings: {size:'x-large',color:'tan',background:'dark'}, orderInput: {format: "HTML", value: "CBACartFormId"} }).render("cbaButton"); Unten sehen Sie ein erweitertes Beispiel, in dem orderInput mithilfe eines AJAX-Handlers konfiguriert wurde. Achten Sie darauf, wie die Methode submit() aufgerufen wird, nachdem die AJAX-Antwort angekommen ist. Das untenstehende Beispiel benutzt JQuery, um den AJAX-Aufruf zu implementieren.
Bezahlen über Amazon | StandardCheckoutWidget | 11
new CBA.Widgets.StandardCheckoutWidget({ merchantId: ABCDEFG, buttonSettings: {background:'light'}, onOpen: function() { $.ajax({ url: 'ajax/test.html', complete: function(data) { // Intialisiert die Variable cartXML mit dem kodierten // cart-XML-String, der aus der AJAX-Antwort extrahiert // wurde. Setzen Sie anschließend den Parameter // orderInput und rufen Sie die Methode submit() auf, // um dem Widget zu signalisieren, dass es die // Bestelldetails anzeigen soll this.updateOrderInput({format: "XML", value: cartXML}); this.submit(); } }); } }).render("cbaButton");
12 | Bezahlen über Amazon | Bestelldetails-Widget
Bestelldetails-Widget
Beschreibung Mithilfe des Bestelldetails-Widgets können Amazon-Kunden die Details einer vorhandenen "Bezahlen über Amazon"-Bestellung auf der Website des Händlers einsehen.
Widget-Parameter Tabelle 3: Pflichtfeld
Name
Datentyp
Beschreibung
Pflichtfeld
orderID
String
Amazon Payments Bestellnummer
optional
design
Object
Dieser Eingabeparameter wird nur angewendet, wenn die Methode render() aufgerufen wird. Wenn die Methode open() benutzt wird, wird dieser Eingabeparameter ignoriert. Amazon Payments stellt vordefinierte Design-Sets zur Verfügung. Jedes Design (unterschieden durch das Namens-Attribut) beinhaltet eine Auswahl von Farbschemen und gültigen Größen. Das NamensAttribut ist optional; falls es nicht angegeben wird, wird das Standard-Design für das jeweilige Widget genutzt. Trotzdem können Sie ein spezielles Farbschema und die gewünschte Größe für das Standard-Design festlegen. {name: 'Vordefinierter Name', colorTheme: 'Vordefiniertes Farbschema', size: {width: 'Breite in Pixel', height: 'Höhe in Pixel'} } Bitte beachten Sie, dass Sie bei der Festlegung der Breite (width) und Höhe (height) nur Zahlen verwenden dürfen. Fügen Sie keine MaßstabBezeichnungen wie "px" hinzu.
Widget-Methoden Die folgende Tabelle listet die speziellen Methoden auf, die vom OrderDetailsWidget (Bestelldetails-Widget) zusätzlich zu den allgemeinen Methoden unterstützt werden. Tabelle 4: Name
Datentyp
Beschreibung
open(top, left)
Funktion
Öffnet das Widget innerhalb einer Lightbox an einer zuvor festgelegten Position. Verkäufer können diese Methode
Bezahlen über Amazon | Bestelldetails-Widget | 13
Name
Datentyp
Beschreibung anstelle der Render-Methode verwenden, um Bestelldetails in einem modalen Dialogfenster anzuzeigen, nachdem der Käufer auf einen Link oder Button geklickt hat. Die Positionen oben und links können in Pixel oder als Prozentwerte angegeben werden. Die Prozentwerte beschreiben den relativen Abstand zum Browserfenster. Die Parameter top (Abstand oben) und left (Abstand links) sind erforderlich.
Hinweis: Sie können außerdem die Methode render() verwenden (siehe Allgemeine WidgetMethoden in diesem Dokument). Größenangaben Wenn Sie die OrderDetailsWidget-Methode open() verwenden, wird ein Pop-Up-Fenster mit 422 Pixel Breite und 340 Pixel Höhe geöffnet. Bitte beachten Sie, dass Sie bei Verwendung der Methode open() die Größe des Pop-UpFensters nicht konfigurieren können. Wenn Sie die OrderDetailsWidget-Methode render() verwenden, können Sie zusätzlich die Breite und Höhe der Box mit der Zusammenfassung der Bestellung festlegen. Sie können die Größe im Rahmen des designEingabeparameters konfigurieren. Die untenstehende Tabelle listet die verfügbaren Größenbereiche und die Standardgröße auf. Breite (Pixel)
Höhe (Pixel)
Standard (Pixel)
Min
Max
Min
Max
392
600
310
400
392 (breit) x 310 (hoch)
Beispiel Verwenden Sie dieses Beispiel, um die Bestelldetails nach einem Klick auf einen Link anzuzeigen. Das Widget wird an der folgenden Position geöffnet: pos-x = 554px und pos-y = 230px
Ihre "Amazon Payments"-Bestellnummer lautet 902-3317348-8724505.
// Ersetzen Sie"AEIOU1234AEIOU" durch Ihre eigene Händlernummer (merchantId) merchantId: "AEIOU1234AEIOU", var orderDetailsWidget = new CBA.Widgets.OrderDetailsWidget({ // Ersetzen Sie die Amazon-Bestellnummer ("AMAZON ORDER ID") // '902-3317348-8724505' dynamisch durch die korrekte Amazon-Bestellnummer orderID: '902-3317348-8724505' }); Verwenden Sie dieses Beispiel, um die Bestelldetails als Teil Ihres Seitenlayouts anzuzeigen. In diesem Beispiel werden die Bestelldetails innerhalb von OrderDetailsWidget angezeigt, wenn die Seite geladen wird.
new CBA.Widgets.OrderDetailsWidget ({ // Ersetzen Sie "AEIOU9999AEIOU" durch Ihre // eigene Händlernummer (merchantId)
14 | Bezahlen über Amazon | Bestelldetails-Widget
merchantId: "AEIOU9999AEIOU", // Ersetzen Sie die Amazon-Bestellnummer ("AMAZON ORDER ID") // '902-3317348-8724505' dynamisch durch die korrekte Amazon-Bestellnummer orderID: "902-3317348-8724505" }).render ("amazonOrderDetail");
