Also möchten Sie Kreditkarten online akzeptieren?

German (Deutsch) translation by Władysław Łucyszyn (you can also view the original English article)

Bis vor kurzem war die Annahme von Kreditkarten auf einer Website teuer und kompliziert. Aber das war vor Stripe: eine radikal andere und wahnsinnig tolle Kreditkartenfirma. Heute zeige ich Ihnen, wie Sie innerhalb von 30 Minuten Karten annehmen können, ohne einen Cent auszugeben.

Neu veröffentlichtes Tutorial

Alle paar Wochen besuchen wir einige der Lieblingsbeiträge unseres Lesers aus der gesamten Geschichte der Website. Dieses Tutorial wurde erstmals im Juni 2012 veröffentlicht.

Die Art, wie die Dinge einmal waren

Ohne Stripe ist das Akzeptieren von Kreditkarten auf einer Website ein gewaltiges Unterfangen. Zuerst müssen Sie ein "Händlerkonto" eröffnen, das wie ein normales Bankkonto ist, aber mit mehr Gebühren. Dann brauchen Sie ein "Zahlungsgateway" - weil die Kreditkartenverarbeitung offenbar in einer separaten Dimension stattfindet, in der Banker mit eiserner Faust regieren und Lindsey Lohan eine erfolgreiche Schauspielkarriere hat. Und dann kommen die Blutegel: $ 25 monatliche Gebühr. $ 99 Einrichtungsgebühr. 50 $ Jahresgebühr. 0,35 $ gescheiterte Transaktionsgebühr (SIE zahlen, wenn die Karte Ihres Kunden nicht durchgeht!). 0,25 $ + 2,0% erfolgreiche Transaktionsgebühr. $ 2.00 Chargengebühr. $ 5,00 Papa-braucht-eine-neue-porsche Gebühr. Es ist lächerlich. Der beliebteste Kartenprozessor ist Authorize.net, und die Leute bei dieser Firma (und ihren vielen Wiederverkäufern) verbringen jeden Tag damit, an neue, lächerliche Wege zu denken, ihr Geld zu nehmen.

Geben Sie Streifen ein

Die Installation dauert ungefähr fünf Minuten.

Leider ist es illegal, den CEO von Authorize.net zu kidnappen, ihn in Barbecue-Soße zu schichten und ihn in eine Grube von Honigdachsen zu werfen. Aber Sie können das Nächstbeste tun: Verwenden Sie seinen Dienst nicht. Wechseln Sie zu Streifen. Sie benötigen kein Händlerkonto oder Zahlungsgateway. Stripe wird Geld auf ein beliebiges Bankkonto einzahlen. Es gibt keine Gebühren. Die Installation dauert ungefähr fünf Minuten. (Ja, ernsthaft.) Und Sie zahlen genau eine Sache: 2,9% + 0,30 $ für jede erfolgreiche Kartentransaktion. (Also, wenn Sie etwas für 30 $ verkaufen, behalten Sie 28,83 $, und Stripe bekommt 1,17 $.) Die Website ist einfach und intuitiv und die Mitarbeiter sind super hilfreich. Der einzige Nachteil ist, dass Stripe derzeit außerhalb der Vereinigten Staaten nicht verfügbar ist. (Hinweis: Stripe akzeptiert Kreditkarten aus dem Ausland; Sie können sich jedoch nicht für ein Stripe-Konto außerhalb der USA anmelden.) Sie arbeiten daran, in andere Länder zu expandieren.

Im weiteren Verlauf dieses Tutorials wird beschrieben, wie Sie Stripe auf Ihrer Website mit PHP und Javascript (jQuery) implementieren können. Der Dienst verfügt auch über APIs für Ruby, Python, Java und andere Plattformen. Auch wenn es so aussieht, als ob viel Arbeit vor uns liegt, gibt es das wirklich nicht. Sie werden in kürzester Zeit einsatzbereit sein. Lass uns anfangen:

Schritt 0: Installieren Sie ein SSL-Zertifikat

Wir haben Kreditkarteninformationen, daher müssen wir natürlich die Verbindung des Benutzers zu unserem Server sichern. Wir tun dies mit einem SSL-Zertifikat und es ist nicht optional. Benutzer erwarten nicht nur, dass das Protokoll "https: //" auf einer Bestellseite angezeigt wird, Stripe benötigt es. Aber keine Sorge: Die Implementierung von SSL ist sehr einfach. Fast alle Hosting-Provider bieten eine automatische Installation von SSL-Zertifikaten an. Sie kaufen das Zertifikat einfach über Ihren Provider und installieren und konfigurieren es automatisch für Sie. Sie müssen Ihrer Website nichts anderes tun. Wenn sich Ihr Bestellformular unter https://mydomain.com/order.php befindet, senden Sie den Kunden einfach an https://mydomain.com/order.php und die Verbindung wird mit Ihrem neuen SSL-Zertifikat gesichert. Das ist es!

