Aller au contenu

Utiliser les API Paypal (Braintree avec SpringBoot)

Comment intégrer un module e-commerce dans un site WEB ?

Il existe plusieurs façons de mettre en place un module de e-commerce sur un site web. Il existe de nombreuses API pour PHP, Python, .NET, cURL , JavaScript et plus rarement Java.

Même si nous allons découvrir l’API Braintree de Paypal qui permet d’intégrer facilement le module de paiement au sein d’une application SpringBoot.

Le principal inconvénient des paiements en ligne est qu’il oblige à saisir des numéros de cartes bancaire, voire même à les conserver en base ;(
Ceci n’est pas forcément une bonne pratique et le mieux consiste à déléguer cette tâche à d’autres !

En résumé, vous avez le choix entre :

Effectuez des tests avec une SandBox

Avec Paypal, c’est assez facile de créer un compte et d’effectuer des tests contrairement à d’autres plateformes de paiement qui proposent un processus assez long puisque vous devez vous enregistrer en tant que professionnel avec un numéro SIRET/SIREN et par conséquent fournir des justificatifs (PayPlug, Payzen). Cela est bien dommage car ils fournissent une documentation riche (en français) avec une intégration facile à mettre en oeuvre.

Circuit d’une transaction (Payzen)

circuit-javascript.png

Quelque soit la plateforme que vous allez utiliser, les noms des méthodes, des API et des variables changent mais le fonctionnement et le processus reste le même.

Circuit d’une transaction (Paypal)

circuit-paypal.png

Les étapes décrites dans le tutoriel de Paypal :

  1. Ajouter les boutons paypal dans la page HTML.
  2. L’internaute clique sur l’un des boutons.
  3. Le bouton effectue l’appel de l’API de gestion des commandes pour initialiser la transaction.
  4. Le bouton lance le Checkout experience.
  5. L’internaute accepte le paiement.
  6. Le bouton appelle l’API de gestion des transactions pour finaliser la transaction.
  7. Une fenêtre ou un message de confirmation s’affiche pour l’internaute (acheteur).

Source : https://developer.paypal.com/docs/checkout/#

Inscription à Paypal

Voici quelques écrans correspondant à l’inscription pour obtenir :

Création d’un identifiant de connexion

paypal-compte-professionnel-1.png

Choix du compte professionnel

paypal-compte-professionnel-2.png

Complément info adresse

paypal-compte-professionnel-3.png

Choix des modes de réception des paiements

paypal-compte-professionnel-4.png

Choix de la confirguration

paypal-compte-professionnel-5.png

Choix du mode d’intégration

paypal-compte-professionnel-6.png

Inscription à Braintree

Projet SpringBoot avec API Braintree

https://careydevelopment.us/2018/04/23/integrate-braintree-direct-spring-boot-thymeleaf/

SpringBoot/Thymeleaf avec Braintree/Paypal

Démo paypal côté client :

https://demo.paypal.com/us/demo/go_platform/checkoutGroup/ecflow

Vous pouvez récupérer cet exemple sur Github :

https://github.com/braintree/braintree_spring_example

Tous les guides et la documentation ici :

https://developers.braintreepayments.com/

FAQ Braintree : https://www.paypal.com/fr/webapps/mpp/hosted

Côté back java : https://developers.braintreepayments.com/start/hello-server/java

Braintree avec Angular :

Exemple de méthode basic que l’on trouve dans le Controller :

@RequestMapping(value = "/checkouts", method = RequestMethod.POST)
public String postForm(@RequestParam("amount") String amount, @RequestParam("payment_method_nonce") String nonce, Model model, final RedirectAttributes redirectAttributes) {
        BigDecimal decimalAmount;
        try {
            decimalAmount = new BigDecimal(amount);
        } catch (NumberFormatException e) {
            redirectAttributes.addFlashAttribute("errorDetails", "Format du montant invalide !");
            return "redirect:checkouts";
        }

        TransactionRequest request = new TransactionRequest()
            .amount(decimalAmount)
            .paymentMethodNonce(nonce)
            .options()
                .submitForSettlement(true)
                .done();

        Result<Transaction> result = gateway.transaction().sale(request);

        if (result.isSuccess()) {
            Transaction transaction = result.getTarget();
            return "redirect:checkouts/" + transaction.getId();
        } else if (result.getTransaction() != null) {
            Transaction transaction = result.getTransaction();
            return "redirect:checkouts/" + transaction.getId();
        } else {
            String errorString = "";
            for (ValidationError error : result.getErrors().getAllDeepValidationErrors()) {
               errorString += "Error: " + error.getCode() + ": " + error.getMessage() + "\n";
            }
            redirectAttributes.addFlashAttribute("errorDetails", errorString);
            return "redirect:checkouts";
        }
    }

Méthode modifiée pour ajouter des informations du client :

@RequestMapping(value = "/checkouts", method = RequestMethod.POST)
public String postForm(@RequestParam("amount") String amount,
    		 			   @RequestParam("firstName") String firstName,
    					   @RequestParam("lastName") String lastName,
    					   @RequestParam("payment_method_nonce") String nonce,
    					   Model model,
    					   final RedirectAttributes redirectAttributes) {
    	
        BigDecimal decimalAmount;
        String customerId;
        
        try {
            decimalAmount = new BigDecimal(amount); // montant de l'achat que nous récupérons du formulaire (chaîne)
            
            // information sur l'acheteur
            CustomerRequest request = new CustomerRequest()
            		  .firstName(firstName)
            		  .lastName(lastName)
            		  .company("Formatop")
            		  .email("formatop@example.com")
            		  .fax("419-555-1234")
            		  .phone("614-555-1234")
            		  .website("http://formatop.com");
            		  
            		Result<Customer> customerResult = gateway.customer().create(request);
            		customerResult.isSuccess();
            	    customerId = customerResult.getTarget().getId();          		
            
            
        } catch (NumberFormatException e) {
            redirectAttributes.addFlashAttribute("errorDetails", "Format du montant invalide !");
            return "redirect:checkouts";
        }
      
        // exécution de la transaction avec un object de type TransactionRequest
        TransactionRequest request = new TransactionRequest()
        	.billingAddress()
        		.countryCodeAlpha2("FR")
        		.done()
        	.customerId(customerId)
        	.amount(decimalAmount)
            .paymentMethodNonce(nonce)
            .options()
            	.submitForSettlement(true)
            	.done();

Conseil : utilisez les projets existants sur GitHub pour SpringBoot ou Angular après avoir un compte Paypal et Braintree associé. Il est inutile d’écrire de nouvelles méthodes. Par contre vous pouvez créer des CustomField dans braintree pour récupérer des informations comme la désignation de l’article, le prix ou la quantité par exemple.

Processus d’inscription avec Braintree

paypal-identifiant-braintree-1.png

paypal-identifiant-braintree-2.png

paypal-identifiant-braintree-3.png

paypal-identifiant-braintree-duplicate-account.png

paypal-identifiant-braintree-login-1.png

paypal-identifiant-braintree-login.png

Les clefs pour les transactions

paypal-identifiant-braintree-sandbox-keys.png

Pour utiliser Braintree avec SpringBoot, vous devez ajouter une dépendance dans votre POM.xml :

<!-- https://mvnrepository.com/artifact/com.braintreepayments.gateway/braintree-java -->
<dependency>
    <groupId>com.braintreepayments.gateway</groupId>
    <artifactId>braintree-java</artifactId>
    <version>2.91.0</version>
</dependency>

Après avoir créé un compte Paypal Braintree vous allez avoir accès à vos codes pour effectuer des tests que vous pourrez saisir dans votre fichier config.properties.

BT_ENVIRONMENT=sandbox
BT_MERCHANT_ID=7rbmcmqmmkdkdqtfg
BT_PUBLIC_KEY=xv94r68qtdzbtf7
BT_PRIVATE_KEY=84611214c558bf13c9f5e118db198

#BT_ENVIRONMENT=sandbox
#BT_MERCHANT_ID=votre identifiant de marchand
#BT_PUBLIC_KEY=votre clé public
#BT_PRIVATE_KEY=votre cle privée

Auteur : Philippe Bouget