...
Actualités WEB et WordPress, thèmes, plugins. Ici, nous partageons des conseils et les meilleures solutions de sites Web.

Acceptez les paiements par carte de crédit en utilisant PayPal Payments Pro en PHP

96

Vous cherchez à intégrer une passerelle de paiement qui accepte les paiements par carte de crédit? Le paiement par carte de crédit est l’une des meilleures options pour accepter le paiement en ligne. Les clients préfèrent payer en ligne par carte de crédit. Il se peut que vous perdiez des clients simplement parce que votre site Web n’accepte pas les paiements par carte de crédit. En tant que propriétaire de la boutique en ligne, vous devez ajouter une option de carte de crédit pour accepter les paiements sur votre site Web.

Il existe de nombreuses passerelles de paiement disponibles qui prennent en charge une carte de crédit. Par exemple, Authorize.Net et Stripe permettent d’accepter les paiements par carte en ligne.

Les lecteurs choisissent l’une des options ci-dessus, mais s’ils veulent opter pour PayPal, continuez à lire. Dans cet article, je vous montre comment accepter les paiements par carte de crédit à l’aide de PayPal Payments Pro.

PayPal Payments Pro accepte les paiements avec une solution entièrement personnalisable. Cela signifie que vous pouvez créer votre propre formulaire de paiement et facturer votre client. Il ne vous redirige pas vers le site PayPal pour terminer la transaction.

Nous allons également créer notre propre formulaire où un client entre les détails de sa carte et peut payer sans quitter le site Web. L’utilisateur peut concevoir sa propre page de paiement et permet à l’utilisateur d’entrer les détails de la carte. Alors sans plus tarder, plongeons-nous.

Commencer

Avant d’accepter des paiements en temps réel, il est toujours recommandé de le tester d’abord sur le mode sandbox. Si tout fonctionne comme prévu sur le bac à sable, nous devrions le faire vivre pour éviter tout problème avec les paiements des clients. Pour tester les paiements, vous devez disposer d’un compte sandbox PayPal. Créez votre compte sur PayPal Developer. Après avoir créé un compte, accédez à SANDBOX->Comptes dans le menu de gauche et créez un compte professionnel.

Au moment de la rédaction de cet article, PayPal Payments Pro est disponible aux États-Unis, au Royaume-Uni et au Canada. Cela signifie que lors de la création d’un compte, vous devez sélectionner l’un de ces pays.

Une fois que vous avez un compte professionnel, vous devez mettre à niveau votre type de compte vers « Business-Pro ». Vous devez avoir le type de compte « Business-Pro » pour accepter les paiements par carte de crédit. Pour le mettre à niveau, cliquez sur le lien « Mettre à niveau vers Pro » et PayPal convertira votre type de compte en « Business-Pro ».

Acceptez les paiements par carte de crédit en utilisant PayPal Payments Pro en PHP

Ensuite, cliquez sur l’onglet « Informations d’identification API » et récupérez vos informations d’identification. Nous aurons besoin de ces informations d’identification dans la prochaine partie de ce tutoriel.

Acceptez les paiements par carte de crédit en utilisant PayPal Payments Pro en PHP

Formulaire de paiement personnalisable

Comme je l’ai dit, en utilisant PayPal Payments Pro, vous pouvez concevoir votre propre formulaire de paiement. Créons un joli formulaire de paiement où le client entre ses informations de paiement. J’utiliserai un formulaire joliment conçu sur codepen pour ce tutoriel.

La structure finale des dossiers doit être la suivante :

Acceptez les paiements par carte de crédit en utilisant PayPal Payments Pro en PHP

Ne pensez pas à vendor, charge.php, composer.json, composer.lockpour l’instant. Nous le créerons dans la partie suivante.

Créez un css/card.cssfichier et ajoutez-y le code ci-dessous comme prévu sur codepen.