Hinweis: Es gibt eine Ausnahme. Wenn Ihre Bestellseite Ressourcen wie Stylesheets, Skripts oder Bilder mit einer absoluten (im Gegensatz zu einer relativen) URL lädt, müssen Sie sicherstellen, dass diese URLs das Protokoll "https: //" verwenden. Wenn Sie beispielsweise ein Bild auf Ihrer sicheren Bestellseite einfügen, erhalten Sie im Browser eine Warnung, dass die Seite sowohl sichere als auch unsichere Elemente enthält:

1
2	<img src="http://someremotedomain.com/someImage.jpg">

Um dies zu beheben, laden Sie das Image von einer sicheren URL wie folgt:

1
2	<img src="https://someremotedomain.com/someImage.jpg">

Sie müssen sich bei relativen URLs (wie "../images/someImage.jpg") nicht um dieses Problem kümmern, da Ihr Server diese Elemente automatisch sicher lädt.

Schritt 1: Erstellen Sie ein Konto

Besuchen Sie Stripe.com und erstellen Sie ein neues Konto. Sobald Sie die Eingabeaufforderung für den Benutzernamen / das Passwort verlassen haben, klicken Sie oben rechts auf das Menü "Ihr Konto" und öffnen Sie den Bereich "Kontoeinstellungen", der unten abgebildet ist. Stellen Sie zunächst sicher, dass Sie einen guten "Statement Descriptor" festgelegt haben. Das sehen Kunden auf ihren Kreditkartenauszügen. Ein guter Deskriptor hilft dem Kunden, sich an das zu erinnern, was er gekauft hat, damit er Ihre Transaktion nicht fälschlicherweise für Betrug hält und die Belastung storniert. (Wenn dies passiert, wird dies als "Rückbuchung" bezeichnet und Sie zahlen zusätzlich zum Verlust des Verkaufs eine Gebühr von 15 $. Stellen Sie daher sicher, dass Ihr Deskriptor eingestellt ist!) Geben Sie als nächstes das Bankkonto an, auf das Sie Ihr Geld einzahlen möchten . Sie können gerne meine benutzen. Und schließlich werfen Sie einen Blick auf die Registerkarte "API Keys". Wir werden diese in Kürze verwenden, halten Sie sie also griffbereit.

Schritt 2: Erstellen Sie Ihr Zahlungsformular

Das nächste, was wir brauchen, ist ein Formular, das unsere Kunden ausfüllen, um eine Kreditkartenbestellung bei uns zu tätigen. Heute verwenden wir diese stark vereinfachte PHP-Seite namens "buy.php":


<!DOCTYPE html>
<html>
	<head>
		<script src="scripts/jquery.js"></script>
	</head>
	
	<body>
		<h2>Payment Form</h2>
	
		<form id="buy-form" method="post" action="javascript:">
			
			<p class="form-label">First Name:</p>
			<input class="text" id="first-name" spellcheck="false"></input>
			
			<p class="form-label">Last Name:</p>
			<input class="text" id="last-name" spellcheck="false"></input>
			
			<p class="form-label">Email Address:</p>
			<input class="text" id="email" spellcheck="false"></input>
			
			<p class="form-label">Credit Card Number:</p>
			<input class="text" id="card-number" autocomplete="off"></input>
			
			<p class="form-label">Expiration Date:</p>
			<select id="expiration-month">
			<option value="1">January</option>
		    <option value="2">February</option>
		    <option value="3">March</option>
		    <option value="4">April</option>
		    <option value="5">May</option>
		    <option value="6">June</option>
		    <option value="7">July</option>
		    <option value="8">August</option>
		    <option value="9">September</option>
		    <option value="10">October</option>
		    <option value="11">November</option>
		    <option value="12">December</option>
			</select>
			
			<select id="expiration-year">
				<?php 
					$yearRange = 20;
					$thisYear = date('Y');
					$startYear = ($thisYear + $yearRange);
				
					foreach (range($thisYear, $startYear) as $year) 
					{
						if ( $year == $thisYear) {
							print '<option value="'.$year.'" selected="selected">' . $year . '</option>';
						} else {
							print '<option value="'.$year.'">' . $year . '</option>';
						}
					}
				?>
			</select>
			
			<p class="form-label">CVC:</p>
			<input class="text" id="card-security-code" autocomplete="off"></input>
			
			<input id="buy-submit-button" type="submit" value="Place This Order »"></input>
		</form>
	</body>
