Zo integreer je een betaalgateway en kassa in je statische site

In het verleden waren statische websites meestal alleen voorzien van productafbeeldingen en -beschrijvingen, zodat klanten via e-mail of telefoon konden bestellen. Tegenwoordig verwachten klanten echter een dynamischere ervaring met robuuste e-commerce functionaliteiten. Dit stroomlijnt het aankoopproces en spoort gebruikers aan om transacties op jouw site af te ronden in plaats van naar de concurrentie te vertrekken.

Een betaalgateway en kassa toevoegen aan je statische site is heel eenvoudig. Met API’s (Application Programming Interfaces) en serverloze architecturen kun je e-commerce features in statische websites inbouwen, zodat je bedrijf direct transacties kan accepteren.

Deze tutorial bespreekt hoe je PayPal en Stripe betalingsgateways kunt toevoegen aan de statische site van een bloemenwinkel. Volg de stappen om te leren hoe je deze functies aan je website kunt toevoegen en nieuwe mogelijkheden kunt creëren om online verkopen te stimuleren.

Beginnen

Voordat we beginnen met de stappen voor het integreren van een betaalgateway en kassa op je statische site, leggen we eerst de basis voor een soepele en succesvolle implementatie.

1. Download en implementeer deze voorbeeldcode voor een statische site die je kan installeren op de Statische Site Hosting van Kinsta.
2. Meld je aan voor een PayPal account en kies voor een zakelijke account, omdat die geschikter is voor deze tutorial. Dit type account is nodig voor het testen van de knoppen die je integreert. Nadat je je hebt aangemeld, voeg je je bedrijfsgegevens toe en koppel je een bankrekening. Na verificatie van je account kun je API gegevens verkrijgen van het PayPal Developer portal voor later gebruik.
3. Maak een Stripe account aan en voer je bedrijfs- en bankgegevens in. Stripe biedt een snelle accountactivatie, wat voordelig is voor dit project. Zodra je account actief is, heb je direct toegang tot het Stripe dashboard. Hier haal je je API sleutel op, een cruciaal onderdeel dat je nodig hebt in de volgende stappen.

De preview van de statische site bekijken

Deze handleiding gebruikt een reeds bestaande statische site om de integratie van PayPal en Stripe te laten zien. Ondanks de statische inhoud, bootst de voorbeeldwebsite een online bloemenwinkel na.

Kinsta’s infrastructuur voor Statische Site Hosting biedt een efficiënte omgeving voor het implementeren en testen van PayPal en Stripe kassafuncties om een meer geavanceerde en aantrekkelijke statische website te maken.

Ga na het pushen van je site naar Kinsta naar de startpagina. Klik op de knop ORDER INQUIRY.

Selecteer een beschikbaar product op de pagina Flowers Catalog – de Turkish Rose.

Deze actie brengt je naar de pagina met productdetails, waar de betaalknoppen voor PayPal en Stripe zijn geïmplementeerd.

Je PayPal kassa integreren in je statische site

Het toevoegen van een PayPal kassa biedt je klanten een veilige en vertrouwde betaalmethode en stroomlijnt het transactieproces, wat de gebruikerservaring verbetert. Deze integratie kan de functionaliteit van je site en de klanttevredenheid aanzienlijk verhogen.

Zo integreer je PayPal checkout in je statische site:

1. Log in op het PayPal Developer Dashboard.
2. Navigeer op het dashboard naar de Apps & Credentials sectie. Zet de Sandbox modus aan en klik op Create app.
3. Geef je app een naam in het formulier (bijv. Kinsta Gateway Demo). Selecteer Merchant als type en klik op Create App.

   

4. Kopieer de Client ID uit het API credentials gedeelte om later een PayPal checkout knop te maken.

   

5. Scroll naar beneden op de pagina van de applicatie om andere instellingen te bekijken. De standaardinstellingen zijn prima voor deze tutorial. Klik op Save changes.

   

