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 :
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.
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.
Les étapes décrites dans le tutoriel de Paypal :
Checkout experience
Source : https://developer.paypal.com/docs/checkout/#
Voici quelques écrans correspondant à l’inscription pour obtenir :
https://careydevelopment.us/2018/04/23/integrate-braintree-direct-spring-boot-thymeleaf/
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.
CustomField
Pour utiliser Braintree avec SpringBoot, vous devez ajouter une dépendance dans votre POM.xml :
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.
Paypal Braintree
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