Project starten

CF7 PayPal instellen

Documentatie Contact Form 7 – PayPal Integration5123 keer bekeken
cf7 paypal menu
menu van CF7 PayPal

Configureer als eerste stap de plugininstellingen. Ga daarvoor in je beheerpaneel naar Contact -> PayPal, of kopieer deze URL: https://www.yourdomain.com/wp-admin/admin.php?page=Wordpress_Contact Form 7_Paypal_options_options. Zorg dat de vereiste plugins zijn geïnstalleerd!

PayPal instellen

We gebruiken eerst de sandbox van PayPal om de werking te testen. Daarvoor heb je een ontwikkelaarsaccount en je PayPal Identity nodig. Voor een ontwikkelaarsaccount log je hier in met je gewone PayPal-gegevens: https://developer.paypal.com. Ga daarna naar de accountpagina en maak een Business- en een Buyer-account aan.

Daarna heb je je PayPal Identity nodig. Log hier in met het zojuist aangemaakte sandbox-Business-account: https://www.sandbox.paypal.com of ga direct naar deze link: https://sandbox.paypal.com/businessmanage/preferences/website. Zet in dit paneel alle vereiste opties aan:

  1. Activeer Automatic Return (vergeet niet daar een URL in te vullen!)
  2. Activeer Payment Data Transfer. Daaronder zie je dan je Identity.
  3. Bewaar die!

Algemene plugininstellingen

Na het instellen van PayPal ga je terug naar de plugininstellingen en:

  1. Schakel de plugin in
  2. Schakel de sandboxmodus in
  3. Vul je sandboxaccount in (het Business-account, niet het Buyer-account)
  4. Vul je PayPal Identity in
cf7 paypal general settings
algemene instellingen van CF7 PayPal

PayPal-betaalopties

Nu stellen we de betaalopties in op het tweede tabblad van de instellingen (zie screenshot hieronder). Hier moet je…

  1. Je land instellen
  2. Je valuta instellen
  3. Je locale instellen
  4. Je vaste belasting instellen
  5. Je belastingtarief instellen
  6. Je return-URL instellen
    Zorg dat je de doorverwijzing in je PayPal-Business-account hebt ingeschakeld
  7. Je cancel-URL instellen
    Zorg dat je de doorverwijzing in je PayPal-Business-account hebt ingeschakeld
paypal for cf7 payment options
PayPal-betaalopties voor CF7

Het contactformulier maken

Na het instellen van de plugin kunnen we ons eerste contactformulier maken. Vooraf: PayPal biedt heel veel invoervelden die je aan je formulier kunt toevoegen. Een volledig overzicht vind je hier. We behandelen alleen de belangrijkste.

Klantgegevens

Wil je de klantgegevens uit het PayPal-account van de koper niet gebruiken, dan kun je ze met eigen velden overschrijven, bijvoorbeeld voornaam, achternaam of adres. Zie het volgende voorbeeld:

<h2>Your Contact</h2>
<p >Your First Name*<br />
    [text* first_name] </p>
<p>Your Email*<br />
    [text* email] </p>
<p>Your Address*<br />
    [text* address] </p>

De producten die je wilt verkopen

Nu stellen we het product of de producten in die we willen verkopen. Omdat we de winkelwagenfunctie van PayPal gebruiken, kun je onbeperkt artikelen instellen. Elk artikel bestaat uit de volgende velden. XX staat steeds voor de ID van je product (bijv. 1 of 2).

  1. Artikelnaam (item_name_XX) | Voorbeeld: <input type=”hidden” name=”item_name_1″ value=”Product 1″>
  2. Artikelnummer / SKU (item_number_XX) | Voorbeeld: <input type=”hidden” name=”item_number_1″ value=”product-1-999″>
  3. Bedrag / prijs van het artikel (amount_XX) | Voorbeeld: <input type=”hidden” name=”amount_1″ value=”10″>
  4. Aantal (quantity_XX) | Voorbeeld:
<h2>Your Order</h2>
<input type="hidden" name="item_name_1" value="Product 1">
<input type="hidden" name="item_number_1" value="999">
<input type="hidden" name="amount_1" value="10">
<p >Quantity*<br />
[number quantity_1 min:1 class:fw max:10 "1"] </p>

De PayPal-knop

Na het instellen van de “gegevens” maken we de knoppen. Onze plugin is de enige die beide knoppen ondersteunt: de gewone knop “alleen formulier versturen” (submit) of de knop “Betalen met PayPal” (paypal). In ons voorbeeld voegen we beide toe. De gewone verzendknop spreekt voor zich, die slaan we over. De PayPal-knop vind je in de tagbalk (zie screenshot hieronder).

cf7 paypal button
CF7-PayPal-knop

Klik je op de knop, dan verschijnt de taggenerator:

  1. Label (knoptekst) | Voorbeeld: “Betalen met PayPal”
  2. Doorverwijs-URL bij geslaagde betaling (overschrijft de globale URL) | Voorbeeld: “https://www.yourdomain.com/custom-success-url/”
  3. Doorverwijs-URL bij geannuleerde betaling (overschrijft de globale URL) | Voorbeeld: “https://www.yourdomain.com/custom-cancel-url/”
  4. Class-attribuut | Voorbeeld: “paypal-button”
create cf7 paypal tag
CF7-PayPal-tag maken

Daarna voegen we de tag in en krijgen we de volgende formulierknoppen

[paypal "Pay with Paypal"]

We hebben wat div’s en een productafbeelding toegevoegd om het bestelformulier er wat mooier uit te laten zien. Hier is het volledige contactformulier:

<input type="hidden" name="item_name_1" value="Product 1">
<input type="hidden" name="item_number_1" value="999">
<input type="hidden" name="amount_1" value="10">
<h2>Your Contact</h2>
<p >Your First Name*<br />
[text* first_name] </p>
<p>Your Email*<br />
[text* email] </p>
<p>Your Address*<br />
[text* address] </p>
<p >Quantity*<br />
[number quantity_1 min:1 class:fw max:10 "1"] </p>
[paypal class:fw "Pay with Paypal"]<div style="margin-bottom:10px;display:block;"></div>
[submit class:fw "Or send individual Request"]
Let op: vergeet niet de velden ook in het tabblad Mail te zetten! Anders ontvang je de gegevens niet per e-mail!

Een test doen

Laten we testen of het contactformulier werkt:

  1. Maak een nieuwe pagina
  2. Voeg de Contact Form 7-shortcode in (in ons geval: ])
  3. Bezoek de pagina
  4. Vul je gegevens in
  5. Klik op de knop “Betalen met PayPal”
  6. Je wordt naar PayPal doorgestuurd
  7. Controleer of je op sandbox.paypal.com bent
  8. Log nu in met je sandbox-Buyer-account
  9. Betaal de rekening
  10. Daarna word je naar je succespagina doorgestuurd.
  11. Bovendien krijgt de blogbeheerder een e-mail als een transactie geslaagd is!