</html>

Es gibt drei Dinge, die über das obige Code-Snippet zu beachten sind.

Zuerst haben wir die Aktion des Formulars auf "javascript:" gesetzt, anstatt einen Pfad zu einem serverseitigen Skript anzugeben. (Sie werden sehen, warum in einer Minute.)
Zweitens gibt es ein kurzes PHP-Snippet, das unser Feld "Verfallsdatum" automatisch mit den nächsten 20 Jahren füllt, sodass wir es in Zukunft nicht mehr manuell aktualisieren müssen.
Drittens hat keines der Formularfelder einen "Name" -Parametersatz. Dies ist entscheidend, da es verhindert, dass der Wert des Feldes (wie die Kreditkartennummer) an unseren Server gesendet wird, wenn das Formular abgeschickt wird. Wir werden in einer Minute darüber sprechen, warum das wichtig ist.

Wie viel Info sollte ich sammeln?

Das einzige, was Sie absolut müssen, um eine Kreditkarte zu belasten, sind die Kartennummer und das Ablaufdatum. Aber Sie sollten immer mindestens einige zusätzliche Informationen sammeln. Hier ist der Grund: Wenn ein Kunde die Gebühr auf seiner Karte bestreitet, müssen Sie beweisen, dass er tatsächlich eine Bestellung bei Ihnen aufgegeben hat.

Je mehr Informationen Sie sammeln, desto einfacher wird es beweisen, dass der Kunde (im Gegensatz zu einem Identitätsdieb) die Bestellung auf Ihrer Website aufgegeben hat.

Was kommt als nächstes: Das große Bild

Okay, wir haben SSL installiert und ein Zahlungsformular bereit. Nehmen wir an, wir berechnen dem Kunden für diese Bestellung 20,00 $. (In Wirklichkeit würden Sie die Gesamtsumme basierend auf dem, was der Kunde bestellt, etc. berechnen. Das liegt an Ihnen.) Wenn er das Formular ausfüllt und den Absenden-Button drückt, passieren drei Dinge in dieser Reihenfolge:

Mit Javascript (jQuery) erfassen wir den Wert jedes Formularfelds. Wir leiten diese Informationen mit Stripe.js direkt an den Stripe-Server weiter.
Der Server von Stripe stellt sicher, dass die Kreditkartendaten korrekt formatiert sind, bereitet eine Transaktion vor und sendet uns ein "Einmal-Token" zurück.
Wir übergeben das Token an ein serverseitiges Skript auf unserem eigenen Server, das Stripe erneut kontaktiert und die tatsächliche Belastung der Kreditkarte auslöst. Das ist es!

Warum geht es so?

Sicherheit. Die Kreditkarteninformationen des Benutzers berühren niemals unseren eigenen Server. Wir übergeben es direkt auf Stripe auf der Client-Seite mit Javascript. Der Server von Stripe übernimmt diese Informationen und bereitet eine Transaktion vor. Das "Token", das an uns zurückgeschickt wird, enthält NICHT die Kreditkartendetails, enthält jedoch eine ID, mit der wir die Transaktion auslösen können, die Stripe an ihrem Ende vorbereitet hat. So können wir das Token sicher an unseren eigenen Server übergeben, ohne die Sicherheit der Kreditkartendaten des Benutzers zu riskieren.

Hinweis: Obwohl Sie Stripe ohne den Token-Prozess verwenden können, rate ich dringend davon ab. Wenn Sie die rohen Kreditkartendetails an Ihren eigenen Server weitergeben, müssen Sie wahnsinnig vorsichtig sein, um sie zu schützen, und es gibt viele Möglichkeiten, dies zu vermasseln. Zum Beispiel könnten Server-Fehlerprotokolle leicht vertrauliche Informationen aufzeichnen, so dass Sie sie sicher und regelmäßig scrubben müssen. Wenn Sie einen gemeinsamen Hosting-Plan haben, haben Sie wahrscheinlich nicht die erforderliche Kontrolle dafür. Außerdem, wenn Ihr Server jemals gehackt wurde, könnten Sie von abgezählten Kunden in Vergessenheit geraten. Und wenn Sie etwas wirklich Dummes tun, wie unverschlüsselte Karteninformationen in einer Datenbank speichern, werde ich persönlich zu Ihnen nach Hause fahren und Sie mit einem Kaktus schlagen. Sicher gehen; Verwenden Sie den Token-Prozess.

