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

Aprenda a incrustar un formulario de pago personalizado WooshPay en su sitio web o aplicaci\u00f3n. El c\u00f3digo del lado del cliente y del servidor crea un formulario de pago con elementos para completar un pago utilizando varios m\u00e9todos de pago.<\/p>\n\n\n\n

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

Flujo de pagos<\/h2>\n\n\n\n
\"flujo<\/figure>\n\n\n\n

Para utilizar el SDK WooshPay hay que seguir algunos pasos:<\/p>\n\n\n\n

Crear una PaymentIntent<\/h3>\n\n\n\n

A\u00f1ada un punto final en su servidor que cree un PaymentIntent. Una PaymentIntent realiza un seguimiento del ciclo de vida del pago del cliente, controlando cualquier intento de pago fallido y asegur\u00e1ndose de que al cliente s\u00f3lo se le cobra una vez. Devuelve el secreto de cliente de la PaymentIntent (n\u00famero de PaymentIntent en este caso) en la respuesta para finalizar el pago en el cliente. Habilitamos las tarjetas por defecto.<\/p>\n\n\n\n

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

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

Utilice wooshpay.js para cumplir con la normativa PCI, asegur\u00e1ndose de que los datos de pago se env\u00edan directamente a WooshPay sin afectar a su servidor. Cargue siempre wooshpay.js desde js.wooshpay.com para seguir cumpliendo la normativa. No incluya el script en un paquete ni lo aloje usted mismo.<\/p>\n\n\n\n

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

Inicializar elementos WooshPay<\/h3>\n\n\n\n

Inicialice la biblioteca WooshPay Elements UI con el secreto del cliente. Elements gestiona los componentes de interfaz de usuario necesarios para recopilar los datos de pago.<\/p>\n\n\n\n

Completar el pago en el cliente<\/h3>\n\n\n\n

Completar el pago
Llame a confirmarPago()<\/code>pasando el PaymentElement y una return_url para indicar a d\u00f3nde debe redirigir WooshPay al usuario una vez completado el pago. Para los pagos que requieren autenticaci\u00f3n, WooshPay muestra un modal para la autenticaci\u00f3n 3D Secure o redirige al cliente a una p\u00e1gina de autenticaci\u00f3n dependiendo del m\u00e9todo de pago. Una vez que el cliente ha completado el proceso de autenticaci\u00f3n, se le redirige a la p\u00e1gina de autenticaci\u00f3n. URL_de_retorno<\/code>.<\/p>\n\n\n\n

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

Gesti\u00f3n de errores<\/h2>\n\n\n\n

Si hay alg\u00fan error inmediato (por ejemplo, la tarjeta de su cliente es rechazada), wooshpay.js devuelve un error. Muestra ese mensaje de error a tu cliente para que pueda volver a intentarlo.<\/p>\n\n\n\n

Mostrar un mensaje sobre el estado del pago<\/h2>\n\n\n\n

Cuando WooshPay redirige al cliente al URL_de_retorno<\/code>El payment_intent_client_secret<\/code>es a\u00f1adido por wooshpay.js. Util\u00edcelo para recuperar el PaymentIntent y determinar qu\u00e9 mostrar a su cliente.<\/p>\n\n\n\n

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

Demostraci\u00f3n<\/h2>\n\n\n\n

Puede descargarlo desde aqu\u00ed Descarga de la demo del SDK de JS<\/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:\/\/wooshpay.com\/es\/author\/zhaozixu\/"},"doc_category_info":[{"term_name":"Online Payments","term_url":"https:\/\/wooshpay.com\/es\/docs-category\/pagos-en-linea\/"}],"doc_tag_info":[{"term_name":"Get a demo","term_url":"https:\/\/wooshpay.com\/es\/docs-tag\/get-a-demo\/"},{"term_name":"js sdk","term_url":"https:\/\/wooshpay.com\/es\/docs-tag\/js-sdk\/"},{"term_name":"Payment Flow","term_url":"https:\/\/wooshpay.com\/es\/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\/es\/docs\/wooshpay-js-sdk\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\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\/es\/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:\/\/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\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/wooshpay.com\/fr\/docs\/wooshpay-js-sdk\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@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\":\"es\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"WooshPay JS SDK - WooshPay","description":"Aprenda a incrustar un formulario de pago personalizado WooshPay en su sitio web o aplicaci\u00f3n. El c\u00f3digo del lado del cliente y del servidor crea un formulario de pago con elementos para completar un pago utilizando varios m\u00e9todos de pago.","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\/es\/docs\/wooshpay-js-sdk\/","og_locale":"es_ES","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\/es\/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:\/\/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":"Aprenda a incrustar un formulario de pago personalizado WooshPay en su sitio web o aplicaci\u00f3n. El c\u00f3digo del lado del cliente y del servidor crea un formulario de pago con elementos para completar un pago utilizando varios m\u00e9todos de pago.","breadcrumb":{"@id":"https:\/\/wooshpay.com\/fr\/docs\/wooshpay-js-sdk\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/wooshpay.com\/fr\/docs\/wooshpay-js-sdk\/"]}]},{"@type":"ImageObject","inLanguage":"es","@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":"Plataforma de pago \u00fanica","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":"es"}]}},"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\/es\/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\/es\/wp-json\/wp\/v2\/docs\/11932","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wooshpay.com\/es\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/wooshpay.com\/es\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/wooshpay.com\/es\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/wooshpay.com\/es\/wp-json\/wp\/v2\/comments?post=11932"}],"version-history":[{"count":0,"href":"https:\/\/wooshpay.com\/es\/wp-json\/wp\/v2\/docs\/11932\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wooshpay.com\/es\/wp-json\/wp\/v2\/media\/11934"}],"wp:attachment":[{"href":"https:\/\/wooshpay.com\/es\/wp-json\/wp\/v2\/media?parent=11932"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/wooshpay.com\/es\/wp-json\/wp\/v2\/doc_category?post=11932"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/wooshpay.com\/es\/wp-json\/wp\/v2\/doc_tag?post=11932"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}