@import url(https://fonts.googleapis.com/css?family=Roboto:400,900,700,500);
 
body {
  padding: 60px 0;
  background-color: rgba(178,209,229,0.7);
  margin: 0 auto;
  width: 600px;
}
.body-text {
  padding: 0 20px 30px 20px;
  font-family: "Roboto";
  font-size: 1em;
  color: #333;
  text-align: center;
  line-height: 1.2em;
}
.form-container {
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.card-wrapper {
  background-color: #6FB7E9;
  width: 100%;
  display: flex;
 
}
.personal-information {
  background-color: #3C8DC5;
  color: #fff;
  padding: 1px 0;
  text-align: center;
}
h1 {
  font-size: 1.3em;
  font-family: "Roboto"
}
input {
  margin: 1px 0;
  padding-left: 3%;
  font-size: 14px;
}
input[type="text"]{
  display: block;
  height: 50px;
  width: 97%;
  border: none;
}
input[type="email"]{
  display: block;
  height: 50px;
  width: 97%;
  border: none;
}
input[type="submit"]{
  display: block;
  height: 60px;
  width: 100%;
  border: none;
  background-color: #3C8DC5;
  color: #fff;
  margin-top: 2px;
  curson: pointer;
  font-size: 0.9em;
  text-transform: uppercase;
  font-weight: bold;
  cursor: pointer;
}
input[type="submit"]:hover{
  background-color: #6FB7E9;
  transition: 0.3s ease;
}
#column-left {
  width: 46.5%;
  float: left;
  margin-bottom: 2px;
}
#column-right {
  width: 46.5%;
  float: right;
}
 
@media only screen and (max-width: 480px){
  body {
    width: 100%;
    margin: 0 auto;
  }
  .form-container {
    margin: 0 2%;
  }
  input {
    font-size: 1em;
  }
  #input-button {
    width: 100%;
  }
  #input-field {
    width: 96.5%;
  }
  h1 {
    font-size: 1.2em;
  }
  input {
    margin: 2px 0;
  }
  input[type="submit"]{
    height: 50px;
  }
  #column-left {
    width: 96.5%;
    display: block;
    float: none;
  }
  #column-right {
    width: 96.5%;
    display: block;
    float: none;
  }
}

De même, notre js/card.jsfichier aura le code suivant.

/* Card.js plugin by Jesse Pollak. https://github.com/jessepollak/card */
 
$('form').card({
    container: '.card-wrapper',
    width: 280,
 
    formSelectors: {
        nameInput: 'input[name="first-name"], input[name="last-name"]'
    }
});

Obtenez une copie de jquery.card.jsce référentiel GitHub. Stockez ce fichier dans votre répertoire ‘js’.

Maintenant, créez un index.htmlfichier. Dans ce fichier, nous allons ajouter un balisage HTML qui affiche notre formulaire de paiement.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Online Payments</title>
    <link rel="stylesheet" href="css/card.css">
</head>
<body>
    <form method="POST" action="charge.php">
        <div class="form-container">
            <div class="personal-information">
                <h1>Payment Information</h1>
            </div> <!-- end of personal-information -->
              
            <input id="column-left" type="text" name="first-name" placeholder="First Name" required="required" />
            <input id="column-right" type="text" name="last-name" placeholder="Surname" required="required" />
            <input id="input-field" type="text" name="number" placeholder="Card Number" required="required" />
            <input id="column-left" type="text" name="expiry" placeholder="MM / YY" required="required" />
            <input id="column-right" type="text" name="cvc" placeholder="CCV" required="required" />
  
            <div class="card-wrapper"></div>
  
            <input id="input-field" type="text" name="streetaddress" required="required" autocomplete="on" maxlength="45" placeholder="Streed Address"/>
            <input id="column-left" type="text" name="city" required="required" autocomplete="on" maxlength="20" placeholder="City"/>
            <input id="column-right" type="text" name="zipcode" required="required" autocomplete="on" pattern="[0-9]*" maxlength="5" placeholder="ZIP code"/>
            <input id="input-field" type="email" name="email" required="required" autocomplete="on" maxlength="40" placeholder="Email"/>
            <input id="input-field" type="text" name="amount" required="required" autocomplete="on" maxlength="40" placeholder="Amount"/>
            <input id="input-button" name="submit" type="submit" value="Submit"/>
  
        </div>
    </form>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="js/jquery.card.js"></script>
    <script src="js/card.js"></script>
