Les lecteurs choisissent l’une des options ci-dessus, mais s’ils veulent opter pour PayPal, continuez \u00e0 lire. Dans cet article, je vous montre comment accepter les paiements par carte de cr\u00e9dit \u00e0 l’aide de PayPal Payments Pro.<\/p>\n
PayPal Payments Pro accepte les paiements avec une solution enti\u00e8rement personnalisable. Cela signifie que vous pouvez cr\u00e9er votre propre formulaire de paiement et facturer votre client. Il ne vous redirige pas vers le site PayPal pour terminer la transaction.<\/p>\n
Nous allons \u00e9galement cr\u00e9er notre propre formulaire o\u00f9 un client entre les d\u00e9tails de sa carte et peut payer sans quitter le site Web. L’utilisateur peut concevoir sa propre page de paiement et permet \u00e0 l’utilisateur d’entrer les d\u00e9tails de la carte. Alors sans plus tarder, plongeons-nous.<\/p>\n
Commencer<\/h3>\n
Avant d’accepter des paiements en temps r\u00e9el, il est toujours recommand\u00e9 de le tester d’abord sur le mode sandbox. Si tout fonctionne comme pr\u00e9vu sur le bac \u00e0 sable, nous devrions le faire vivre pour \u00e9viter tout probl\u00e8me avec les paiements des clients. Pour tester les paiements, vous devez disposer d’un compte sandbox PayPal. Cr\u00e9ez votre compte sur PayPal Developer<\/a>. Apr\u00e8s avoir cr\u00e9\u00e9 un compte, acc\u00e9dez \u00e0 SANDBOX->Comptes<\/strong> dans le menu de gauche et cr\u00e9ez un compte professionnel.<\/p>\n Au moment de la r\u00e9daction de cet article, PayPal Payments Pro est disponible aux \u00c9tats-Unis, au Royaume-Uni et au Canada. Cela signifie que lors de la cr\u00e9ation d’un compte, vous devez s\u00e9lectionner l’un de ces pays.<\/p>\n Une fois que vous avez un compte professionnel, vous devez mettre \u00e0 niveau votre type de compte vers \u00ab\u00a0Business-Pro\u00a0\u00bb. Vous devez avoir le type de compte \u00ab\u00a0Business-Pro\u00a0\u00bb pour accepter les paiements par carte de cr\u00e9dit. Pour le mettre \u00e0 niveau, cliquez sur le lien \u00ab\u00a0Mettre \u00e0 niveau vers Pro\u00a0\u00bb et PayPal convertira votre type de compte en \u00ab\u00a0Business-Pro\u00a0\u00bb.<\/p>\n Ensuite, cliquez sur l’onglet \u00ab\u00a0Informations d’identification API\u00a0\u00bb et r\u00e9cup\u00e9rez vos informations d’identification. Nous aurons besoin de ces informations d’identification dans la prochaine partie de ce tutoriel.<\/p>\n Comme je l’ai dit, en utilisant PayPal Payments Pro, vous pouvez concevoir votre propre formulaire de paiement. Cr\u00e9ons un joli formulaire de paiement o\u00f9 le client entre ses informations de paiement. J’utiliserai un formulaire joliment con\u00e7u sur codepen<\/a> pour ce tutoriel.<\/p>\n La structure finale des dossiers doit \u00eatre la suivante\u00a0:<\/p>\n Ne pensez pas \u00e0 Cr\u00e9ez un De m\u00eame, notre Obtenez une copie de Maintenant, cr\u00e9ez un Rendez-vous sur le navigateur et ex\u00e9cutez le Vous \u00eates maintenant pr\u00eat avec vos informations d’identification de l’API PayPal et votre formulaire HTML. Il est temps de dynamiser les choses. Int\u00e9grer une passerelle de paiement n’est pas une t\u00e2che facile. Vous devez le rechercher et lire toute la documentation fournie par le fournisseur. Parfois, cela devient si d\u00e9routant et malgr\u00e9 de longues heures, vous n’avez pas r\u00e9ussi \u00e0 atteindre votre objectif. Je l’avais affront\u00e9 plusieurs fois. Et en ce qui concerne PayPal, la situation devient plus complexe en raison de la vaste documentation PayPal.<\/p>\n Ce n’est plus le cas. Omnipay<\/a> facilite la vie de nos d\u00e9veloppeurs en termes d’int\u00e9gration de passerelle de paiement. En utilisant cette biblioth\u00e8que, vous n’avez pas besoin de lire la documentation de la passerelle de paiement. Obtenez simplement vos informations d’identification API, suivez les instructions Omnipay et vous avez termin\u00e9. Consultez leur page GitHub<\/a> pour plus de d\u00e9tails.<\/p>\n Ex\u00e9cutez la commande ci-dessous pour installer Omnipay et la biblioth\u00e8que PayPal prise en charge.<\/p>\n Apr\u00e8s avoir install\u00e9 les biblioth\u00e8ques ci-dessus, le code ci-dessous ira dans votre Assurez-vous de remplacer PAYPAL_API_USERNAME, PAYPAL_API_PASSWORD, PAYPAL_API_SIGNATURE de l’espace r\u00e9serv\u00e9 par les valeurs r\u00e9elles. Allez maintenant dans votre navigateur et essayez d’effectuer un paiement avec des d\u00e9tails de carte de cr\u00e9dit factices. Vous devriez recevoir un message de r\u00e9ussite avec votre identifiant de transaction. L’utilisateur peut obtenir des cartes de cr\u00e9dit de test<\/a> fournies par PayPal.<\/p>\n Une fois que vous avez termin\u00e9 le test du bac \u00e0 sable, transmettez les informations d’identification en direct pour les espaces r\u00e9serv\u00e9s utilis\u00e9s dans un code. Vous devez \u00e9galement transmettre la valeur ‘false’ \u00e0 la Il s’agit d’accepter les paiements par carte de cr\u00e9dit en utilisant PayPal Payments Pro en PHP. J’esp\u00e8re que cela vous aidera \u00e0 int\u00e9grer une solution de paiement pour votre site web. Essayez ce tutoriel et faites-moi part de vos r\u00e9flexions et suggestions dans la section commentaires ci-dessous.<\/p>\n![\"Acceptez](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/04\/post-20129-6081c034cf341.png\")
<\/a><\/p>\n![\"Acceptez](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/04\/post-20129-6081c0355f78e.png\")
<\/a><\/p>\nFormulaire de paiement personnalisable<\/h3>\n
<\/a><\/p>\nvendor<\/code>, charge.php<\/code>, composer.json<\/code>, composer.lock<\/code>pour l’instant. Nous le cr\u00e9erons dans la partie suivante.<\/p>\ncss\/card.css<\/code>fichier et ajoutez-y le code ci-dessous comme pr\u00e9vu sur codepen<\/a>.<\/p>\n@import url(https:\/\/fonts.googleapis.com\/css?family=Roboto:400,900,700,500);\n\u00a0\nbody {\n\u00a0\u00a0padding: 60px 0;\n\u00a0\u00a0background-color: rgba(178,209,229,0.7);\n\u00a0\u00a0margin: 0 auto;\n\u00a0\u00a0width: 600px;\n}\n.body-text {\n\u00a0\u00a0padding: 0 20px 30px 20px;\n\u00a0\u00a0font-family: \"Roboto\";\n\u00a0\u00a0font-size: 1em;\n\u00a0\u00a0color: #333;\n\u00a0\u00a0text-align: center;\n\u00a0\u00a0line-height: 1.2em;\n}\n.form-container {\n\u00a0\u00a0flex-direction: column;\n\u00a0\u00a0justify-content: center;\n\u00a0\u00a0align-items: center;\n}\n.card-wrapper {\n\u00a0\u00a0background-color: #6FB7E9;\n\u00a0\u00a0width: 100%;\n\u00a0\u00a0display: flex;\n\u00a0\n}\n.personal-information {\n\u00a0\u00a0background-color: #3C8DC5;\n\u00a0\u00a0color: #fff;\n\u00a0\u00a0padding: 1px 0;\n\u00a0\u00a0text-align: center;\n}\nh1 {\n\u00a0\u00a0font-size: 1.3em;\n\u00a0\u00a0font-family: \"Roboto\"\n}\ninput {\n\u00a0\u00a0margin: 1px 0;\n\u00a0\u00a0padding-left: 3%;\n\u00a0\u00a0font-size: 14px;\n}\ninput[type=\"text\"]{\n\u00a0\u00a0display: block;\n\u00a0\u00a0height: 50px;\n\u00a0\u00a0width: 97%;\n\u00a0\u00a0border: none;\n}\ninput[type=\"email\"]{\n\u00a0\u00a0display: block;\n\u00a0\u00a0height: 50px;\n\u00a0\u00a0width: 97%;\n\u00a0\u00a0border: none;\n}\ninput[type=\"submit\"]{\n\u00a0\u00a0display: block;\n\u00a0\u00a0height: 60px;\n\u00a0\u00a0width: 100%;\n\u00a0\u00a0border: none;\n\u00a0\u00a0background-color: #3C8DC5;\n\u00a0\u00a0color: #fff;\n\u00a0\u00a0margin-top: 2px;\n\u00a0\u00a0curson: pointer;\n\u00a0\u00a0font-size: 0.9em;\n\u00a0\u00a0text-transform: uppercase;\n\u00a0\u00a0font-weight: bold;\n\u00a0\u00a0cursor: pointer;\n}\ninput[type=\"submit\"]:hover{\n\u00a0\u00a0background-color: #6FB7E9;\n\u00a0\u00a0transition: 0.3s ease;\n}\n#column-left {\n\u00a0\u00a0width: 46.5%;\n\u00a0\u00a0float: left;\n\u00a0\u00a0margin-bottom: 2px;\n}\n#column-right {\n\u00a0\u00a0width: 46.5%;\n\u00a0\u00a0float: right;\n}\n\u00a0\n@media only screen and (max-width: 480px){\n\u00a0\u00a0body {\n\u00a0\u00a0\u00a0\u00a0width: 100%;\n\u00a0\u00a0\u00a0\u00a0margin: 0 auto;\n\u00a0\u00a0}\n\u00a0\u00a0.form-container {\n\u00a0\u00a0\u00a0\u00a0margin: 0 2%;\n\u00a0\u00a0}\n\u00a0\u00a0input {\n\u00a0\u00a0\u00a0\u00a0font-size: 1em;\n\u00a0\u00a0}\n\u00a0\u00a0#input-button {\n\u00a0\u00a0\u00a0\u00a0width: 100%;\n\u00a0\u00a0}\n\u00a0\u00a0#input-field {\n\u00a0\u00a0\u00a0\u00a0width: 96.5%;\n\u00a0\u00a0}\n\u00a0\u00a0h1 {\n\u00a0\u00a0\u00a0\u00a0font-size: 1.2em;\n\u00a0\u00a0}\n\u00a0\u00a0input {\n\u00a0\u00a0\u00a0\u00a0margin: 2px 0;\n\u00a0\u00a0}\n\u00a0\u00a0input[type=\"submit\"]{\n\u00a0\u00a0\u00a0\u00a0height: 50px;\n\u00a0\u00a0}\n\u00a0\u00a0#column-left {\n\u00a0\u00a0\u00a0\u00a0width: 96.5%;\n\u00a0\u00a0\u00a0\u00a0display: block;\n\u00a0\u00a0\u00a0\u00a0float: none;\n\u00a0\u00a0}\n\u00a0\u00a0#column-right {\n\u00a0\u00a0\u00a0\u00a0width: 96.5%;\n\u00a0\u00a0\u00a0\u00a0display: block;\n\u00a0\u00a0\u00a0\u00a0float: none;\n\u00a0\u00a0}\n}<\/code><\/pre>\njs\/card.js<\/code>fichier aura le code suivant.<\/p>\n\/* Card.js plugin by Jesse Pollak. https:\/\/github.com\/jessepollak\/card *\/\n\u00a0\n$('form').card({\n\u00a0\u00a0\u00a0\u00a0container: '.card-wrapper',\n\u00a0\u00a0\u00a0\u00a0width: 280,\n\u00a0\n\u00a0\u00a0\u00a0\u00a0formSelectors: {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0nameInput: 'input[name=\"first-name\"], input[name=\"last-name\"]'\n\u00a0\u00a0\u00a0\u00a0}\n});<\/code><\/pre>\njquery.card.js<\/code>ce r\u00e9f\u00e9rentiel GitHub<\/a>. Stockez ce fichier dans votre r\u00e9pertoire ‘js’.<\/p>\nindex.html<\/code>fichier. Dans ce fichier, nous allons ajouter un balisage HTML qui affiche notre formulaire de paiement.<\/p>\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n\u00a0\u00a0\u00a0\u00a0<meta charset=\"UTF-8\">\n\u00a0\u00a0\u00a0\u00a0<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\u00a0\u00a0\u00a0\u00a0<meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">\n\u00a0\u00a0\u00a0\u00a0<title>Online Payments<\/title>\n\u00a0\u00a0\u00a0\u00a0<link rel=\"stylesheet\" href=\"css\/card.css\">\n<\/head>\n<body>\n\u00a0\u00a0\u00a0\u00a0<form method=\"POST\" action=\"charge.php\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"form-container\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"personal-information\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<h1>Payment Information<\/h1>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div> <!-- end of personal-information -->\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<input id=\"column-left\" type=\"text\" name=\"first-name\" placeholder=\"First Name\" required=\"required\" \/>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<input id=\"column-right\" type=\"text\" name=\"last-name\" placeholder=\"Surname\" required=\"required\" \/>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<input id=\"input-field\" type=\"text\" name=\"number\" placeholder=\"Card Number\" required=\"required\" \/>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<input id=\"column-left\" type=\"text\" name=\"expiry\" placeholder=\"MM \/ YY\" required=\"required\" \/>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<input id=\"column-right\" type=\"text\" name=\"cvc\" placeholder=\"CCV\" required=\"required\" \/>\n\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"card-wrapper\"><\/div>\n\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<input id=\"input-field\" type=\"text\" name=\"streetaddress\" required=\"required\" autocomplete=\"on\" maxlength=\"45\" placeholder=\"Streed Address\"\/>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<input id=\"column-left\" type=\"text\" name=\"city\" required=\"required\" autocomplete=\"on\" maxlength=\"20\" placeholder=\"City\"\/>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<input id=\"column-right\" type=\"text\" name=\"zipcode\" required=\"required\" autocomplete=\"on\" pattern=\"[0-9]*\" maxlength=\"5\" placeholder=\"ZIP code\"\/>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<input id=\"input-field\" type=\"email\" name=\"email\" required=\"required\" autocomplete=\"on\" maxlength=\"40\" placeholder=\"Email\"\/>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<input id=\"input-field\" type=\"text\" name=\"amount\" required=\"required\" autocomplete=\"on\" maxlength=\"40\" placeholder=\"Amount\"\/>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<input id=\"input-button\" name=\"submit\" type=\"submit\" value=\"Submit\"\/>\n\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0<\/form>\n\u00a0\u00a0\u00a0\u00a0<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery\/3.6.0\/jquery.min.js\"><\/script>\n\u00a0\u00a0\u00a0\u00a0<script src=\"js\/jquery.card.js\"><\/script>\n\u00a0\u00a0\u00a0\u00a0<script src=\"js\/card.js\"><\/script>\n<\/body>\n<\/html><\/code><\/pre>\nindex.html<\/code>fichier. Vous devriez maintenant voir un joli formulaire de paiement.<\/p>\nAcceptez les paiements par carte de cr\u00e9dit avec PayPal Payments Pro<\/h3>\n
composer require league\/omnipay:^3 omnipay\/paypal<\/code><\/pre>\ncharge.php<\/code>fichier.<\/p>\n<?php\nrequire_once \"vendor\/autoload.php\";\n\u00a0\u00a0\nuse OmnipayOmnipay;\n\u00a0\u00a0\n$gateway = Omnipay::create('PayPal_Pro');\n$gateway->setUsername(PAYPAL_API_USERNAME);\n$gateway->setPassword(PAYPAL_API_PASSWORD);\n$gateway->setSignature(PAYPAL_API_SIGNATURE);\n$gateway->setTestMode(true); \/\/ here 'true' is for sandbox. Pass 'false' when go live\n\u00a0\u00a0\nif (isset($_POST['submit'])) {\n\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0$arr_expiry = explode(\"\/\", $_POST['expiry']);\n\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0$formData = array(\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'firstName' => $_POST['first-name'],\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'lastName' => $_POST['last-name'],\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'number' => $_POST['number'],\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'expiryMonth' => trim($arr_expiry[0]),\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'expiryYear' => trim($arr_expiry[1]),\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'cvv' => $_POST['cvc']\n\u00a0\u00a0\u00a0\u00a0);\n\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0try {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ Send purchase request\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$response = $gateway->purchase([\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'amount' => $_POST['amount'],\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'currency' => 'USD',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'card' => $formData\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0])->send();\n\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ Process response\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if ($response->isSuccessful()) {\n\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ Payment was successful\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0echo \"Payment is successful. Your Transaction ID is: \". $response->getTransactionReference();\n\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0} else {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ Payment failed\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0echo \"Payment failed. \". $response->getMessage();\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0} catch(Exception $e) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0echo $e->getMessage();\n\u00a0\u00a0\u00a0\u00a0}\n}<\/code><\/pre>\nAcceptez le paiement en direct avec la passerelle de paiement PayPal Pro<\/h3>\n
setTestMode()<\/code>m\u00e9thode.<\/p>\n