Schritt 3: Sammeln Sie die Formularwerte

Erstellen Sie eine neue Javascript-Datei namens "buy-controller.js". Beginnen wir mit der Codierung dieser Datei mit einigen grundlegenden Validierungsprüfungen:


function showErrorDialogWithMessage(message)
{
	// For the tutorial, we'll just do an alert. You should customize this function to 
	// present "pretty" error messages on your page.
	alert(message);

	// Re-enable the order button so the user can try again
	$('#buy-submit-button').removeAttr("disabled");
}

$(document).ready(function() 
{
	$('#buy-form').submit(function(event)
	{
		// immediately disable the submit button to prevent double submits
		$('#buy-submit-button').attr("disabled", "disabled");
		
		var fName = $('#first-name').val();
		var lName = $('#last-name').val();
		var email = $('#email').val();
		var cardNumber = $('#card-number').val();
		var cardCVC = $('#card-security-code').val();
		
		// First and last name fields: make sure they're not blank
		if (fName === "") {
			showErrorDialogWithMessage("Please enter your first name.");
			return;
		}
		if (lName === "") {
			showErrorDialogWithMessage("Please enter your last name.");
			return;
		}
		
		// Validate the email address:
		var emailFilter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
		if (email === "") {
			showErrorDialogWithMessage("Please enter your email address.");
			return;
		} else if (!emailFilter.test(email)) {
			showErrorDialogWithMessage("Your email address is not valid.");
			return;
		}
		 
		// Stripe will validate the card number and CVC for us, so just make sure they're not blank
		if (cardNumber === "") {
			showErrorDialogWithMessage("Please enter your card number.");
			return;
		}
		if (cardCVC === "") {
			showErrorDialogWithMessage("Please enter your card security code.");
			return;
		}
		
		// Boom! We passed the basic validation, so we're ready to send the info to 
		// Stripe to create a token! (We'll add this code soon.)
		
	});
});

Als nächstes müssen wir diese neue JavaScript-Datei zum -Element unserer "buy.php" -Seite hinzufügen. Wir werden auch "Stripe.js" hinzufügen, eine Datei, die auf dem Stripe-Server gehostet wird und es uns ermöglicht, Stripe von der Client-Seite aus zu kontaktieren, um Kreditkartendaten zu übermitteln und unser Token zu erhalten. (Beachten Sie, dass wir Stripe.js mit dem Protokoll "https: //" laden!) Ändern Sie das -Element von "buy.php" so, dass es so aussieht:


<head>
	<script src="scripts/jquery.js"></script>
	<script src="https://js.stripe.com/v1/"></script>
	<script src="scripts/buy-controller.js"></script>
</head>

API-Schlüssel

Bevor wir Stripe Informationen übermitteln können, müssen wir Stripe irgendwie mitteilen, wer wir sind. Um dies zu tun, verwenden wir ein Paar "Schlüssel", die eindeutige Zeichenfolgen sind, die unser Konto identifizieren. Um diese Schlüssel zu finden, gehen Sie zu Ihrem Bereich Einstellungen für Stripe-Konten und ziehen Sie die Registerkarte API-Schlüssel, wie hier abgebildet, nach oben:

Wie Sie sehen können, gibt es insgesamt vier Tasten in zwei Gruppen: "Test" und "Live". Sie verwenden das Testset während der Entwicklung, damit Sie Ihren Code verifizieren können, ohne tatsächlich Karten zu laden. Wenn Sie bereit sind, eine Website bereitzustellen, ersetzen Sie einfach die Testschlüssel durch die aktiven. Es gibt zwei Schlüssel in jedem Satz: "publishable" und "secret". (Wir verwenden den "geheimen" Schlüssel in unserem serverseitigen Skript, sobald wir ein Token von Stripe erhalten haben.) Nimm vorerst den veröffentlichbaren Testschlüssel und füge ihn so zum HEAD-Element von "buy.php" hinzu :


<head>
	<script src="scripts/jquery.js"></script>
	<script src="https://js.stripe.com/v1/"></script>
	
	<script>
		Stripe.setPublishableKey('pk_0xT4IHiAt1NxoBDJlE2jfLnG5xWQv');	// Test key!
	</script>
	
	<script src="scripts/buy-controller.js"></script>
</head>