6. Integreer vervolgens PayPal checkout in je statische site. Maak een afrekenknop met PayPal’s JavaScript SDK voor alternatieve betaalmethoden (APM). Hiermee kun je verschillende betaalmethoden integreren in een statische site zonder een backend applicatie op te zetten. Voeg de volgende JavaScript code toe aan het bestand product.html, net voor de afsluitende tag </body>. Vervang YOUR_CLIENT_ID door je PayPal-klant-ID. Mogelijk moet je ook de munteenheid USD vervangen door de munteenheid die je PayPal rekening accepteert.

   <!-- PAYPAL BUTTON SCRIPT-->
   <script   
   src="https://www.paypal.com/sdk/js?client-id=YOUR_CLIENT_ID¤cy=USD"   
   data-sdk-integration-source="button-factory"></script>
   <script>
   paypal.Buttons({
   	createOrder: function(data, actions) {
   	// Set up the transaction
   	return actions.order.create({
   		purchase_units: [{
   		amount: {
   			value: '1.00'
   		}
   		}]
   	});
   	},
   	onApprove: function(data, actions) {
   	// Capture the funds from the transaction
   	return actions.order.capture().then(function(details) {
   		// Show a success message to the buyer
   		alert('Transaction completed by ' + details.payer.name.given_name);
   	});
   	}
   }).render('#paypal-button-container');
   </script>
   <!-- PAYPAL BUTTON SCRIPT-->

   De functie paypal.Buttons definieert twee functies:

   • createOrder – Configureert de transactiedetails, zoals het aankoopbedrag (1,00 USD in dit geval).
   • onApprove – Handelt de goedkeuring van de transactie af, legt het geld vast en geeft een succesbericht weer aan de koper. In de bovenstaande code gebruiken we de functie alert().

   Tot slot geeft de functie render aan dat de PayPal knop moet worden weergegeven in de bestaande <div> met de ID paypal-button-container.

   PayPal is nu geïntegreerd in je statische site.

Je Stripe Checkout integreren in je statische site

Stripe is een veelgebruikt technologieplatform dat oplossingen biedt voor het verwerken van betalingen voor grote en kleine bedrijven. Hier lees je hoe je een Stripe betaling toevoegt aan je statische site:

1. Voordat je de Stripe afrekenknop implementeert, kun je producten en prijzen beheren via een API of het Stripe dashboard. Om het dashboard te gebruiken, open je het, selecteer je Test modus en klik je op Product catalog.

   

2. Klik op de knop + Add product om het formulier Add product te openen.

   

3. Voer de gegevens van je product in de volgende velden in:
   • Name: Turkish Rose
   • Description : This is a beautiful Turkish Rose
   • Image: (Upload het voorbeeld imagesturkishrose.png bestand)
   • Payment model: One-off
   • Amount: $1.00
   • Valuta: USD (of de valuta van jouw keuze)
4. Klik op Add product.
5. Selecteer het product Turkish Rose in de lijst op de pagina Product catalog.

   

6. Klik in de sectie Pricing van de producten op Create payment link. Bekijk de productopties en zorg ervoor dat de hoeveelheid 1 is.

   

7. Klik op Create link.

   

8. Klik op de pagina Payment links op Buy button.

   

9. Wanneer het paneel Buy button verschijnt, kun je de gegenereerde code voor de betaalknop bekijken. Kies de knopindeling, schakel Change button text in en typ “Buy with Stripe” in het veld Change button text. Klik vervolgens op Save changes and copy code om de gegenereerde code naar het klembord van je besturingssysteem te kopiëren.

   

10. Plak de gekopieerde code in het bestand product.html van de voorbeeldcode vóór de afsluitende tag </body> (tussen het commentaar STRIPE BUTTON BEGIN en STRIPE BUTTON END ), net als bij PayPal.

    <!-- STRIPE BUTTON BEGIN -->
    <script> async
      src="https://js.stripe.com/v3/buy-button.js">
    </script>
    
    <stripe-buy-button>
      buy-button-id="BUY_BUTTON_ID"
      publishable-key="PUBLISHABLE_KEY"
    >
    </stripe-buy-button>
    <!-- STRIPE BUTTON END -->

