{"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:\/\/wooshpay.com\/pt\/docs\/wooshpay-js-sdk\/","title":{"rendered":"WooshPay JS SDK"},"content":{"rendered":"

Saiba como incorporar um formul\u00e1rio de pagamento personalizado do WooshPay em seu site ou aplicativo. O c\u00f3digo do lado do cliente e do servidor cria um formul\u00e1rio de checkout com elementos para concluir um pagamento usando v\u00e1rios m\u00e9todos de pagamento.<\/p>\n\n\n\n

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

Fluxo de pagamento<\/h2>\n\n\n\n
\"fluxo<\/figure>\n\n\n\n

H\u00e1 algumas etapas para usar o WooshPay SDK:<\/p>\n\n\n\n

Criar um PaymentIntent<\/h3>\n\n\n\n

Adicione um ponto de extremidade em seu servidor que crie um PaymentIntent. Um PaymentIntent rastreia o ciclo de vida do pagamento do cliente, mantendo o controle de todas as tentativas de pagamento fracassadas e garantindo que o cliente seja cobrado apenas uma vez. Retorne o segredo do cliente do PaymentIntent (n\u00famero do PaymentIntent, neste caso) na resposta para concluir o pagamento no cliente. Habilitamos cart\u00f5es para voc\u00ea por padr\u00e3o.<\/p>\n\n\n\n

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

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

Use o wooshpay.js para manter a conformidade com a PCI, garantindo que os detalhes de pagamento sejam enviados diretamente para o WooshPay sem atingir seu servidor. Sempre carregue o wooshpay.js em js.wooshpay.com para manter a conformidade. N\u00e3o inclua o script em um pacote nem o hospede voc\u00ea mesmo.<\/p>\n\n\n\n

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

Inicializa\u00e7\u00e3o dos elementos WooshPay<\/h3>\n\n\n\n

Inicialize a biblioteca de interface do usu\u00e1rio do WooshPay Elements com o segredo do cliente. O Elements gerencia os componentes da interface do usu\u00e1rio necess\u00e1rios para coletar detalhes de pagamento.<\/p>\n\n\n\n

Concluir o pagamento no cliente<\/h3>\n\n\n\n

Concluir o pagamento
Chamada confirmPayment()<\/code>passando o PaymentElement e um return_url para indicar para onde o WooshPay deve redirecionar o usu\u00e1rio depois que ele concluir o pagamento. Para pagamentos que exigem autentica\u00e7\u00e3o, o WooshPay exibe um modal para autentica\u00e7\u00e3o 3D Secure ou redireciona o cliente para uma p\u00e1gina de autentica\u00e7\u00e3o, dependendo do m\u00e9todo de pagamento. Depois que o cliente concluir o processo de autentica\u00e7\u00e3o, ele ser\u00e1 redirecionado para a p\u00e1gina return_url<\/code>.<\/p>\n\n\n\n

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

Tratamento de erros<\/h2>\n\n\n\n

Se houver algum erro imediato (por exemplo, o cart\u00e3o do cliente foi recusado), o wooshpay.js retornar\u00e1 um erro. Mostre essa mensagem de erro ao seu cliente para que ele possa tentar novamente.<\/p>\n\n\n\n

Mostrar uma mensagem de status de pagamento<\/h2>\n\n\n\n

Quando o WooshPay redireciona o cliente para o return_url<\/code>, o payment_intent_client_secret<\/code>\u00e9 anexado pelo wooshpay.js. Use-o para recuperar o PaymentIntent para determinar o que mostrar ao seu cliente.<\/p>\n\n\n\n

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

Obter uma demonstra\u00e7\u00e3o<\/h2>\n\n\n\n

Voc\u00ea pode fazer o download aqui Download da demonstra\u00e7\u00e3o do JS SDK<\/a><\/p>\n\n\n\n

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

Saiba como incorporar um formul\u00e1rio de pagamento personalizado do WooshPay em seu site ou aplicativo. O c\u00f3digo do lado do cliente e do servidor cria um formul\u00e1rio de checkout com elementos para concluir um pagamento usando v\u00e1rios m\u00e9todos de pagamento. Fluxo de pagamento H\u00e1 algumas etapas para usar o SDK do WooshPay: Crie um PaymentIntent Adicione um ponto de extremidade em seu servidor que crie um [...]<\/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:\/\/wooshpay.com\/pt\/author\/zhaozixu\/"},"doc_category_info":[{"term_name":"Online Payments","term_url":"https:\/\/wooshpay.com\/pt\/docs-category\/online-payments\/"}],"doc_tag_info":[{"term_name":"Get a demo","term_url":"https:\/\/wooshpay.com\/pt\/docs-tag\/get-a-demo\/"},{"term_name":"js sdk","term_url":"https:\/\/wooshpay.com\/pt\/docs-tag\/sdk-js\/"},{"term_name":"Payment Flow","term_url":"https:\/\/wooshpay.com\/pt\/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:\/\/35.179.65.51\/docs\/wooshpay-js-sdk\/\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\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:\/\/35.179.65.51\/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 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/35.179.65.51\/docs\/wooshpay-js-sdk\/\",\"url\":\"https:\/\/35.179.65.51\/docs\/wooshpay-js-sdk\/\",\"name\":\"WooshPay JS SDK - WooshPay\",\"isPartOf\":{\"@id\":\"https:\/\/wooshpay.com\/it\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/35.179.65.51\/docs\/wooshpay-js-sdk\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/35.179.65.51\/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:\/\/35.179.65.51\/docs\/wooshpay-js-sdk\/#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/35.179.65.51\/docs\/wooshpay-js-sdk\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/35.179.65.51\/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:\/\/35.179.65.51\/docs\/wooshpay-js-sdk\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/wooshpay.com\/it\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Docs\",\"item\":\"https:\/\/d2jcf4noflr1cd.cloudfront.net\/ko\/docs\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"WooshPay JS SDK\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/wooshpay.com\/it\/#website\",\"url\":\"https:\/\/wooshpay.com\/it\/\",\"name\":\"WooshPay\",\"description\":\"One-stop payment platform\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/wooshpay.com\/it\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-BR\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"WooshPay JS SDK - WooshPay","description":"Saiba como incorporar um formul\u00e1rio de pagamento personalizado do WooshPay em seu site ou aplicativo. O c\u00f3digo do lado do cliente e do servidor cria um formul\u00e1rio de checkout com elementos para concluir um pagamento usando v\u00e1rios m\u00e9todos de pagamento.","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:\/\/35.179.65.51\/docs\/wooshpay-js-sdk\/","og_locale":"pt_BR","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:\/\/35.179.65.51\/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 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/35.179.65.51\/docs\/wooshpay-js-sdk\/","url":"https:\/\/35.179.65.51\/docs\/wooshpay-js-sdk\/","name":"WooshPay JS SDK - WooshPay","isPartOf":{"@id":"https:\/\/wooshpay.com\/it\/#website"},"primaryImageOfPage":{"@id":"https:\/\/35.179.65.51\/docs\/wooshpay-js-sdk\/#primaryimage"},"image":{"@id":"https:\/\/35.179.65.51\/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":"Saiba como incorporar um formul\u00e1rio de pagamento personalizado do WooshPay em seu site ou aplicativo. O c\u00f3digo do lado do cliente e do servidor cria um formul\u00e1rio de checkout com elementos para concluir um pagamento usando v\u00e1rios m\u00e9todos de pagamento.","breadcrumb":{"@id":"https:\/\/35.179.65.51\/docs\/wooshpay-js-sdk\/#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/35.179.65.51\/docs\/wooshpay-js-sdk\/"]}]},{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/35.179.65.51\/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:\/\/35.179.65.51\/docs\/wooshpay-js-sdk\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/wooshpay.com\/it\/"},{"@type":"ListItem","position":2,"name":"Docs","item":"https:\/\/d2jcf4noflr1cd.cloudfront.net\/ko\/docs\/"},{"@type":"ListItem","position":3,"name":"WooshPay JS SDK"}]},{"@type":"WebSite","@id":"https:\/\/wooshpay.com\/it\/#website","url":"https:\/\/wooshpay.com\/it\/","name":"WooshPay","description":"Plataforma de pagamento em um s\u00f3 lugar","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/wooshpay.com\/it\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-BR"}]}},"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:\/\/wooshpay.com\/pt\/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…","_links":{"self":[{"href":"https:\/\/wooshpay.com\/pt\/wp-json\/wp\/v2\/docs\/11932","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wooshpay.com\/pt\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/wooshpay.com\/pt\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/wooshpay.com\/pt\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/wooshpay.com\/pt\/wp-json\/wp\/v2\/comments?post=11932"}],"version-history":[{"count":0,"href":"https:\/\/wooshpay.com\/pt\/wp-json\/wp\/v2\/docs\/11932\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wooshpay.com\/pt\/wp-json\/wp\/v2\/media\/11934"}],"wp:attachment":[{"href":"https:\/\/wooshpay.com\/pt\/wp-json\/wp\/v2\/media?parent=11932"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/wooshpay.com\/pt\/wp-json\/wp\/v2\/doc_category?post=11932"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/wooshpay.com\/pt\/wp-json\/wp\/v2\/doc_tag?post=11932"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}