Warnung: Sie MÜSSEN Stripe.js einbeziehen, BEVOR Sie den Veröffentlichungsschlüssel festlegen. Seien Sie außerdem sehr vorsichtig, dass Sie keine Website live nehmen, ohne auf die "Live" -Tasten umzuschalten! Und schließlich, seien Sie absolut sicher, Ihre geheimen Schlüssel sicher und geheim zu halten!

Schritt 4: Fordern Sie ein Token an

Am Ende von "buy-controller.js" können wir den Code hinzufügen, der ein Token von Stripe anfordert. Es sind nur ein paar Zeilen:


	// Boom! We passed the basic validation, so request a token from Stripe:
	Stripe.createToken({
		number: cardNumber,
		cvc: cardCVC,
		exp_month: $('#expiration-month').val(),
		exp_year: $('#expiration-year').val()
	}, stripeResponseHandler);
	
	// Prevent the default submit action on the form
	return false;

Die "createToken" -Funktion (die in Stripe.js definiert ist) akzeptiert zwei Parameter. Der erste ist ein Objekt mit den Kreditkartendaten. Der zweite ist der Name der Callback-Funktion, die aufgerufen wird, wenn Stripe's Server die Transaktion vorbereitet und das Token zurückgibt. In diesem Fall heißt unsere Callback-Funktion "stripeResponseHandler". Fügen wir diese Funktion oben in "buy-controller.js" hinzu:


function stripeResponseHandler(status, response)
{
	if (response.error) 
	{
		// Stripe.js failed to generate a token. The error message will explain why.
		// Usually, it's because the customer mistyped their card info.
		// You should customize this to present the message in a pretty manner:
		alert(response.error.message);
	} 
	else 
	{	
		// Stripe.js generated a token successfully. We're ready to charge the card!
		var token = response.id;
		var firstName = $("#first-name").val();
		var lastName = $("#last-name").val();
		var email = $("#email").val();

		// We need to know what amount to charge. Assume $20.00 for the tutorial. 
		// You would obviously calculate this on your own:
		var price = 20;

		// Make the call to the server-script to process the order.
		// Pass the token and non-sensitive form information.
		var request = $.ajax ({
			type: "POST",
			url: "pay.php",
			dataType: "json",
			data: {
				"stripeToken" : token,
				"firstName" : firstName,
				"lastName" : lastName,
				"email" : email,
				"price" : price
				}
		});

		request.done(function(msg)
		{
			if (msg.result === 0)
			{
				// Customize this section to present a success message and display whatever
				// should be displayed to the user.
				alert("The credit card was charged successfully!");
			}
			else
			{
				// The card was NOT charged successfully, but we interfaced with Stripe
				// just fine. There's likely an issue with the user's credit card.
				// Customize this section to present an error explanation
				alert("The user's credit card failed.");
			}
		});

		request.fail(function(jqXHR, textStatus)
		{
			// We failed to make the AJAX call to pay.php. Something's wrong on our end.
			// This should not normally happen, but we need to handle it if it does.
			alert("Error: failed to call pay.php to process the transaction.");
		});
	}
}

Diese Funktion überprüft zuerst, ob beim Erstellen des Tokens ein Fehler aufgetreten ist. Wenn Stripe.js kein gültiges Token zurückgibt, liegt dies normalerweise daran, dass der Kunde einige seiner Kreditkarteninformationen falsch eingegeben hat. Sie haben sich möglicherweise vertippt oder das falsche Ablaufdatum gewählt. Zum Glück wird die Fehlermeldung, die mit der Antwort kommt, Ihnen genau sagen, warum die Token-Erstellung fehlgeschlagen ist. Stripe garantiert, dass diese Fehlermeldung zur Anzeige geeignet ist, aber nicht ausführlich. Erwarte Strings wie "ungültiges Ablaufdatum" oder "inkorrekte CVC" anstelle von ganzen Sätzen.

Wenn andererseits alles validiert wurde und Stripe ein Token erstellt hat, sind wir bereit, dieses Token an unser serverseitiges Skript zu übergeben und die Gebühr tatsächlich zu platzieren. Im obigen Code verwenden wir die Ajax-Funktion von jQuery. Wir übergeben das Token sowie einige Informationen, die wir in einer Datenbank speichern möchten: den Namen und die E-Mail-Adresse des Kunden. Schließlich müssen wir wissen, wie viel Geld die Karte kostet. Wir nehmen heute $ 20,00 an, aber Sie würden einen berechneten Wert aus Ihrem Einkaufswagen usw.übergeben. Wir werfen all diese Informationen in ein JSON-Objekt und machen den Ajax-Aufruf zu unserem serverseitigen Skript "pay.php" ( was wir unten erstellen werden). Dann schauen wir uns einfach die Antwort an und präsentieren dem Benutzer eine Erfolgs- oder Fehlermeldung. Sie würden diesen Code natürlich an das Design Ihrer Website anpassen.

