{"id":11932,"date":"2023-08-05T08:24:57","date_gmt":"2023-08-05T08:24:57","guid":{"rendered":"https:\/\/wooshpay.com\/?post_type=docs&#038;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\/ja\/docs\/wooshpay-js-sdk\/","title":{"rendered":"WooshPay JS SDK"},"content":{"rendered":"<p>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.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading has-medium-plus-font-size\" id=\"h-payment-flow\">\u652f\u6255\u3044\u306e\u6d41\u308c<\/h2>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/api.apifox.cn\/api\/v1\/projects\/1296482\/resources\/362142\/image-preview\" alt=\"wooshpay payment flow\"\/><\/figure>\n\n\n\n<p>There are few steps of using WooshPay SDK:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-create-a-paymentintent\">PaymentIntent\u306e\u4f5c\u6210<\/h3>\n\n\n\n<p>Add an endpoint on your server that creates a PaymentIntent. A PaymentIntent tracks the customer\u2019s payment lifecycle, keeping track of any failed payment attempts and ensuring the customer is only charged once. Return the PaymentIntent\u2019s client secret(PaymentIntent number in this case) in the response to finish the payment on the client. We enable cards for you by default.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Load wooshpay.js<\/h3>\n\n\n\n<p>Use wooshpay.js to remain PCI compliant by ensuring that payment details are sent directly to WooshPay without hitting your server. Always load wooshpay.js from js.wooshpay.com to remain compliant. Don\u2019t include the script in a bundle or host it yourself.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-initialize-wooshpay-elements\"> Initialize WooshPay Elements<\/h3>\n\n\n\n<p>Initialize the WooshPay Elements UI library with the client secret. Elements manages the UI components you need to collect payment details.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-complete-the-payment-on-the-client\">Complete the payment on the client<\/h3>\n\n\n\n<p>Complete the payment<br>\u96fb\u8a71 <code>confirmPayment()<\/code>, passing along the PaymentElement and a return_url to indicate where WooshPay should redirect the user after they complete the payment. For payments that require authentication, WooshPay displays a modal for 3D Secure authentication or redirects the customer to an authentication page depending on the payment method. After the customer completes the authentication process, they\u2019re redirected to the <code>return_url<\/code>.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading has-medium-plus-font-size\" id=\"h-handle-errors\">Handle errors<\/h2>\n\n\n\n<p>If there are any immediate errors (for example, your customer\u2019s card is declined), wooshpay.js returns an error. Show that error message to your customer so they can try again.<\/p>\n\n\n\n<h2 class=\"wp-block-heading has-medium-font-size\" id=\"h-show-a-payment-status-message\">Show a payment status message<\/h2>\n\n\n\n<p>When WooshPay redirects the customer to the <code>return_url<\/code>, the <code>payment_intent_client_secret<\/code>query parameter is appended by wooshpay.js. Use this to retrieve the PaymentIntent to determine what to show to your customer.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading has-medium-plus-font-size\" id=\"h-get-a-demo\">Get a Demo<\/h2>\n\n\n\n<p>You may download from here <a href=\"https:\/\/appletservice.oss-cn-hangzhou.aliyuncs.com\/wooshpay_java_demo.zip\">JS SDK Demo download<\/a><\/p>\n\n\n\n<p><\/p>","protected":false},"excerpt":{"rendered":"<p>\u30a6\u30a7\u30d6\u30b5\u30a4\u30c8\u3084\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306b\u30ab\u30b9\u30bf\u30e0WooshPay\u6c7a\u6e08\u30d5\u30a9\u30fc\u30e0\u3092\u57cb\u3081\u8fbc\u3080\u65b9\u6cd5\u3092\u3054\u7d39\u4ecb\u3057\u307e\u3059\u3002\u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u5074\u3068\u30b5\u30fc\u30d0\u30fc\u5074\u306e\u30b3\u30fc\u30c9\u306f\u3001\u69d8\u3005\u306a\u652f\u6255\u3044\u65b9\u6cd5\u3092\u4f7f\u7528\u3057\u3066\u652f\u6255\u3044\u3092\u5b8c\u4e86\u3059\u308b\u305f\u3081\u306e\u8981\u7d20\u3092\u5099\u3048\u305f\u30c1\u30a7\u30c3\u30af\u30a2\u30a6\u30c8\u30d5\u30a9\u30fc\u30e0\u3092\u69cb\u7bc9\u3057\u307e\u3059\u3002\u6c7a\u6e08\u306e\u6d41\u308c WooshPay SDK\u3092\u4f7f\u7528\u3059\u308b\u306b\u306f\u3001\u3044\u304f\u3064\u304b\u306e\u30b9\u30c6\u30c3\u30d7\u304c\u3042\u308a\u307e\u3059\uff1aPaymentIntent\u306e\u4f5c\u6210 PaymentIntent\u3092\u4f5c\u6210\u3059\u308b\u30a8\u30f3\u30c9\u30dd\u30a4\u30f3\u30c8\u3092\u30b5\u30fc\u30d0\u30fc\u306b\u8ffd\u52a0\u3057\u307e\u3059\u3002PaymentIntent\u306f\u9867\u5ba2\u306e\u652f\u6255\u3044\u30e9\u30a4\u30d5\u30b5\u30a4\u30af\u30eb\u3092\u8ffd\u8de1\u3057\u3001\u652f\u6255\u3044\u306e\u5931\u6557\u3092\u8ffd\u8de1\u3057\u3001\u9867\u5ba2\u304c\u4e00\u5ea6\u3060\u3051\u8acb\u6c42\u3055\u308c\u308b\u3088\u3046\u306b\u3057\u307e\u3059\u3002\u30ec\u30b9\u30dd\u30f3\u30b9\u3067PaymentIntent\u306e\u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u30b7\u30fc\u30af\u30ec\u30c3\u30c8\uff08\u3053\u306e\u5834\u5408\u306fPaymentIntent\u756a\u53f7\uff09\u3092\u8fd4\u3057\u3001\u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u3067\u306e\u652f\u6255\u3044\u3092\u5b8c\u4e86\u3055\u305b\u307e\u3059\u3002\u30c7\u30d5\u30a9\u30eb\u30c8\u3067\u30ab\u30fc\u30c9\u3092\u6709\u52b9\u306b\u3057\u307e\u3059\u3002wooshpay.js\u3092\u30ed\u30fc\u30c9\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/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":"\u8d99\u5b50\u79c0","author_nicename":"zhaozixu","author_url":"https:\/\/d2jcf4noflr1cd.cloudfront.net\/ja\/author\/zhaozixu\/"},"doc_category_info":[{"term_name":"Online Payments","term_url":"https:\/\/d2jcf4noflr1cd.cloudfront.net\/ja\/docs-category\/online-payments\/"}],"doc_tag_info":[{"term_name":"Get a demo","term_url":"https:\/\/d2jcf4noflr1cd.cloudfront.net\/ja\/docs-tag\/get-a-demo\/"},{"term_name":"js sdk","term_url":"https:\/\/d2jcf4noflr1cd.cloudfront.net\/ja\/docs-tag\/js-sdk\/"},{"term_name":"Payment Flow","term_url":"https:\/\/d2jcf4noflr1cd.cloudfront.net\/ja\/docs-tag\/payment-flow\/"}],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v20.8 (Yoast SEO v24.9) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>WooshPay 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=\"ja_JP\" \/>\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\u5206\" \/>\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\":\"ja\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/wooshpay.com\/fr\/docs\/wooshpay-js-sdk\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"ja\",\"@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\":\"ja\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"WooshPay JS SDK - WooshPay","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.","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":"ja_JP","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\u5206"},"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":"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":"ja","potentialAction":[{"@type":"ReadAction","target":["https:\/\/wooshpay.com\/fr\/docs\/wooshpay-js-sdk\/"]}]},{"@type":"ImageObject","inLanguage":"ja","@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":"\u30ef\u30f3\u30b9\u30c8\u30c3\u30d7\u6c7a\u6e08\u30d7\u30e9\u30c3\u30c8\u30d5\u30a9\u30fc\u30e0","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":"ja"}]}},"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\/ja\/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&hellip;","_links":{"self":[{"href":"https:\/\/d2jcf4noflr1cd.cloudfront.net\/ja\/wp-json\/wp\/v2\/docs\/11932","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/d2jcf4noflr1cd.cloudfront.net\/ja\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/d2jcf4noflr1cd.cloudfront.net\/ja\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/d2jcf4noflr1cd.cloudfront.net\/ja\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/d2jcf4noflr1cd.cloudfront.net\/ja\/wp-json\/wp\/v2\/comments?post=11932"}],"version-history":[{"count":0,"href":"https:\/\/d2jcf4noflr1cd.cloudfront.net\/ja\/wp-json\/wp\/v2\/docs\/11932\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/d2jcf4noflr1cd.cloudfront.net\/ja\/wp-json\/wp\/v2\/media\/11934"}],"wp:attachment":[{"href":"https:\/\/d2jcf4noflr1cd.cloudfront.net\/ja\/wp-json\/wp\/v2\/media?parent=11932"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/d2jcf4noflr1cd.cloudfront.net\/ja\/wp-json\/wp\/v2\/doc_category?post=11932"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/d2jcf4noflr1cd.cloudfront.net\/ja\/wp-json\/wp\/v2\/doc_tag?post=11932"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}