Als je klaar bent met het implementeren van de PayPal en Stripe afrekenknoppen, deploy dan de statische site code naar je Kinsta Statische Site Hosting omgeving.

Het afrekenproces testen

Open de pagina met productdetails van de statische demosite. Controleer of de PayPal en Stripe knoppen correct worden weergegeven.

Klik op de PayPal afrekenknop. Er zou een inlogdialoogvenster moeten worden geopend waarin je klant zich kan verifiëren bij PayPal om zijn aankoop te doen.

Als je in dit stadium inlogproblemen tegenkomt, kan dat komen doordat je met een persoonlijk account hebt getest in plaats van een zakelijk account.

Klanten kunnen ook kiezen voor de PayPal Debet of Credit Card knop. Klik op die optie om het dialoogvenster weer te geven. Voer enkele rekeninggegevens in.

PayPal zou je bestel- en rekeninggegevens moeten presenteren. Klik op Complete purchase.

Als PayPal de transactie goedkeurt, geeft de JavaScript code van de client een waarschuwing dat de transactie is voltooid. Deze waarschuwing is bedoeld voor ontwikkelings- en debuggingdoeleinden – je moet het niet gebruiken in productiecode.

Om die transactie te controleren, open je het PayPal for Business dashboard. Klik op Activity > All transactions om een gedetailleerde lijst van alle recente transacties te zien.

Op de product.html pagina van de bloemensite kun je ook de Stripe checkoutflow testen door op de Buy with Stripe knop te klikken. Deze actie activeert het Stripe dialoogvenster met de productgegevens en betalingsopties, waaronder Google Pay, Link en creditcardbetalingen.

Voor demonstratiedoeleinden kies je Google Pay. Een dialoogvenster vraagt je om de aankoop te bevestigen met Google Pay met een kaart uit je lijst, zoals een opgeslagen Mastercard.

Klik op PAY. Als het lukt, presenteert Stripe de aankoopbevestiging aan de klant.

Open in het Stripe Dashboard het tabblad Payments. Het toont de details van de voltooide transactie, waaronder het bedrag, de valuta, de omschrijving, de klant en de datum.

Problemen met afrekenen oplossen

Hier zijn een aantal stappen voor het oplossen van problemen om fouten te diagnosticeren en op te lossen die je tegenkomt tijdens het testen van het afrekenen:

• Herstel de configuratie van de betalingsgateway.
• Valideer je SSL certificaat.
• Controleer de browsercompatibiliteit van de klant.
• Pas de juiste foutafhandeling toe.
• Test het afrekenproces in meerdere omgevingen.
• Gebruik logging- en monitoringtechnieken.

Samenvatting

Je hebt nu afrekenknoppen voor PayPal en Stripe geïntegreerd in een voorbeeld van een online bloemenwinkel die wordt gehost met Kinsta. Dezelfde technieken kunnen worden gebruikt om betaalopties toe te voegen aan je andere statische websites, om klanten aan te moedigen je producten te kopen en de sales een boost te geven.

De Statische Site Hosting van Kinsta is een ultieme speeltuin voor developers die willen spelen binnen de rijke wereld van e-commerce en betalingsintegratie. De robuuste infrastructuur zorgt voor het snel laden van pagina’s en ondersteunt een soepele online winkelervaring.

Naast de Statische Site Hosting dienst, biedt Kinsta ook een Applicatie Hosting dienst die ontworpen voor meer dynamische applicaties – zoals webapplicaties die server-side verwerking, database-interacties en andere complexe functionaliteiten nodig hebben.

Verander je statische site in een dynamische ervaring met betaalgateways zoals PayPal en Stripe. Welke andere dienst heeft jouw voorkeur of ervaring? Deel het hieronder in de comments.

Jeremy Holcombe Kinsta

Content & Marketing Editor bij Kinsta, WordPress Web Developer en Content Writer. Buiten alles wat met WordPress te maken heeft, geniet ik van het strand, golf en films. En verder heb ik last van alle problemen waar andere lange mensen ook tegenaan lopen ;).

• LinkedIn