Schritt 5: Erstellen Sie ein serverseitiges Skript

Jetzt müssen Sie nur noch das serverseitige PHP-Skript erstellen, das die Gebühr auf unserer Kundenkarte auslöst. Zuerst benötigen wir die PHP-Bibliothek von Stripe. Um es herunterzuladen, gehen Sie zur Stripe-Website, klicken Sie oben rechts auf den Link "Dokumentation" und wählen Sie dann den Abschnitt "API-Bibliotheken". (Oder Sie können direkt dorthin gehen, indem Sie hier klicken.) Blättern Sie die Seite nach unten, bis Sie den PHP-Abschnitt sehen, der wie folgt aussieht:

Laden Sie die neueste Version herunter und entpacken Sie sie. Sie sehen zwei Elemente: "Stripe.php" und einen Ordner namens "Stripe", der eine Reihe anderer PHP-Dateien enthält. Legen Sie beide Objekte in den Ordner Ihrer Website.

Erstellen Sie nun eine neue Datei namens "pay.php". Wir fangen an, diese Datei mit einigen grundlegenden Dingen zu programmieren:


<?php
// Helper Function: used to post an error message back to our caller
function returnErrorWithMessage($message) 
{
	$a = array('result' => 1, 'errorMessage' => $message);
	echo json_encode($a);
}

// Credit Card Billing 
require_once('Stripe.php');	 // change this path to wherever you put the Stripe PHP library!

$trialAPIKey = "oRU5rYklVzp94Ab0RbBTP0soVdlaEtvm";	// These are the SECRET keys!
$liveAPIKey = "4BYrmtvwLb8iiiq9KIdbnRh5KCeSfPsX";

Stripe::setApiKey($trialAPIKey);  // Switch to change between live and test environments

// Get all the values from the form
$token = $_POST['stripeToken'];
$email = $_POST['email'];
$firstName = $_POST['firstName'];
$lastName = $_POST['lastName'];
$price = $_POST['price'];

$priceInCents = $price * 100;	// Stripe requires the amount to be expressed in cents

An der Spitze haben wir eine einfache Funktion, die wir aufrufen, wenn unser Skript einen Fehler findet. Es gibt ein JSON-Objekt mit zwei Elementen zurück: "result" und "errorMessage". Dieses JSON-Objekt wird zurück an "buy-controller.js" gesendet (wo wir die jQuery-AJAX-Funktion verwendet haben, um dieses serverseitige Skript aufzurufen). Dort können wir den Wert von "Ergebnis" überprüfen, um zu sehen, was passiert ist. Wenn es 0 ist, wurde das Zahlungsskript erfolgreich abgeschlossen. Wenn es 1 ist, hat das Skript einen Fehler gefunden und wir können das Element "errorMessage" verwenden, um zu melden, was mit dem Benutzer passiert ist.

Als nächstes bringen wir die PHP-Bibliothek von Stripe, die wir vorher heruntergeladen haben. Hier ist nichts zu kompliziert; Stellen Sie nur sicher, dass Sie den Pfad in der require-Anweisung zum relativen Speicherort der Stripe-PHP-Bibliothek aktualisieren. Danach haben wir beide unsere SECRET API-Schlüssel. Wir nennen die "setApiKey" -Funktion (die Teil der Stripe-PHP-Bibliothek ist) und geben sie unserem Testschlüssel. Zusammen mit dem bereits veröffentlichten "publishable" -Schlüssel verfügt Stripe nun über alle Informationen, die zur Überprüfung unserer Identität erforderlich sind, und verknüpft diese Transaktion mit unserem Konto. Natürlich, wenn wir die Website live nehmen, würden wir diese Anweisung wechseln, um $ liveAPIKey!

Warnung: Vergessen Sie nicht, zu den LIVE-API-Schlüsseln zu wechseln, wenn Sie Ihre Site veröffentlichen! Sie müssen sowohl den "publishable" -Schlüssel im HEAD-Element von "buy.php" als auch den "secret" -Schlüssel, der oben in "pay.php" erscheint, wechseln.

Und schließlich greifen wir alle Daten, die wir vom AJAX-Call erhalten haben, in "buy-controller.js". Beachten Sie, dass Stripe verlangt, dass wir den Gebührenbetrag in Cent angeben. Hier haben wir den Wert in Dollar übergeben, also multiplizieren wir ihn mit 100, um ihn in Cent umzurechnen.