</body>
</html>

Rendez-vous sur le navigateur et exécutez le index.htmlfichier. Vous devriez maintenant voir un joli formulaire de paiement.

Acceptez les paiements par carte de crédit avec PayPal Payments Pro

Vous êtes maintenant prêt avec vos informations d’identification de l’API PayPal et votre formulaire HTML. Il est temps de dynamiser les choses. Intégrer une passerelle de paiement n’est pas une tâche facile. Vous devez le rechercher et lire toute la documentation fournie par le fournisseur. Parfois, cela devient si déroutant et malgré de longues heures, vous n’avez pas réussi à atteindre votre objectif. Je l’avais affronté plusieurs fois. Et en ce qui concerne PayPal, la situation devient plus complexe en raison de la vaste documentation PayPal.

Ce n’est plus le cas. Omnipay facilite la vie de nos développeurs en termes d’intégration de passerelle de paiement. En utilisant cette bibliothèque, 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é. Consultez leur page GitHub pour plus de détails.

Exécutez la commande ci-dessous pour installer Omnipay et la bibliothèque PayPal prise en charge.

composer require league/omnipay:^3 omnipay/paypal

Après avoir installé les bibliothèques ci-dessus, le code ci-dessous ira dans votre charge.phpfichier.

<?php
require_once "vendor/autoload.php";
  
use OmnipayOmnipay;
  
$gateway = Omnipay::create('PayPal_Pro');
$gateway->setUsername(PAYPAL_API_USERNAME);
$gateway->setPassword(PAYPAL_API_PASSWORD);
$gateway->setSignature(PAYPAL_API_SIGNATURE);
$gateway->setTestMode(true); // here 'true' is for sandbox. Pass 'false' when go live
  
if (isset($_POST['submit'])) {
  
    $arr_expiry = explode("/", $_POST['expiry']);
  
    $formData = array(
        'firstName' => $_POST['first-name'],
        'lastName' => $_POST['last-name'],
        'number' => $_POST['number'],
        'expiryMonth' => trim($arr_expiry[0]),
        'expiryYear' => trim($arr_expiry[1]),
        'cvv' => $_POST['cvc']
    );
  
    try {
        // Send purchase request
        $response = $gateway->purchase([
                'amount' => $_POST['amount'],
                'currency' => 'USD',
                'card' => $formData
        ])->send();
  
        // Process response
        if ($response->isSuccessful()) {
  
            // Payment was successful
            echo "Payment is successful. Your Transaction ID is: ". $response->getTransactionReference();
  
        } else {
            // Payment failed
            echo "Payment failed. ". $response->getMessage();
        }
    } catch(Exception $e) {
        echo $e->getMessage();
    }
}

Assurez-vous de remplacer PAYPAL_API_USERNAME, PAYPAL_API_PASSWORD, PAYPAL_API_SIGNATURE de l’espace réservé par les valeurs réelles. Allez maintenant dans votre navigateur et essayez d’effectuer un paiement avec des détails de carte de crédit factices. Vous devriez recevoir un message de réussite avec votre identifiant de transaction. L’utilisateur peut obtenir des cartes de crédit de test fournies par PayPal.

Acceptez le paiement en direct avec la passerelle de paiement PayPal Pro

Une fois que vous avez terminé le test du bac à sable, transmettez les informations d’identification en direct pour les espaces réservés utilisés dans un code. Vous devez également transmettre la valeur ‘false’ à la setTestMode()méthode.

Il s’agit d’accepter les paiements par carte de crédit en utilisant PayPal Payments Pro en PHP. J’espère que cela vous aidera à intégrer une solution de paiement pour votre site web. Essayez ce tutoriel et faites-moi part de vos réflexions et suggestions dans la section commentaires ci-dessous.

Source d’enregistrement: artisansweb.net

Ce site utilise des cookies pour améliorer votre expérience. Nous supposerons que cela vous convient, mais vous pouvez vous désinscrire si vous le souhaitez. J'accepte Plus de détails