{"id":7220,"date":"2021-03-07T17:41:35","date_gmt":"2021-03-07T16:41:35","guid":{"rendered":"http:\/\/www.unimedia.tech.mialias.net\/stripe-checkout-page-using-stripe-elements\/"},"modified":"2024-01-10T18:20:09","modified_gmt":"2024-01-10T17:20:09","slug":"stripe-checkout-page-using-stripe-elements","status":"publish","type":"post","link":"https:\/\/www.unimedia.tech\/es\/stripe-checkout-page-using-stripe-elements\/","title":{"rendered":"P\u00e1gina de pago con elementos de Stripe"},"content":{"rendered":"\n<p><\/p>\n\n<p>En este art\u00edculo, vamos a discutir acerca de c\u00f3mo <a href=\"https:\/\/www.unimedia.tech\/dedicated-development-teams\/\">implementar <\/a>una p\u00e1gina de pago a rayas utilizando Stripe Elements en lugar de Stripe Checkout. Cu\u00e1ndo utilizarlos, C\u00f3mo utilizarlos y Qu\u00e9 casos de uso son adecuados para los distintos <a href=\"https:\/\/www.unimedia.tech\/software-development\/\">requisitos<\/a>.<\/p>\n\n<p>Este art\u00edculo contiene, C\u00f3digo con demos, Para que, Se hace m\u00e1s f\u00e1cil de aprender e implementar al mismo tiempo.<\/p>\n\n<p><\/p>\n\n<h2 class=\"wp-block-heading\">\u00bfQu\u00e9 es Stripe?<\/h2>\n\n<p><\/p>\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>Millones de empresas de todos los tama\u00f1os -desde nuevas empresas hasta grandes empresas- utilizan el software y las API de Stripe para aceptar pagos, enviar pagos y gestionar sus negocios en l\u00ednea.<\/p><cite>https:\/\/stripe.com<\/cite><\/blockquote>\n\n<p><\/p>\n\n<p><\/p>\n\n<h2 class=\"wp-block-heading\">Stripe Elements:<\/h2>\n\n<p><\/p>\n\n<p><\/p>\n\n<p><a href=\"https:\/\/stripe.com\/payments\/elements\">Stripe Elements<\/a> es un conjunto de componentes de interfaz de usuario predefinidos, como entradas y botones, para crear su flujo de pago.<\/p>\n\n<p>Est\u00e1 disponible como una caracter\u00edstica de Stripe.js. Por lo tanto, tokeniza la informaci\u00f3n sensible dentro de un elemento sin tener que tocar nunca su servidor, lo que lo hace a\u00fan m\u00e1s seguro.<\/p>\n\n<p>Stripe Elements incluye las caracter\u00edsticas que se indican a continuaci\u00f3n:<\/p>\n\n<ul class=\"wp-block-list\"><li>Formateo autom\u00e1tico de la informaci\u00f3n de la tarjeta a medida que se introduce<\/li><li>Traducir marcadores de posici\u00f3n al idioma preferido del cliente<\/li><li>Utilizar un dise\u00f1o adaptable para ajustarse a la anchura de la pantalla del cliente o del dispositivo m\u00f3vil<\/li><li>Personalizar el estilo para que coincida con el aspecto y la sensaci\u00f3n de su flujo de pago<\/li><\/ul>\n\n<p><\/p>\n\n<p><\/p>\n\n<p><\/p>\n\n<h2 class=\"wp-block-heading\">Para crear formularios de pago personalizados:<\/h2>\n\n<p>Para crear formularios de pago personalizados, la principal v\u00eda de integraci\u00f3n a trav\u00e9s de Stripe.js es con Stripe Elements, que permite recopilar informaci\u00f3n de pago confidencial mediante componentes de interfaz de usuario personalizables. <\/p>\n\n<p><\/p>\n\n<p>Stripe.js tambi\u00e9n proporciona una interfaz \u00fanica para <a href=\"https:\/\/stripe.com\/docs\/apple-pay\">Apple Pay<\/a>, <a href=\"https:\/\/stripe.com\/docs\/google-pay\">Google Pay<\/a> y la <a href=\"https:\/\/stripe.com\/docs\/payment-request-api\">API de solicitud de pago<\/a>.<\/p>\n\n<p><\/p>\n\n<p><\/p>\n\n<h3 class=\"wp-block-heading\" id=\"card-element\">1. Elemento de tarjeta<\/h3>\n\n<p>El Elemento Tarjeta le permite recopilar la informaci\u00f3n de la tarjeta en un solo elemento. Incluye un icono de la marca de la tarjeta que se actualiza din\u00e1micamente, as\u00ed como entradas para el n\u00famero, la caducidad, el CVC y el c\u00f3digo postal, <\/p>\n\n<p>Empiece por <a href=\"https:\/\/stripe.com\/docs\/payments\/accept-a-payment#web\">aceptar un pago<\/a>.<\/p>\n\n<p>Se aconseja utilizar Stripe.js para seguir cumpliendo con la normativa PCI asegurando que los datos de la tarjeta se env\u00edan directamente a Stripe sin llegar a su servidor para hacerlo m\u00e1s seguro. <\/p>\n\n<p>Para seguir cumpliendo la normativa, cargue siempre Stripe.js desde js.stripe.com. Se aconseja no incluir el script en un paquete ni alojarlo uno mismo.<\/p>\n\n<p>A continuaci\u00f3n se muestra la demo en ejecuci\u00f3n con c\u00f3digo para explorar y jugar.<\/p>\n\n<p><strong>Bol\u00edgrafo:<\/strong> <a href=\"https:\/\/codepen.io\/sarkazein7\/pen\/rNWJvXd\">https:\/\/codepen.io\/sarkazein7\/pen\/rNWJvXd<\/a><\/p>\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/www.unimedia.tech\/wp-content\/uploads\/2023\/12\/image-2-1024x645-1.png\" style=\"border 1px solid lightgray\" class=\"wp-image-3289\"\/><\/figure>\n\n<h4 class=\"wp-block-heading\">Configurar elemento de tarjeta (lado cliente)<\/h4>\n\n<p><\/p>\n\n<p><\/p>\n\n<p>Elements est\u00e1 disponible como parte de <a href=\"https:\/\/stripe.com\/docs\/stripe-js\">Stripe.js<\/a>. Por lo tanto, incluya esto en su p\u00e1gina y cree un contenedor para que pueda ser utilizado para el elemento <code>card <\/code>:<\/p>\n\n<p><\/p>\n\n<pre class=\"wp-block-code\"><code>&lt;script&nbsp;<em>src<\/em>=\"https:\/\/js.stripe.com\/v3\/\"&gt;&lt;\/script&gt;\n&lt;div id=\"card\"&gt;\n  &lt;!-- A Stripe Card Element will be inserted here. --&gt;\n&lt;\/div&gt;<\/code><\/pre>\n\n<p><\/p>\n\n<p>Su <a href=\"https:\/\/stripe.com\/docs\/keys\">clave de API<\/a> publicable de Stripe tambi\u00e9n es necesaria, ya que identifica su sitio web para Stripe:<\/p>\n\n<pre class=\"wp-block-code\"><code>const stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx', {\n  apiVersion: \"2020-08-27\",\n});<\/code><\/pre>\n\n<p><\/p>\n\n<h4 class=\"wp-block-heading\">Crear elemento de tarjeta con estilo<\/h4>\n\n<p>Aqu\u00ed, inicialmente, estamos creando la referencia a la API de Stripe, para que podamos utilizarlo para acceder a la API de Stripe.<\/p>\n\n<p>Despu\u00e9s de eso, hemos creado la referencia de los elementos de banda y se almacena en el interior <code>elements<\/code> variable, mediante el uso que vamos a crear la instancia de Stripe Card Element.<\/p>\n\n<p>Y por \u00faltimo, hemos creado el elemento tarjeta, donde hemos pasado, id del elemento y estilo para personalizar el aspecto del elemento.<\/p>\n\n<pre class=\"wp-block-code\"><code>const stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx', {\n  apiVersion: \"2020-08-27\",\n});\n\n  var elements = stripe.elements({\n    fonts: &#91;\n      {\n        cssSrc: 'https:\/\/fonts.googleapis.com\/css?family=Roboto',\n      },\n    ],\n    \/\/ Stripe's examples are localized to specific languages, but if\n    \/\/ you wish to have Elements automatically detect your user's locale,\n    \/\/ use `locale: 'auto'` instead.\n    locale: window.__exampleLocale\n  });\n\n  var card = elements.create('card', {\n    iconStyle: 'solid',\n    style: {\n      base: {\n        iconColor: '#c4f0ff',\n        color: '#fff',\n        fontWeight: 500,\n        fontFamily: 'Roboto, Open Sans, Segoe UI, sans-serif',\n        fontSize: '16px',\n        fontSmoothing: 'antialiased',\n\n        ':-webkit-autofill': {\n          color: '#fce883',\n        },\n        '::placeholder': {\n          color: '#87BBFD',\n        },\n      },\n      invalid: {\n        iconColor: '#FFC7EE',\n        color: '#FFC7EE',\n      },\n    },\n  });\n  card.mount('#card');<\/code><\/pre>\n\n<p><\/p>\n\n<p><\/p>\n\n<p><\/p>\n\n<p><\/p>\n\n<h3 class=\"wp-block-heading\" id=\"payment-request-button-element\">2. Bot\u00f3n de solicitud de pago<\/h3>\n\n<p><\/p>\n\n<p>El bot\u00f3n de solicitud de pago permite a sus clientes pagar con <a href=\"https:\/\/stripe.com\/docs\/apple-pay\">Apple Pay<\/a>, <a href=\"https:\/\/stripe.com\/docs\/google-pay\">Google Pay<\/a>, tarjetas guardadas en Chrome y <a href=\"https:\/\/stripe.com\/docs\/microsoft-pay\">Microsoft Pay<\/a>. <\/p>\n\n<p>A continuaci\u00f3n se muestra la demo en ejecuci\u00f3n con c\u00f3digo para explorar y jugar.<\/p>\n\n<p>Bol\u00edgrafo: <a href=\"https:\/\/codepen.io\/sarkazein7\/pen\/WNoZpzd\">https:\/\/codepen.io\/sarkazein7\/pen\/WNoZpzd<\/a><\/p>\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/www.unimedia.tech\/wp-content\/uploads\/2023\/12\/Stripe-Payment-Request-Button-Default-4.gif\" alt=\" clase\" wp-image-3273=\"\" style=\"border: solid 1px lightgray !important\"\/><\/figure>\n\n<p><\/p>\n\n<figure class=\"wp-block-image size-full is-resized\"><img fetchpriority=\"high\" decoding=\"async\" src=\"https:\/\/www.unimedia.tech\/wp-content\/uploads\/2023\/12\/image-1-19.png\" alt=\" clase\" wp-image-3282=\"\" width=\"766\" height=\"671\" style=\"border: solid 1px lightgray !important\"\/><\/figure>\n\n<p><\/p>\n\n<h4 class=\"wp-block-heading\">Configurar elementos de Stripe (lado del cliente)<\/h4>\n\n<p><\/p>\n\n<p><\/p>\n\n<p>Elements est\u00e1 disponible como parte de <a href=\"https:\/\/stripe.com\/docs\/stripe-js\">Stripe.js<\/a>. Incl\u00fayalo en su p\u00e1gina y cree un contenedor que se utilizar\u00e1 para el archivo <em><strong><code>paymentRequestButton<\/code> <\/strong><\/em>Elemento:<\/p>\n\n<p><\/p>\n\n<pre class=\"wp-block-code\"><code>&lt;script&nbsp;<em>src<\/em>=\"https:\/\/js.stripe.com\/v3\/\"&gt;&lt;\/script&gt;\n&lt;div&nbsp;<em>id<\/em>=\"payment-request-button\"&gt;\n  &lt;!-- A Stripe Element will be inserted here. --&gt;\n&lt;\/div&gt;<\/code><\/pre>\n\n<p><\/p>\n\n<p>Su <a href=\"https:\/\/stripe.com\/docs\/keys\">clave de API<\/a> publicable de Stripe tambi\u00e9n es necesaria, ya que identifica su sitio web para Stripe:<\/p>\n\n<pre class=\"wp-block-code\"><code>const stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx', {\n  apiVersion: \"2020-08-27\",\n});<\/code><\/pre>\n\n<p><\/p>\n\n<h4 class=\"wp-block-heading\">Crear una <em>paymentRequestInstance<\/em> (lado cliente)<\/h4>\n\n<p>En este paso, crearemos una instancia de <a href=\"https:\/\/stripe.com\/docs\/js#stripe-payment-request\"><code>stripe.paymentRequest<\/code><\/a> con todas las opciones necesarias, como &#8220;pa\u00eds&#8221;, &#8220;total&#8221;, &#8220;moneda&#8221;, etc.<\/p>\n\n<p>Esta instancia se utilizar\u00e1 para crear el bot\u00f3n de solicitud de pago<\/p>\n\n<pre class=\"wp-block-code\"><code>const paymentRequest = stripe.paymentRequest({\n  country: 'US',\n  currency: 'usd',\n  total: {\n    label: 'Demo total',\n    amount: 1099,\n  },\n  requestPayerName: true,\n  requestPayerEmail: true,\n});<\/code><\/pre>\n\n<p><\/p>\n\n<p><\/p>\n\n<h4 class=\"wp-block-heading\">Montar el <em>paymentRequestButton<\/em> (Lado Cliente)<\/h4>\n\n<p>En este paso, comprobaremos que <\/p>\n\n<pre class=\"wp-block-code\"><code>const elements = stripe.elements();\nconst prButton = elements.create('paymentRequestButton', {\n  paymentRequest,\n});\n\n(async () =&gt; {\n  \/\/ Check the availability of the Payment Request API first.\n  const result = await paymentRequest.canMakePayment();\n  if (result) {\n    prButton.mount('#payment-request-button');\n  } else {\n    document.getElementById('payment-request-button').style.display = 'none';\n  }\n})();<\/code><\/pre>\n\n<p><\/p>\n\n<h4 class=\"wp-block-heading\">Crear un <em>PaymentIntent<\/em> (lado servidor)<\/h4>\n\n<p><\/p>\n\n<p>En este paso, vamos a crear un PaymentIntent en su servidor con un importe y una moneda.<\/p>\n\n<p>Decida siempre cu\u00e1nto cobrar en el lado del servidor, un entorno de confianza, en contraposici\u00f3n al cliente. As\u00ed evitar\u00e1 que los clientes malintencionados puedan elegir sus propios precios.<\/p>\n\n<p><\/p>\n\n<p>El siguiente fragmento de c\u00f3digo es para <em><strong>node.js<\/strong><\/em>Puede utilizar otros <a href=\"https:\/\/stripe.com\/docs\/stripe-js\/elements\/payment-request-button#html-js-create-payment\" target=\"_blank\" rel=\"noreferrer noopener\">frameworks<\/a> tambi\u00e9n.<\/p>\n\n<p><\/p>\n\n<pre class=\"wp-block-code\"><code>\/\/ Set your secret key. Remember to switch to your live secret key in production!\n\/\/ See your keys here: https:\/\/dashboard.stripe.com\/account\/apikeys\nconst Stripe = require('stripe');\nconst stripe = Stripe('sk_test_4eC39HqLyjWDarjtT1zdp7dc');\n\nconst paymentIntent = await stripe.paymentIntents.create({\n  amount: 1099,\n  currency: 'usd',\n  \/\/ Verify your integration in this guide by including this parameter\n  metadata: {integration_check: 'accept_a_payment'},\n});<\/code><\/pre>\n\n<p><\/p>\n\n<p>En el PaymentIntent devuelto se incluye un <a href=\"https:\/\/stripe.com\/docs\/api\/payment_intents\/object#payment_intent_object-client_secret\">secreto de cliente<\/a>, que utilizar\u00e1 para completar de forma segura el proceso de pago en lugar de pasar el objeto PaymentIntent completo. Devuelve el secreto de cliente al cliente para que lo utilice en el siguiente paso.<\/p>\n\n<p><\/p>\n\n<p><\/p>\n\n<h4 class=\"wp-block-heading\">Completar el pago (lado cliente)<\/h4>\n\n<p><\/p>\n\n<p>En este paso, escucharemos el evento <code>paymentmethod<\/code> para recibir un objeto <a href=\"https:\/\/stripe.com\/docs\/api\/payment_methods\">PaymentMethod<\/a>.<\/p>\n\n<p>Que puede utilizarse para realizar acciones como &#8220;Mostrar error&#8221; o &#8220;Enviar notificaci\u00f3n por correo electr\u00f3nico&#8221;.<\/p>\n\n<p>M\u00e1s tarde, pase el ID del m\u00e9todo de pago y el secreto del cliente de PaymentIntent a <a href=\"https:\/\/stripe.com\/docs\/js#stripe-confirm-card-payment\">stripe.confirmCardPayment<\/a> para completar el pago.<\/p>\n\n<p><\/p>\n\n<pre class=\"wp-block-code\"><code>paymentRequest.on('paymentmethod', async (ev) =&gt; {\n  \/\/ Confirm the PaymentIntent without handling potential next actions (yet).\n  const {paymentIntent, error: confirmError} = await stripe.confirmCardPayment(\n    clientSecret,\n    {payment_method: ev.paymentMethod.id},\n    {handleActions: false}\n  );\n\n  if (confirmError) {\n    \/\/ Report to the browser that the payment failed, prompting it to\n    \/\/ re-show the payment interface, or show an error message and close\n    \/\/ the payment interface.\n    ev.complete('fail');\n  } else {\n    \/\/ Report to the browser that the confirmation was successful, prompting\n    \/\/ it to close the browser payment method collection interface.\n    ev.complete('success');\n    \/\/ Check if the PaymentIntent requires any actions and if so let Stripe.js\n    \/\/ handle the flow. If using an API version older than \"2019-02-11\" instead\n    \/\/ instead check for: `paymentIntent.status === \"requires_source_action\"`.\n    if (paymentIntent.status === \"requires_action\") {\n      \/\/ Let Stripe.js handle the rest of the payment flow.\n      const {error} = await stripe.confirmCardPayment(clientSecret);\n      if (error) {\n        \/\/ The payment failed -- ask your customer for a new payment method.\n      } else {\n        \/\/ The payment has succeeded.\n      }\n    } else {\n      \/\/ The payment has succeeded.\n    }\n  }\n});<\/code><\/pre>\n\n<p><\/p>\n\n<p><\/p>\n\n<p><\/p>\n\n<h4 class=\"wp-block-heading\">Estiliza el bot\u00f3n:<\/h4>\n\n<p>Los elementos Stripe te permiten cambiar el aspecto del elemento en funci\u00f3n de los colores y fuentes que elijas.<\/p>\n\n<p>Y para que esto suceda, puede pasar algunos par\u00e1metros predefinidos como &#8220;tipo&#8221;, &#8220;tema&#8221; y &#8220;altura&#8221; del bot\u00f3n.<\/p>\n\n<p><\/p>\n\n<p>Utilice los siguientes par\u00e1metros para personalizar el elemento:<\/p>\n\n<p><\/p>\n\n<pre class=\"wp-block-code\"><code>elements.create('paymentRequestButton', {\n  paymentRequest,\n  style: {\n    paymentRequestButton: {\n      type: 'default',\n      \/\/ One of 'default', 'book', 'buy', or 'donate'\n      \/\/ Defaults to 'default'\n\n      theme: 'dark',\n      \/\/ One of 'dark', 'light', or 'light-outline'\n      \/\/ Defaults to 'dark'\n\n      height: '64px',\n      \/\/ Defaults to '40px'. The width is always '100%'.\n    },\n  },\n});<\/code><\/pre>\n\n<p><\/p>\n\n<p>A continuaci\u00f3n se muestra la demo en ejecuci\u00f3n con c\u00f3digo para explorar y jugar.<\/p>\n\n<p><strong>Bol\u00edgrafo:<\/strong> <a href=\"https:\/\/codepen.io\/sarkazein7\/pen\/bGBoWvO\">https:\/\/codepen.io\/sarkazein7\/pen\/bGBoWvO<\/a><\/p>\n\n<figure class=\"wp-block-image size-large is-resized is-style-default\"><img decoding=\"async\" src=\"https:\/\/www.unimedia.tech\/wp-content\/uploads\/2023\/12\/Stripe-Payment-Request-Button-Styled-4.gif\" alt=\" clase\" wp-image-3268=\"\" width=\"820\" height=\"351\"\/><\/figure>\n\n<p><\/p>\n\n<p>Espero que haya disfrutado leyendo este art\u00edculo. No dude en compartir y a\u00f1adir sus valiosos comentarios.<\/p>\n\n<p>En <a href=\"https:\/\/www.unimedia.tech\/\">Unimedia <\/a>siempre estamos deseosos de conocer la opini\u00f3n de la gente.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Pago con Stripe utilizando Stripe Elements<\/p>\n","protected":false},"author":6,"featured_media":6609,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[224,220],"tags":[],"class_list":["post-7220","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-stripe-es","category-technical-guides-es"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v21.6 (Yoast SEO v27.1.1) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>P\u00e1gina de pago con elementos de Stripe - Unimedia Technology<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.unimedia.tech\/es\/stripe-checkout-page-using-stripe-elements\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"P\u00e1gina de pago con elementos de Stripe\" \/>\n<meta property=\"og:description\" content=\"Pago con Stripe utilizando Stripe Elements\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.unimedia.tech\/es\/stripe-checkout-page-using-stripe-elements\/\" \/>\n<meta property=\"og:site_name\" content=\"Unimedia Technology\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.linkedin.com\/company\/unimedia-technology\/\" \/>\n<meta property=\"article:published_time\" content=\"2021-03-07T16:41:35+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-01-10T17:20:09+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.unimedia.tech\/wp-content\/uploads\/2023\/12\/Stripe-checkout-page-using-Stripe-Elements-8.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1120\" \/>\n\t<meta property=\"og:image:height\" content=\"660\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Unimedia\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@UnimediaCTO\" \/>\n<meta name=\"twitter:site\" content=\"@UnimediaCTO\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Unimedia\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutos\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"P\u00e1gina de pago con elementos de Stripe - Unimedia Technology","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:\/\/www.unimedia.tech\/es\/stripe-checkout-page-using-stripe-elements\/","og_locale":"es_ES","og_type":"article","og_title":"P\u00e1gina de pago con elementos de Stripe","og_description":"Pago con Stripe utilizando Stripe Elements","og_url":"https:\/\/www.unimedia.tech\/es\/stripe-checkout-page-using-stripe-elements\/","og_site_name":"Unimedia Technology","article_publisher":"https:\/\/www.linkedin.com\/company\/unimedia-technology\/","article_published_time":"2021-03-07T16:41:35+00:00","article_modified_time":"2024-01-10T17:20:09+00:00","og_image":[{"width":1120,"height":660,"url":"https:\/\/www.unimedia.tech\/wp-content\/uploads\/2023\/12\/Stripe-checkout-page-using-Stripe-Elements-8.png","type":"image\/png"}],"author":"Unimedia","twitter_card":"summary_large_image","twitter_creator":"@UnimediaCTO","twitter_site":"@UnimediaCTO","twitter_misc":{"Escrito por":"Unimedia","Tiempo de lectura":"8 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.unimedia.tech\/es\/stripe-checkout-page-using-stripe-elements\/#article","isPartOf":{"@id":"https:\/\/www.unimedia.tech\/es\/stripe-checkout-page-using-stripe-elements\/"},"author":{"name":"Unimedia","@id":"https:\/\/www.unimedia.tech\/es\/#\/schema\/person\/3a250aa22526d5c9ff6bc95bb380a5dd"},"headline":"P\u00e1gina de pago con elementos de Stripe","datePublished":"2021-03-07T16:41:35+00:00","dateModified":"2024-01-10T17:20:09+00:00","mainEntityOfPage":{"@id":"https:\/\/www.unimedia.tech\/es\/stripe-checkout-page-using-stripe-elements\/"},"wordCount":1022,"commentCount":0,"publisher":{"@id":"https:\/\/www.unimedia.tech\/es\/#organization"},"image":{"@id":"https:\/\/www.unimedia.tech\/es\/stripe-checkout-page-using-stripe-elements\/#primaryimage"},"thumbnailUrl":"https:\/\/www.unimedia.tech\/wp-content\/uploads\/2023\/12\/Stripe-checkout-page-using-Stripe-Elements-8.png","articleSection":["Stripe","Technical Guides"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.unimedia.tech\/es\/stripe-checkout-page-using-stripe-elements\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.unimedia.tech\/es\/stripe-checkout-page-using-stripe-elements\/","url":"https:\/\/www.unimedia.tech\/es\/stripe-checkout-page-using-stripe-elements\/","name":"P\u00e1gina de pago con elementos de Stripe - Unimedia Technology","isPartOf":{"@id":"https:\/\/www.unimedia.tech\/es\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.unimedia.tech\/es\/stripe-checkout-page-using-stripe-elements\/#primaryimage"},"image":{"@id":"https:\/\/www.unimedia.tech\/es\/stripe-checkout-page-using-stripe-elements\/#primaryimage"},"thumbnailUrl":"https:\/\/www.unimedia.tech\/wp-content\/uploads\/2023\/12\/Stripe-checkout-page-using-Stripe-Elements-8.png","datePublished":"2021-03-07T16:41:35+00:00","dateModified":"2024-01-10T17:20:09+00:00","breadcrumb":{"@id":"https:\/\/www.unimedia.tech\/es\/stripe-checkout-page-using-stripe-elements\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.unimedia.tech\/es\/stripe-checkout-page-using-stripe-elements\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.unimedia.tech\/es\/stripe-checkout-page-using-stripe-elements\/#primaryimage","url":"https:\/\/www.unimedia.tech\/wp-content\/uploads\/2023\/12\/Stripe-checkout-page-using-Stripe-Elements-8.png","contentUrl":"https:\/\/www.unimedia.tech\/wp-content\/uploads\/2023\/12\/Stripe-checkout-page-using-Stripe-Elements-8.png","width":1120,"height":660,"caption":"Stripe checkout page using Stripe Elements"},{"@type":"BreadcrumbList","@id":"https:\/\/www.unimedia.tech\/es\/stripe-checkout-page-using-stripe-elements\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.unimedia.tech\/es\/"},{"@type":"ListItem","position":2,"name":"P\u00e1gina de pago con elementos de Stripe"}]},{"@type":"WebSite","@id":"https:\/\/www.unimedia.tech\/es\/#website","url":"https:\/\/www.unimedia.tech\/es\/","name":"Unimedia Technology","description":"Your software development partner","publisher":{"@id":"https:\/\/www.unimedia.tech\/es\/#organization"},"alternateName":"Unimedia Tech","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.unimedia.tech\/es\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/www.unimedia.tech\/es\/#organization","name":"Unimedia Technology","alternateName":"Unimedia Tech","url":"https:\/\/www.unimedia.tech\/es\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.unimedia.tech\/es\/#\/schema\/logo\/image\/","url":"https:\/\/www.unimedia.tech\/wp-content\/uploads\/2023\/12\/cloud_border-3.png","contentUrl":"https:\/\/www.unimedia.tech\/wp-content\/uploads\/2023\/12\/cloud_border-3.png","width":403,"height":309,"caption":"Unimedia Technology"},"image":{"@id":"https:\/\/www.unimedia.tech\/es\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.linkedin.com\/company\/unimedia-technology\/","https:\/\/x.com\/UnimediaCTO","https:\/\/www.instagram.com\/unimedia.technology\/"]},{"@type":"Person","@id":"https:\/\/www.unimedia.tech\/es\/#\/schema\/person\/3a250aa22526d5c9ff6bc95bb380a5dd","name":"Unimedia","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.unimedia.tech\/es\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/5901fd1c4628e2b48ffd4e47324e8fe0751b39e556a167f078471d4c4bec0f6f?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/5901fd1c4628e2b48ffd4e47324e8fe0751b39e556a167f078471d4c4bec0f6f?s=96&d=mm&r=g","caption":"Unimedia"}}]}},"_links":{"self":[{"href":"https:\/\/www.unimedia.tech\/es\/wp-json\/wp\/v2\/posts\/7220","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.unimedia.tech\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.unimedia.tech\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.unimedia.tech\/es\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/www.unimedia.tech\/es\/wp-json\/wp\/v2\/comments?post=7220"}],"version-history":[{"count":0,"href":"https:\/\/www.unimedia.tech\/es\/wp-json\/wp\/v2\/posts\/7220\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.unimedia.tech\/es\/wp-json\/wp\/v2\/media\/6609"}],"wp:attachment":[{"href":"https:\/\/www.unimedia.tech\/es\/wp-json\/wp\/v2\/media?parent=7220"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.unimedia.tech\/es\/wp-json\/wp\/v2\/categories?post=7220"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.unimedia.tech\/es\/wp-json\/wp\/v2\/tags?post=7220"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}