Laden Sie die Karte tatsächlich auf

Hier ist der Rest des Codes für Pay.php:


try 
{
	// We must have all of this information to proceed. If it's missing, balk.
	if (!isset($token)) throw new Exception("Website Error: The Stripe token was not generated correctly or passed to the payment handler script. Your credit card was NOT charged. Please report this problem to the webmaster.");
	if (!isset($email)) throw new Exception("Website Error: The email address was NULL in the payment handler script. Your credit card was NOT charged. Please report this problem to the webmaster.");
	if (!isset($firstName)) throw new Exception("Website Error: FirstName was NULL in the payment handler script. Your credit card was NOT charged. Please report this problem to the webmaster.");
	if (!isset($lastName)) throw new Exception("Website Error: LastName was NULL in the payment handler script. Your credit card was NOT charged. Please report this problem to the webmaster.");
	if (!isset($priceInCents)) throw new Exception("Website Error: Price was NULL in the payment handler script. Your credit card was NOT charged. Please report this problem to the webmaster.");

	try 
	{
		// create the charge on Stripe's servers. THIS WILL CHARGE THE CARD!
		$charge = Stripe_Charge::create(array(
			"amount" => $priceInCents,
			"currency" => "usd",
			"card" => $token,
			"description" => $email)
		);

		// If no exception was thrown, the charge was successful! 
		// Here, you might record the user's info in a database, email a receipt, etc.

		// Return a result code of '0' and whatever other information you'd like.
		// This is accessible to the jQuery Ajax call return-handler in "buy-controller.js"
		$array = array('result' => 0, 'email' => $email, 'price' => $price, 'message' => 'Thank you; your transaction was successful!');
		echo json_encode($array);
	}
	catch (Stripe_Error $e)
	{
		// The charge failed for some reason. Stripe's message will explain why.
		$message = $e->getMessage();
		returnErrorWithMessage($message);
	}
}
catch (Exception $e) 
{
	// One or more variables was NULL
	$message = $e->getMessage();
	returnErrorWithMessage($message);
}
?>

Überraschend einfach, nicht? Zuerst überprüfen wir, dass keine unserer Variablen null ist. Obwohl wir nicht alle benötigen, um die Karte zu belasten, möchten wir diese Informationen möglicherweise in einer Datenbank aufzeichnen oder sie verwenden, um dem Kunden eine Quittung per E-Mail zu senden, sodass wir nicht fortfahren möchten, wenn sie nicht verfügbar ist.

Dann verwenden wir die Methode "Stripe_Charge :: create ()", die Teil der Stripe PHP-Bibliothek ist. Dies ist die Zeile, die tatsächlich die Karte des Benutzers lädt (oder versucht, dies zu tun). Die ersten beiden Elemente im Array sind selbsterklärend. Auf der dritten, "Karte", übergeben wir das Token, das wir früher von Stripe angefordert haben. Der vierte Punkt "Beschreibung" ist äußerst wichtig. Was auch immer wir hier passieren, das werden wir sehen, wenn wir uns in Stripe einloggen und unsere Transaktionen einsehen. Sie sollten etwas kurz auswählen, das den Kunden identifiziert, der diese Bestellung aufgegeben hat. Eine E-Mail-Adresse ist die beste Wahl, da viele Kunden denselben Namen haben.

Warum könnte der Ladevorgang an diesem Punkt fehlschlagen?

Wenn wir erfolgreich einen Token von Stripe erhalten konnten, warum sollte der Ladevorgang zu diesem Zeitpunkt fehlschlagen? Die Antwort ist, dass die zuvor durchgeführte Validierung Stripe nur überprüft hat, dass die Kreditkartendaten wohlgeformt waren; es hat keine Transaktion über die Kreditkartennetze durchgeführt. Es kann der Fall sein, dass die Karte des Kunden das Limit überschreitet. Oder, wenn es sich um eine Debitkarte handelt, ist möglicherweise nicht genügend Geld auf dem Kundenkonto vorhanden, um diesen Kauf abzudecken. Karte Last!Es kann auch sein, dass das Kreditkartenunternehmen die Transaktion einfach als ungewöhnlich kennzeichnet und die Zustimmung des Kunden benötigt, um es durchzulassen (dies ist mir bei American Express Karteninhabern passiert). In Situationen wie diesen wird die Karte korrekt validiert, wenn wir ein Token anfordern, scheitert jedoch, wenn wir versuchen, sie tatsächlich zu laden. Glücklicherweise macht es Stripe sehr einfach, diese Fehler zu behandeln. Wir verwenden einfach try / catch-Blöcke, wie Sie oben sehen.

