{"id":11932,"date":"2023-08-05T08:24:57","date_gmt":"2023-08-05T08:24:57","guid":{"rendered":"https:\/\/wooshpay.com\/?post_type=docs&p=11932"},"modified":"2023-08-09T07:32:21","modified_gmt":"2023-08-09T07:32:21","password":"","slug":"wooshpay-js-sdk","status":"publish","type":"docs","link":"https:\/\/d2jcf4noflr1cd.cloudfront.net\/fr\/docs\/wooshpay-js-sdk\/","title":{"rendered":"WooshPay JS SDK"},"content":{"rendered":"

Apprenez \u00e0 int\u00e9grer un formulaire de paiement WooshPay personnalis\u00e9 dans votre site web ou votre application. Le code c\u00f4t\u00e9 client et c\u00f4t\u00e9 serveur construit un formulaire de paiement avec des \u00e9l\u00e9ments permettant d'effectuer un paiement \u00e0 l'aide de diverses m\u00e9thodes de paiement.<\/p>\n\n\n\n

<\/p>\n\n\n\n

Flux de paiement<\/h2>\n\n\n\n
\"flux<\/figure>\n\n\n\n

L'utilisation de WooshPay SDK se fait en quelques \u00e9tapes :<\/p>\n\n\n\n

Cr\u00e9er un PaymentIntent<\/h3>\n\n\n\n

Ajoutez un point de terminaison sur votre serveur qui cr\u00e9e un PaymentIntent. Un PaymentIntent suit le cycle de vie du paiement du client, en gardant trace de toute tentative de paiement \u00e9chou\u00e9e et en veillant \u00e0 ce que le client ne soit d\u00e9bit\u00e9 qu'une seule fois. Renvoyez le secret client du PaymentIntent (num\u00e9ro du PaymentIntent dans ce cas) dans la r\u00e9ponse pour terminer le paiement sur le client. Nous activons les cartes par d\u00e9faut.<\/p>\n\n\n\n

<\/p>\n\n\n\n

Charger wooshpay.js<\/h3>\n\n\n\n

Utilisez wooshpay.js pour rester conforme \u00e0 la norme PCI en vous assurant que les d\u00e9tails du paiement sont envoy\u00e9s directement \u00e0 WooshPay sans passer par votre serveur. Chargez toujours wooshpay.js \u00e0 partir de js.wooshpay.com pour rester conforme. N'incluez pas le script dans un pack ou ne l'h\u00e9bergez pas vous-m\u00eame.<\/p>\n\n\n\n

<\/p>\n\n\n\n

Initialisation des \u00e9l\u00e9ments WooshPay<\/h3>\n\n\n\n

Initialiser la biblioth\u00e8que d'interface utilisateur WooshPay Elements avec le secret du client. Elements g\u00e8re les composants de l'interface utilisateur dont vous avez besoin pour collecter les donn\u00e9es de paiement.<\/p>\n\n\n\n

Effectuer le paiement sur le client<\/h3>\n\n\n\n

Compl\u00e9ter le paiement
Appeler confirmPayment()<\/code>en transmettant le PaymentElement et un return_url pour indiquer o\u00f9 WooshPay doit rediriger l'utilisateur apr\u00e8s qu'il ait effectu\u00e9 le paiement. Pour les paiements n\u00e9cessitant une authentification, WooshPay affiche une fen\u00eatre modale pour l'authentification 3D Secure ou redirige le client vers une page d'authentification en fonction de la m\u00e9thode de paiement. Une fois que le client a termin\u00e9 le processus d'authentification, il est redirig\u00e9 vers la page d'authentification de return_url<\/code>.<\/p>\n\n\n\n

<\/p>\n\n\n\n

Traiter les erreurs<\/h2>\n\n\n\n

S'il y a des erreurs imm\u00e9diates (par exemple, la carte de votre client est refus\u00e9e), wooshpay.js renvoie une erreur. Affichez ce message d'erreur \u00e0 votre client pour qu'il puisse r\u00e9essayer.<\/p>\n\n\n\n

Afficher un message sur l'\u00e9tat du paiement<\/h2>\n\n\n\n

Lorsque WooshPay redirige le client vers le site return_url<\/code>, le secret_client_intent_paiement<\/code>est ajout\u00e9 par wooshpay.js. Utilisez-le pour r\u00e9cup\u00e9rer le PaymentIntent afin de d\u00e9terminer ce qu'il faut montrer \u00e0 votre client.<\/p>\n\n\n\n

<\/p>\n\n\n\n

Obtenir une d\u00e9monstration<\/h2>\n\n\n\n

Vous pouvez t\u00e9l\u00e9charger ici JS SDK Demo download<\/a><\/p>\n\n\n\n

<\/p>","protected":false},"excerpt":{"rendered":"

Learn how to embed a custom WooshPay payment form in your website or application. The client- and server-side code builds a checkout form with Elements to complete a payment using various payment methods. Payment Flow There are few steps of using WooshPay SDK: Create a PaymentIntent Add an endpoint on your server that creates a […]<\/p>","protected":false},"author":6,"featured_media":11934,"comment_status":"open","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","footnotes":""},"doc_category":[315],"doc_tag":[320,318,319],"class_list":["post-11932","docs","type-docs","status-publish","has-post-thumbnail","hentry","doc_category-online-payments","doc_tag-get-a-demo","doc_tag-js-sdk","doc_tag-payment-flow"],"year_month":"2026-04","word_count":333,"total_views":"2267","reactions":{"happy":"34","normal":"36","sad":"34"},"author_info":{"name":"zhaozixu","author_nicename":"zhaozixu","author_url":"https:\/\/d2jcf4noflr1cd.cloudfront.net\/fr\/author\/zhaozixu\/"},"doc_category_info":[{"term_name":"Online Payments","term_url":"https:\/\/d2jcf4noflr1cd.cloudfront.net\/fr\/docs-category\/paiements-en-ligne\/"}],"doc_tag_info":[{"term_name":"Get a demo","term_url":"https:\/\/d2jcf4noflr1cd.cloudfront.net\/fr\/docs-tag\/get-a-demo\/"},{"term_name":"js sdk","term_url":"https:\/\/d2jcf4noflr1cd.cloudfront.net\/fr\/docs-tag\/js-sdk\/"},{"term_name":"Payment Flow","term_url":"https:\/\/d2jcf4noflr1cd.cloudfront.net\/fr\/docs-tag\/payment-flow\/"}],"yoast_head":"\nWooshPay JS SDK - WooshPay<\/title>\n<meta name=\"description\" content=\"Learn how to embed a custom WooshPay payment form in your website or application. The client- and server-side code builds a checkout form with Elements to complete a payment using various payment methods.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/wooshpay.com\/fr\/docs\/wooshpay-js-sdk\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"WooshPay JS SDK\" \/>\n<meta property=\"og:description\" content=\"Learn how to embed a custom WooshPay payment form in your website or application. The client- and server-side code builds a checkout form with Elements to complete a payment using various payment methods.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/wooshpay.com\/fr\/docs\/wooshpay-js-sdk\/\" \/>\n<meta property=\"og:site_name\" content=\"WooshPay\" \/>\n<meta property=\"article:modified_time\" content=\"2023-08-09T07:32:21+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/wooshpay-official-img.oss-accelerate.aliyuncs.com\/wp-content\/uploads\/2023\/08\/wooshpay-paymen-flow.png\" \/>\n\t<meta property=\"og:image:width\" content=\"935\" \/>\n\t<meta property=\"og:image:height\" content=\"395\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/wooshpay.com\/fr\/docs\/wooshpay-js-sdk\/\",\"url\":\"https:\/\/wooshpay.com\/fr\/docs\/wooshpay-js-sdk\/\",\"name\":\"WooshPay JS SDK - WooshPay\",\"isPartOf\":{\"@id\":\"https:\/\/www.wooshpay.com\/zh\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/wooshpay.com\/fr\/docs\/wooshpay-js-sdk\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/wooshpay.com\/fr\/docs\/wooshpay-js-sdk\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/wooshpay-official-img.oss-accelerate.aliyuncs.com\/wp-content\/uploads\/2023\/08\/wooshpay-paymen-flow.png\",\"datePublished\":\"2023-08-05T08:24:57+00:00\",\"dateModified\":\"2023-08-09T07:32:21+00:00\",\"description\":\"Learn how to embed a custom WooshPay payment form in your website or application. The client- and server-side code builds a checkout form with Elements to complete a payment using various payment methods.\",\"breadcrumb\":{\"@id\":\"https:\/\/wooshpay.com\/fr\/docs\/wooshpay-js-sdk\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/wooshpay.com\/fr\/docs\/wooshpay-js-sdk\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/wooshpay.com\/fr\/docs\/wooshpay-js-sdk\/#primaryimage\",\"url\":\"https:\/\/wooshpay-official-img.oss-accelerate.aliyuncs.com\/wp-content\/uploads\/2023\/08\/wooshpay-paymen-flow.png\",\"contentUrl\":\"https:\/\/wooshpay-official-img.oss-accelerate.aliyuncs.com\/wp-content\/uploads\/2023\/08\/wooshpay-paymen-flow.png\",\"width\":935,\"height\":395,\"caption\":\"wooshpay paymen flow\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/wooshpay.com\/fr\/docs\/wooshpay-js-sdk\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.wooshpay.com\/zh\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Docs\",\"item\":\"https:\/\/wooshpay.com\/fr\/docs\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"WooshPay JS SDK\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.wooshpay.com\/zh\/#website\",\"url\":\"https:\/\/www.wooshpay.com\/zh\/\",\"name\":\"WooshPay\",\"description\":\"One-stop payment platform\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.wooshpay.com\/zh\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"WooshPay JS SDK - WooshPay","description":"Apprenez \u00e0 int\u00e9grer un formulaire de paiement WooshPay personnalis\u00e9 dans votre site web ou votre application. Le code c\u00f4t\u00e9 client et c\u00f4t\u00e9 serveur construit un formulaire de paiement avec des \u00e9l\u00e9ments permettant d'effectuer un paiement \u00e0 l'aide de diverses m\u00e9thodes de paiement.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/wooshpay.com\/fr\/docs\/wooshpay-js-sdk\/","og_locale":"fr_FR","og_type":"article","og_title":"WooshPay JS SDK","og_description":"Learn how to embed a custom WooshPay payment form in your website or application. The client- and server-side code builds a checkout form with Elements to complete a payment using various payment methods.","og_url":"https:\/\/wooshpay.com\/fr\/docs\/wooshpay-js-sdk\/","og_site_name":"WooshPay","article_modified_time":"2023-08-09T07:32:21+00:00","og_image":[{"width":935,"height":395,"url":"https:\/\/wooshpay-official-img.oss-accelerate.aliyuncs.com\/wp-content\/uploads\/2023\/08\/wooshpay-paymen-flow.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/wooshpay.com\/fr\/docs\/wooshpay-js-sdk\/","url":"https:\/\/wooshpay.com\/fr\/docs\/wooshpay-js-sdk\/","name":"WooshPay JS SDK - WooshPay","isPartOf":{"@id":"https:\/\/www.wooshpay.com\/zh\/#website"},"primaryImageOfPage":{"@id":"https:\/\/wooshpay.com\/fr\/docs\/wooshpay-js-sdk\/#primaryimage"},"image":{"@id":"https:\/\/wooshpay.com\/fr\/docs\/wooshpay-js-sdk\/#primaryimage"},"thumbnailUrl":"https:\/\/wooshpay-official-img.oss-accelerate.aliyuncs.com\/wp-content\/uploads\/2023\/08\/wooshpay-paymen-flow.png","datePublished":"2023-08-05T08:24:57+00:00","dateModified":"2023-08-09T07:32:21+00:00","description":"Apprenez \u00e0 int\u00e9grer un formulaire de paiement WooshPay personnalis\u00e9 dans votre site web ou votre application. Le code c\u00f4t\u00e9 client et c\u00f4t\u00e9 serveur construit un formulaire de paiement avec des \u00e9l\u00e9ments permettant d'effectuer un paiement \u00e0 l'aide de diverses m\u00e9thodes de paiement.","breadcrumb":{"@id":"https:\/\/wooshpay.com\/fr\/docs\/wooshpay-js-sdk\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/wooshpay.com\/fr\/docs\/wooshpay-js-sdk\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/wooshpay.com\/fr\/docs\/wooshpay-js-sdk\/#primaryimage","url":"https:\/\/wooshpay-official-img.oss-accelerate.aliyuncs.com\/wp-content\/uploads\/2023\/08\/wooshpay-paymen-flow.png","contentUrl":"https:\/\/wooshpay-official-img.oss-accelerate.aliyuncs.com\/wp-content\/uploads\/2023\/08\/wooshpay-paymen-flow.png","width":935,"height":395,"caption":"wooshpay paymen flow"},{"@type":"BreadcrumbList","@id":"https:\/\/wooshpay.com\/fr\/docs\/wooshpay-js-sdk\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.wooshpay.com\/zh\/"},{"@type":"ListItem","position":2,"name":"Docs","item":"https:\/\/wooshpay.com\/fr\/docs\/"},{"@type":"ListItem","position":3,"name":"WooshPay JS SDK"}]},{"@type":"WebSite","@id":"https:\/\/www.wooshpay.com\/zh\/#website","url":"https:\/\/www.wooshpay.com\/zh\/","name":"WooshPay","description":"Plate-forme de paiement unique","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.wooshpay.com\/zh\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"}]}},"uagb_featured_image_src":{"full":["https:\/\/wooshpay-official-img.oss-accelerate.aliyuncs.com\/wp-content\/uploads\/2023\/08\/wooshpay-paymen-flow.png",935,395,false],"thumbnail":["https:\/\/wooshpay-official-img.oss-accelerate.aliyuncs.com\/wp-content\/uploads\/2023\/08\/wooshpay-paymen-flow-150x150.png",150,150,true],"medium":["https:\/\/wooshpay-official-img.oss-accelerate.aliyuncs.com\/wp-content\/uploads\/2023\/08\/wooshpay-paymen-flow-300x127.png",300,127,true],"medium_large":["https:\/\/wooshpay-official-img.oss-accelerate.aliyuncs.com\/wp-content\/uploads\/2023\/08\/wooshpay-paymen-flow-768x324.png",768,324,true],"large":["https:\/\/wooshpay-official-img.oss-accelerate.aliyuncs.com\/wp-content\/uploads\/2023\/08\/wooshpay-paymen-flow.png",935,395,false],"1536x1536":["https:\/\/wooshpay-official-img.oss-accelerate.aliyuncs.com\/wp-content\/uploads\/2023\/08\/wooshpay-paymen-flow.png",935,395,false],"2048x2048":["https:\/\/wooshpay-official-img.oss-accelerate.aliyuncs.com\/wp-content\/uploads\/2023\/08\/wooshpay-paymen-flow.png",935,395,false],"trp-custom-language-flag":["https:\/\/wooshpay-official-img.oss-accelerate.aliyuncs.com\/wp-content\/uploads\/2023\/08\/wooshpay-paymen-flow-18x8.png",18,8,true]},"uagb_author_info":{"display_name":"zhaozixu","author_link":"https:\/\/d2jcf4noflr1cd.cloudfront.net\/fr\/author\/zhaozixu\/"},"uagb_comment_info":0,"uagb_excerpt":"Learn how to embed a custom WooshPay payment form in your website or application. The client- and server-side code builds a checkout form with Elements to complete a payment using various payment methods. Payment Flow There are few steps of using WooshPay SDK: Create a PaymentIntent Add an endpoint on your server that creates a\u2026","_links":{"self":[{"href":"https:\/\/d2jcf4noflr1cd.cloudfront.net\/fr\/wp-json\/wp\/v2\/docs\/11932","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/d2jcf4noflr1cd.cloudfront.net\/fr\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/d2jcf4noflr1cd.cloudfront.net\/fr\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/d2jcf4noflr1cd.cloudfront.net\/fr\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/d2jcf4noflr1cd.cloudfront.net\/fr\/wp-json\/wp\/v2\/comments?post=11932"}],"version-history":[{"count":0,"href":"https:\/\/d2jcf4noflr1cd.cloudfront.net\/fr\/wp-json\/wp\/v2\/docs\/11932\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/d2jcf4noflr1cd.cloudfront.net\/fr\/wp-json\/wp\/v2\/media\/11934"}],"wp:attachment":[{"href":"https:\/\/d2jcf4noflr1cd.cloudfront.net\/fr\/wp-json\/wp\/v2\/media?parent=11932"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/d2jcf4noflr1cd.cloudfront.net\/fr\/wp-json\/wp\/v2\/doc_category?post=11932"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/d2jcf4noflr1cd.cloudfront.net\/fr\/wp-json\/wp\/v2\/doc_tag?post=11932"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}