{"id":57956,"date":"2024-02-06T18:37:42","date_gmt":"2024-02-06T17:37:42","guid":{"rendered":"https:\/\/kinsta.com\/nl\/?p=57956&preview=true&preview_id=57956"},"modified":"2024-02-08T11:07:23","modified_gmt":"2024-02-08T10:07:23","slug":"betaalgateway-integratie","status":"publish","type":"post","link":"https:\/\/kinsta.com\/nl\/blog\/betaalgateway-integratie\/","title":{"rendered":"Zo integreer je een betaalgateway en kassa in je statische site"},"content":{"rendered":"

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.<\/p>\n

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<\/a> inbouwen, zodat je bedrijf direct transacties kan accepteren.<\/p>\n

Deze tutorial bespreekt hoe je PayPal en Stripe<\/a> 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\u00ebren om online verkopen te stimuleren.<\/p>\n

<\/div><\/kinsta-auto-toc>\n

Beginnen<\/h2>\n

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.<\/p>\n

    \n
  1. Download en implementeer deze voorbeeldcode voor een statische site<\/a> die je kan installeren op de Statische Site Hosting van Kinsta<\/a>.<\/li>\n
  2. Meld je aan voor een PayPal account<\/a> 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<\/a> voor later gebruik.<\/li>\n
  3. Maak een Stripe account<\/a> 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<\/a>. Hier haal je je API sleutel op, een cruciaal onderdeel dat je nodig hebt in de volgende stappen.<\/li>\n<\/ol>\n

    De preview van de statische site bekijken<\/h3>\n

    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.<\/p>\n

    Kinsta’s infrastructuur voor Statische Site Hosting<\/a> biedt een effici\u00ebnte omgeving voor het implementeren en testen van PayPal en Stripe kassafuncties om een meer geavanceerde en aantrekkelijke statische website te maken.<\/p>\n

    Ga na het pushen van je site naar Kinsta naar de startpagina. Klik op de knop ORDER INQUIRY<\/strong>.<\/p>\n

    \"Een
    Voorbeeld van een homepage met een knop ORDER INQUIRY<\/strong>.<\/figcaption><\/figure>\n

    Selecteer een beschikbaar product op de pagina Flowers Catalog <\/b>– de Turkish Rose.<\/p>\n

    \"De
    Voorbeeldpagina van de site met verschillende bloemenopties.<\/figcaption><\/figure>\n

    Deze actie brengt je naar de pagina met productdetails, waar de betaalknoppen voor PayPal en Stripe zijn ge\u00efmplementeerd.<\/p>\n

    \"Opties
    De productpagina van een voorbeeldsite.<\/figcaption><\/figure>\n

    Je PayPal kassa integreren in je statische site<\/h2>\n

    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.<\/p>\n

    Zo integreer je PayPal checkout in je statische site:<\/p>\n

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

      \"Het
      Het formulier Create App van PayPal.<\/figcaption><\/figure><\/li>\n
    4. Kopieer de Client ID<\/strong> uit het API credentials<\/strong> gedeelte om later een PayPal checkout knop te maken.\n

      \"Credentials
      PayPal app referenties.<\/figcaption><\/figure><\/li>\n
    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<\/strong>.\n

      \"PayPal's
      De functies van de PayPal app.<\/figcaption><\/figure><\/li>\n
    6. Integreer vervolgens PayPal checkout in je statische site. Maak een afrekenknop met PayPal’s JavaScript SDK voor alternatieve betaalmethoden (APM)<\/a>. 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<\/strong>, net voor de afsluitende tag <\/body><\/code>. Vervang YOUR_CLIENT_ID<\/code> door je PayPal-klant-ID. Mogelijk moet je ook de munteenheid USD<\/code> vervangen door de munteenheid die je PayPal rekening accepteert.\n
      <!-- PAYPAL BUTTON SCRIPT-->\n<script   \nsrc=\"https:\/\/www.paypal.com\/sdk\/js?client-id=YOUR_CLIENT_ID¤cy=USD\"   \ndata-sdk-integration-source=\"button-factory\"><\/script>\n<script>\npaypal.Buttons({\n\tcreateOrder: function(data, actions) {\n\t\/\/ Set up the transaction\n\treturn actions.order.create({\n\t\tpurchase_units: [{\n\t\tamount: {\n\t\t\tvalue: '1.00'\n\t\t}\n\t\t}]\n\t});\n\t},\n\tonApprove: function(data, actions) {\n\t\/\/ Capture the funds from the transaction\n\treturn actions.order.capture().then(function(details) {\n\t\t\/\/ Show a success message to the buyer\n\t\talert('Transaction completed by ' + details.payer.name.given_name);\n\t});\n\t}\n}).render('#paypal-button-container');\n<\/script>\n<!-- PAYPAL BUTTON SCRIPT--><\/code><\/pre>\n
      De functie paypal.Buttons<\/code> definieert twee functies:<\/p>\n