Laden Sie die Karte Last!

Wenn dieser Kunde ich bin, sind Sie auf der Suche nach einem Kaktus.

Wenn Ihre Website Dinge wie das Generieren einer Seriennummer für eine Softwarelizenz ausführen muss, sollten Sie dies tun, BEVOR Sie die Karte des Kunden belasten. Wenn Sie die Karte zuerst aufladen und Ihre Website aus irgendeinem Grund keine Seriennummer generiert, wird Ihr Kunde abgehakt. (Wenn dieser Kunde ich bin, sind Sie in einem Kaktus schlagen.) Sie können sogar ihre Kreditkartenfirma anrufen, um die Gebühr zu stornieren, was zu einer Gebühr von $ 15 für Sie und den Verlust eines Verkaufs führt. Gehen Sie also auf Nummer sicher: Vergewissern Sie sich, dass Sie alles bereit haben, BEVOR Sie den Kunden belasten!

Das ist es! Das ist der Code, den Sie benötigen, um eine Kreditkarte auf Ihrer Website zu belasten. Der Rest des Artikels behandelt einige zusätzliche Details zur Verwendung von Stripe, die Sie vielleicht nützlich finden:

Testen und Debuggen

Wenn wir die API-Schlüssel "test" verwenden, können wir spezielle Kreditkartennummern verwenden, die Stripe zwingen, eine bestimmte Art von Antwort zurückzugeben, damit wir unseren Code gründlich testen können. Hier sind die speziellen Nummern:

4242-4242-4242-4242: Simuliert eine erfolgreiche Kartentransaktion
4000-0000-0000-0002: Erzwinge eine Antwort "Karte abgelehnt"
4242-4242-4242-4241: Erzwinge die Antwort "ungültige Kartennummer"

Im Testmodus gilt jede 3- oder 4-stellige CVC-Nummer als gültig. Jedes Ablaufdatum, das in der Zukunft liegt, ist gültig. Sie können eine zweistellige CVC-Nummer übergeben, um diesen Fehlerfall zu testen. Ebenso können Sie ein beliebiges Datum in der Vergangenheit übergeben, um die ungültige Ablaufdatumsantwort zu testen. Und schließlich, wenn Sie die Antwort "ungültige Menge" testen möchten, übergeben Sie einfach alle nicht-ganzzahligen (wie 1,35) als den Betrag zu berechnen.

Umfassende Informationen zum Testen von Stripe finden Sie auf der Dokumentationsseite.

Abonnements, Karteninformationen speichern & mehr

Mit Stripe können Sie mehr als einmalige Gebühren für eine Kundenkarte tätigen. Sie können ein Abonnement einrichten, bei dem die Karte in einem von Ihnen gewählten Intervall mit einem bestimmten Betrag belastet wird. Die APIs, die Sie dazu benötigen, sind Teil der Stripe-PHP-Bibliothek und die Website enthält eine hervorragende Dokumentation, die Sie durch den Prozess führt.

Was, wenn Sie Kreditkarteninformationen speichern möchten, damit Kunden sie nicht bei jedem Besuch Ihrer Website eingeben müssen? Mit Stripe kannst du das auch! Sie erstellen einfach ein "Kunden" -Objekt auf die gleiche Weise, wie wir ein Token erstellt haben. Dieses Objekt enthält alle sensiblen Daten, die zu einem bestimmten Kunden gehören. Stripe speichert diese Informationen sicher an ihrem Ende (was bedeutet, dass Sie keine Kakteenschläge riskieren müssen) und Sie können dem Benutzer jederzeit Rechnung stellen, indem Sie einfach das entsprechende "Kunden" -Objekt anfordern, genau wie wir es mit dem Token getan haben. Auch hier sind alle APIs Teil der Stripe-PHP-Bibliothek und die Website führt Sie durch diese.

Sehen Sie es in Aktion

Also das war's: Streifen auf den Punkt gebracht! Wenn Sie ein funktionierendes Beispiel dessen, was wir gerade behandelt haben, mit etwas mehr Komplexität und Design sehen möchten, gehen Sie auf diese Seite und überprüfen Sie die Quelle. (Tipp: Es wird dir bekannt vorkommen.) Ansonsten, wenn du Fragen hast, hinterlasse einen Kommentar, sieh dir die Stripe Support Seite an oder finde mich auf Twitter: @bdkjones. Danke und viel Glück!