{"id":75744,"date":"2024-01-31T18:35:28","date_gmt":"2024-01-31T17:35:28","guid":{"rendered":"https:\/\/kinsta.com\/fr\/?p=75744&preview=true&preview_id=75744"},"modified":"2024-02-02T18:41:45","modified_gmt":"2024-02-02T17:41:45","slug":"integration-passerelle-paiement","status":"publish","type":"post","link":"https:\/\/kinsta.com\/fr\/blog\/integration-passerelle-paiement\/","title":{"rendered":"Comment int\u00e9grer une passerelle de paiement et une commande \u00e0 votre site statique ?"},"content":{"rendered":"

Dans le pass\u00e9, les sites web statiques pr\u00e9sentaient g\u00e9n\u00e9ralement des images et des descriptions de produits, ce qui incitait les clients \u00e0 passer commande par e-mail ou par t\u00e9l\u00e9phone. Aujourd’hui, cependant, les clients s’attendent \u00e0 une exp\u00e9rience plus dynamique, avec de solides fonctionnalit\u00e9s de commerce \u00e9lectronique. Le processus d’achat s’en trouve simplifi\u00e9, ce qui encourage les utilisateurs \u00e0 effectuer des transactions sur votre site plut\u00f4t que d’explorer les options de la concurrence.<\/p>\n

L’ajout d’une passerelle de paiement et d’une commande \u00e0 votre site statique est assez simple. Les interfaces de programmation d’applications (API) et les architectures sans serveur vous permettent d’int\u00e9grer des fonctionnalit\u00e9s de commerce \u00e9lectronique dans les sites web statiques<\/a>, ce qui permet \u00e0 votre entreprise d’accepter directement les transactions.<\/p>\n

Ce tutoriel explore l’ajout des passerelles de paiement PayPal et Stripe<\/a> au site statique d’une boutique de livraison de fleurs. Suivez les \u00e9tapes pour apprendre \u00e0 ajouter ces fonctions \u00e0 votre site web et ouvrir de nouvelles opportunit\u00e9s pour stimuler les ventes en ligne.<\/p>\n

<\/div><\/kinsta-auto-toc>\n

Premiers pas<\/h2>\n

Avant de plonger dans les \u00e9tapes de l’int\u00e9gration d’une passerelle de paiement et d’une commande \u00e0 votre site statique, posons les bases d’une mise en \u0153uvre r\u00e9ussie et sans heurts.<\/p>\n

    \n
  1. T\u00e9l\u00e9chargez et d\u00e9ployez cet exemple de code de <\/a>site statique<\/a> sur l’h\u00e9bergement de site statique de Kinsta<\/a>.<\/li>\n
  2. Ouvrez un compte PayPal<\/a>, en optant pour un compte professionnel, plus adapt\u00e9 \u00e0 ce tutoriel. Ce type de compte est n\u00e9cessaire pour tester les boutons que vous int\u00e9grez. Apr\u00e8s vous \u00eatre inscrit, ajoutez les informations relatives \u00e0 votre entreprise et associez un compte bancaire. Apr\u00e8s v\u00e9rification de votre compte, vous pouvez obtenir des identifiants API \u00e0 partir du portail PayPal Developer<\/a> pour une utilisation ult\u00e9rieure.<\/li>\n
  3. Cr\u00e9ez un compte Stripe<\/a> en saisissant les informations relatives \u00e0 votre entreprise et \u00e0 votre compte bancaire. Stripe offre une activation rapide du compte, ce qui est avantageux pour ce projet. Une fois votre compte activ\u00e9, vous pouvez imm\u00e9diatement acc\u00e9der au tableau de bord Stripe<\/a>. C’est l\u00e0 que vous r\u00e9cup\u00e9rez votre cl\u00e9 API, un \u00e9l\u00e9ment crucial pour les \u00e9tapes suivantes.<\/li>\n<\/ol>\n

    Examiner l’exemple de site statique<\/h3>\n

    Ce tutoriel utilise un site statique pr\u00e9-existant pour pr\u00e9senter l’int\u00e9gration des fonctionnalit\u00e9s de paiement PayPal et Stripe. Malgr\u00e9 son contenu statique, l’exemple de site web imite une boutique de fleurs en ligne.<\/p>\n

    L’infrastructure d’h\u00e9bergement de sites statiques de Kinsta<\/a> fournit un environnement efficace pour d\u00e9ployer et tester les fonctionnalit\u00e9s de paiement PayPal et Stripe afin de cr\u00e9er un site statique plus sophistiqu\u00e9 et plus attrayant.<\/p>\n

    Apr\u00e8s avoir d\u00e9ploy\u00e9 votre site sur Kinsta, rendez-vous sur la page d’accueil. Cliquez sur le bouton ORDER INQUIRY<\/strong>.<\/p>\n

    \"Exemple
    Exemple de page d’accueil de site avec un bouton ORDER INQUIRY<\/strong>.<\/figcaption><\/figure>\n

    S\u00e9lectionnez un produit disponible sur la page Flowers Catalog<\/strong> – the turkish Rose.<\/p>\n

    \"Exemple
    Exemple de page de catalogue du site avec diff\u00e9rentes options de fleurs.<\/figcaption><\/figure>\n

    Cette action vous am\u00e8ne \u00e0 la page des d\u00e9tails du produit, o\u00f9 les boutons de paiement pour PayPal et Stripe sont impl\u00e9ment\u00e9s.<\/p>\n

    \"Exemple
    Exemple de page produit.<\/figcaption><\/figure>\n

    Comment int\u00e9grer la commande PayPal dans votre site statique ?<\/h2>\n

    L’ajout d’une commande PayPal offre \u00e0 vos clients un moyen de paiement s\u00fbr et fiable et rationalise le processus de transaction, am\u00e9liorant ainsi l’exp\u00e9rience de l’utilisateur. Cette int\u00e9gration peut consid\u00e9rablement am\u00e9liorer la fonctionnalit\u00e9 de votre site et la satisfaction de vos clients.<\/p>\n

    Voici comment int\u00e9grer la commande PayPal \u00e0 votre site statique :<\/p>\n

      \n
    1. Connectez-vous au tableau de bord des d\u00e9veloppeurs PayPal<\/a>.<\/li>\n
    2. Sur le tableau de bord, acc\u00e9dez \u00e0 la section Apps & Credentials<\/strong>. Activez le mode Sandbox<\/strong>, puis cliquez sur Create App<\/strong>.<\/li>\n
    3. Dans le formulaire, donnez un nom \u00e0 votre application (par exemple, Kinsta Gateway Demo). S\u00e9lectionnez Merchant<\/strong> comme type et cliquez sur Create App<\/strong>.\n

      \"Formulaire
      Formulaire de cr\u00e9ation d’application de PayPal.<\/figcaption><\/figure><\/li>\n
    4. Copiez l’ID client<\/strong> de la section API credentials<\/strong> pour cr\u00e9er plus tard un bouton de commande PayPal.\n

      \"Informations
      Informations d’identification de l’application PayPal.<\/figcaption><\/figure><\/li>\n
    5. Faites d\u00e9filer la page de l’application pour passer en revue les autres r\u00e9glages. Les valeurs par d\u00e9faut conviennent pour ce tutoriel. Cliquez sur Save Changes<\/strong>.\n

      \"Caract\u00e9ristiques
      Caract\u00e9ristiques de l’application PayPal.<\/figcaption><\/figure><\/li>\n
    6. Ensuite, int\u00e9grez la commande PayPal \u00e0 votre site statique. Cr\u00e9ez un bouton de commande \u00e0 l’aide du SDK JavaScript pour les m\u00e9thodes de paiement alternatives (APM)<\/a> de PayPal. Il vous permet d’int\u00e9grer divers moyens de paiement dans un site statique sans avoir \u00e0 configurer une application backend. Ajoutez le code JavaScript suivant au fichier product.html<\/strong>, juste avant la balise de fermeture <\/body><\/code>. Remplacez YOUR_CLIENT_ID<\/code> par votre identifiant de client PayPal. Vous devrez peut-\u00eatre \u00e9galement remplacer la devise USD<\/code> par la devise accept\u00e9e par votre compte PayPal.\n
      <!-- STRIPE BUTTON BEGIN -->\n<script   \nsrc=\"https:\/\/www.paypal.com\/sdk\/js?client-id=YOUR_CLIENT_ID¤cy=USD\"   \ndata-sdk-integration-source=\"button-factory\"><\/script>\n<script>\npaypal.Buttons({\n\tcreateOrder: function(data, actions) {\n\t\/\/ Set up the transaction\n\treturn actions.order.create({\n\t\tpurchase_units: [{\n\t\tamount: {\n\t\t\tvalue: '1.00'\n\t\t}\n\t\t}]\n\t});\n\t},\n\tonApprove: function(data, actions) {\n\t\/\/ Capture the funds from the transaction\n\treturn actions.order.capture().then(function(details) {\n\t\t\/\/ Show a success message to the buyer\n\t\talert('Transaction completed by ' + details.payer.name.given_name);\n\t});\n\t}\n}).render('#paypal-button-container');\n<\/script>\n<!-- STRIPE BUTTON END -->\n<\/code><\/pre>\n
      La fonction paypal.Buttons<\/code> d\u00e9finit deux fonctions :<\/p>\n