{"id":7164,"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:28:55","modified_gmt":"2024-01-10T17:28:55","slug":"stripe-checkout-page-using-stripe-elements","status":"publish","type":"post","link":"https:\/\/www.unimedia.tech\/ca\/stripe-checkout-page-using-stripe-elements\/","title":{"rendered":"P\u00e0gina de pagament de Stripe amb Stripe Elements"},"content":{"rendered":"\n<p><\/p>\n\n<p>En aquest article, parlarem de com <a href=\"https:\/\/www.unimedia.tech\/dedicated-development-teams\/\">implementar<\/a> una p\u00e0gina de pagament amb stripe utilitzant Stripe Elements en lloc de Stripe Checkout. Quan utilitzar-los, com utilitzar-los i quins casos d&#8217;\u00fas s\u00f3n adequats per a diferents <a href=\"https:\/\/www.unimedia.tech\/software-development\/\">requisits<\/a> .<\/p>\n\n<p>Aquest article cont\u00e9, Codi amb demostracions, de manera que, es fa m\u00e9s f\u00e0cil d&#8217;aprendre i implementar al mateix temps.<\/p>\n\n<p><\/p>\n\n<h2 class=\"wp-block-heading\">Qu\u00e8 \u00e9s Stripe?<\/h2>\n\n<p><\/p>\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>Milions d&#8217;empreses de totes les mides, des de startups fins a grans empreses, utilitzen el software i les API de Stripe per acceptar pagaments, enviar pagaments i gestionar els seus negocis en l\u00ednia.<\/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> \u00e9s un conjunt de components d&#8217;IU preconstru\u00efts, com ara entrades i botons, per crear el vostre flux de pagament.<\/p>\n\n<p>Est\u00e0 disponible com a caracter\u00edstica de Stripe.js. Per tant, tokenitza la informaci\u00f3 confidencial dins d&#8217;un element sense que mai toqui el vostre servidor, cosa que el fa encara m\u00e9s segur.<\/p>\n\n<p>Stripe Elements inclou les caracter\u00edstiques que es detallen a continuaci\u00f3:<\/p>\n\n<ul class=\"wp-block-list\"><li>Formateja la informaci\u00f3 de la targeta autom\u00e0ticament a mesura que s&#8217;introdueix<\/li><li>Tradueix marcadors de posici\u00f3 a l&#8217;idioma preferit del vostre client<\/li><li>Utilitza un disseny responsiu per adaptar-se a l&#8217;amplada de la pantalla o del dispositiu m\u00f2bil del vostre client<\/li><li>Personalitza l&#8217;estil perqu\u00e8 coincideixi amb l&#8217;aspecte i la sensaci\u00f3 del vostre flux de pagament<\/li><\/ul>\n\n<p><\/p>\n\n<p><\/p>\n\n<p><\/p>\n\n<h2 class=\"wp-block-heading\">Per crear formularis de pagament personalitzats:<\/h2>\n\n<p>Per crear formularis de pagament personalitzats, la ruta d&#8217;integraci\u00f3 principal a trav\u00e9s de Stripe.js \u00e9s amb Stripe Elements, que us permet recollir informaci\u00f3 de pagament sensible mitjan\u00e7ant components d&#8217;IU personalitzables.  <\/p>\n\n<p><\/p>\n\n<p>Stripe.js tamb\u00e9 ofereix una interf\u00edcie \u00fanica per a <a href=\"https:\/\/stripe.com\/docs\/apple-pay\">Apple Pay<\/a> , <a href=\"https:\/\/stripe.com\/docs\/google-pay\">Google Pay<\/a> i l&#8217; <a href=\"https:\/\/stripe.com\/docs\/payment-request-api\">API de sol\u00b7licitud de pagament<\/a> .<\/p>\n\n<p><\/p>\n\n<p><\/p>\n\n<h3 class=\"wp-block-heading\" id=\"card-element\">1. Element de targeta<\/h3>\n\n<p>L&#8217;element de la targeta us permet recollir informaci\u00f3 de la targeta dins d&#8217;un mateix element. Inclou una icona de marca de targeta que s&#8217;actualitza din\u00e0micament, aix\u00ed com entrades per al n\u00famero, caducitat, CVC i codi postal.  <\/p>\n\n<p>Comenceu a <a href=\"https:\/\/stripe.com\/docs\/payments\/accept-a-payment#web\">acceptar un pagament<\/a> .<\/p>\n\n<p>Es recomana utilitzar Stripe.js per seguir complint amb PCI assegurant-vos que els detalls de la targeta s&#8217;envi\u00efn directament a Stripe sense colpejar el vostre servidor per fer-lo m\u00e9s segur.  <\/p>\n\n<p>Per seguir complint, carregueu sempre Stripe.js des de js.stripe.com. Es recomana no incloure l&#8217;script en un paquet ni allotjar-lo per tu mateix.<\/p>\n\n<p>A continuaci\u00f3 es mostra la demostraci\u00f3 en execuci\u00f3 amb codi per explorar i jugar.<\/p>\n\n<p><strong>Bol\u00edgraf<\/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\">Element de la targeta de configuraci\u00f3 (costat del client)<\/h4>\n\n<p><\/p>\n\n<p><\/p>\n\n<p>Elements est\u00e0 disponible com a part de <a href=\"https:\/\/stripe.com\/docs\/stripe-js\">Stripe.js<\/a> . Per tant, incloeu-ho a la vostra p\u00e0gina i creeu un contenidor perqu\u00e8 es pugui utilitzar per a<code>card <\/code> Element:<\/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>La vostra <a href=\"https:\/\/stripe.com\/docs\/keys\">clau d&#8217;API<\/a> publicable de Stripe tamb\u00e9 \u00e9s necess\u00e0ria, ja que identifica el vostre lloc web amb 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 un element de targeta amb estil<\/h4>\n\n<p>Aqu\u00ed, inicialment, estem creant la refer\u00e8ncia a l&#8217;API Stripe, de manera que puguem utilitzar-la per accedir a l&#8217;API Stripe.<\/p>\n\n<p>Despr\u00e9s d&#8217;aix\u00f2, creem la refer\u00e8ncia d&#8217;elements Stripe i emmagatzemats a l&#8217;interior<code>elements<\/code> variable, amb aix\u00f2 crearem la inst\u00e0ncia de Stripe Card Element.<\/p>\n\n<p>I, finalment, hem creat l&#8217;element de la targeta, on hem passat, l&#8217;identificador de l&#8217;element i l&#8217;estil per personalitzar l&#8217;aspecte i la sensaci\u00f3 de l&#8217;element.<\/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. Element del bot\u00f3 de sol\u00b7licitud de pagament<\/h3>\n\n<p><\/p>\n\n<p>El bot\u00f3 de sol\u00b7licitud de pagament permet als vostres clients pagar amb <a href=\"https:\/\/stripe.com\/docs\/apple-pay\">Apple Pay<\/a> , <a href=\"https:\/\/stripe.com\/docs\/google-pay\">Google Pay<\/a> , targetes desades de Chrome i <a href=\"https:\/\/stripe.com\/docs\/microsoft-pay\">Microsoft Pay<\/a> .  <\/p>\n\n<p>A continuaci\u00f3 es mostra la demostraci\u00f3 en execuci\u00f3 amb codi per explorar i jugar.<\/p>\n\n<p>Bol\u00edgraf: <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=\"  classe=\" 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=\"  classe=\" 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 Stripe Elements (costat del client)<\/h4>\n\n<p><\/p>\n\n<p><\/p>\n\n<p>Elements est\u00e0 disponible com a part de <a href=\"https:\/\/stripe.com\/docs\/stripe-js\">Stripe.js<\/a> . Incloeu-ho a la vostra p\u00e0gina i creeu un contenidor que s&#8217;utilitzar\u00e0 per a  <em><strong><code>paymentRequestButton<\/code> <\/strong><\/em>Element:<\/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>La vostra <a href=\"https:\/\/stripe.com\/docs\/keys\">clau d&#8217;API<\/a> publicable de Stripe tamb\u00e9 \u00e9s necess\u00e0ria, ja que identifica el vostre lloc web amb 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>inst\u00e0ncia de sol\u00b7licitud de pagament<\/em> (costat del client)<\/h4>\n\n<p>En aquest pas, crearem una inst\u00e0ncia de<code>stripe.paymentRequest<\/code> amb totes les opcions necess\u00e0ries, com ara &#8220;pa\u00eds&#8221;, &#8220;total&#8221;, &#8220;moneda&#8221;, etc.<\/p>\n\n<p>Aquesta inst\u00e0ncia s&#8217;utilitzar\u00e0 per crear el bot\u00f3 de sol\u00b7licitud de pagament<\/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\">Muntar el <em>bot\u00f3 de sol\u00b7licitud de pagament<\/em> (costat del client)<\/h4>\n\n<p>En aquest pas, comprovarem 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> (costat del servidor)<\/h4>\n\n<p><\/p>\n\n<p>En aquest pas, crearem un PaymentIntent al vostre servidor amb una quantitat i una moneda.<\/p>\n\n<p>Decidiu sempre quant cobrar al costat del servidor, un entorn de confian\u00e7a, a difer\u00e8ncia del client. Perqu\u00e8 pugueu evitar que els clients maliciosos puguin triar els seus propis preus.<\/p>\n\n<p><\/p>\n\n<p>El fragment de codi seg\u00fcent \u00e9s per a <em><strong>node.js<\/strong><\/em> , tamb\u00e9 podeu utilitzar altres <a href=\"https:\/\/stripe.com\/docs\/stripe-js\/elements\/payment-request-button#html-js-create-payment\" target=\"_blank\" rel=\"noreferrer noopener\">marcs<\/a> .<\/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>Al PaymentIntent retornat s&#8217;inclou un <a href=\"https:\/\/stripe.com\/docs\/api\/payment_intents\/object#payment_intent_object-client_secret\">secret de client<\/a> , que utilitzareu per completar de manera segura el proc\u00e9s de pagament en lloc de passar tot l&#8217;objecte PaymentIntent. Torna a enviar el secret del client al client per utilitzar-lo al pas seg\u00fcent.<\/p>\n\n<p><\/p>\n\n<p><\/p>\n\n<h4 class=\"wp-block-heading\">Completar el pagament (costat del client)<\/h4>\n\n<p><\/p>\n\n<p>En aquest pas, escoltarem el<code>paymentmethod<\/code> esdeveniment per rebre un objecte <a href=\"https:\/\/stripe.com\/docs\/api\/payment_methods\">PaymentMethod<\/a> .<\/p>\n\n<p>Que es pot utilitzar per realitzar accions com &#8220;Mostrar error&#8221; o &#8220;Enviar una notificaci\u00f3 per correu electr\u00f2nic&#8221;.<\/p>\n\n<p>M\u00e9s tard, envieu l&#8217;identificador de PaymentMethod i el secret de client de PaymentIntent a <a href=\"https:\/\/stripe.com\/docs\/js#stripe-confirm-card-payment\">stripe.confirmCardPayment<\/a> per completar el pagament.<\/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\">Donar estil al bot\u00f3:<\/h4>\n\n<p>Els Stripe Elements us permet canviar l&#8217;aspecte i la sensaci\u00f3 de l&#8217;element en funci\u00f3 de la vostra elecci\u00f3 de colors i tipus de lletra.<\/p>\n\n<p>I perqu\u00e8 aix\u00f2 passi, podeu passar alguns par\u00e0metres predefinits com ara &#8220;tipus&#8221;, &#8220;tema&#8221; i &#8220;al\u00e7ada&#8221; del bot\u00f3.<\/p>\n\n<p><\/p>\n\n<p>Utilitzeu els par\u00e0metres seg\u00fcents per personalitzar l&#8217;element:<\/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\u00f3 es mostra la demostraci\u00f3 en execuci\u00f3 amb codi per explorar i jugar.<\/p>\n\n<p><strong>Bol\u00edgraf<\/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=\"  classe=\" wp-image-3268=\"\" width=\"820\" height=\"351\"\/><\/figure>\n\n<p><\/p>\n\n<p>Espero que hagueu gaudit llegint aquest article. No dubteu a compartir i afegir els vostres valuosos comentaris.<\/p>\n\n<p>A <a href=\"https:\/\/www.unimedia.tech\/\">Unimedia<\/a> sempre tenim ganes d&#8217;escoltar noves opinions.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Pagament amb Stripe mitjan\u00e7ant Stripe Elements<\/p>\n","protected":false},"author":6,"featured_media":6607,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[222,218],"tags":[],"class_list":["post-7164","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-stripe-ca","category-technical-guides-ca"],"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\u00e0gina de pagament de Stripe amb Stripe Elements - 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\/ca\/stripe-checkout-page-using-stripe-elements\/\" \/>\n<meta property=\"og:locale\" content=\"ca_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"P\u00e0gina de pagament de Stripe amb Stripe Elements\" \/>\n<meta property=\"og:description\" content=\"Pagament amb Stripe mitjan\u00e7ant Stripe Elements\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.unimedia.tech\/ca\/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:28:55+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=\"Escrit per\" \/>\n\t<meta name=\"twitter:data1\" content=\"Unimedia\" \/>\n\t<meta name=\"twitter:label2\" content=\"Temps estimat de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minuts\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"P\u00e0gina de pagament de Stripe amb Stripe Elements - 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\/ca\/stripe-checkout-page-using-stripe-elements\/","og_locale":"ca_ES","og_type":"article","og_title":"P\u00e0gina de pagament de Stripe amb Stripe Elements","og_description":"Pagament amb Stripe mitjan\u00e7ant Stripe Elements","og_url":"https:\/\/www.unimedia.tech\/ca\/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:28:55+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":{"Escrit per":"Unimedia","Temps estimat de lectura":"7 minuts"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.unimedia.tech\/ca\/stripe-checkout-page-using-stripe-elements\/#article","isPartOf":{"@id":"https:\/\/www.unimedia.tech\/ca\/stripe-checkout-page-using-stripe-elements\/"},"author":{"name":"Unimedia","@id":"https:\/\/www.unimedia.tech\/ca\/#\/schema\/person\/3a250aa22526d5c9ff6bc95bb380a5dd"},"headline":"P\u00e0gina de pagament de Stripe amb Stripe Elements","datePublished":"2021-03-07T16:41:35+00:00","dateModified":"2024-01-10T17:28:55+00:00","mainEntityOfPage":{"@id":"https:\/\/www.unimedia.tech\/ca\/stripe-checkout-page-using-stripe-elements\/"},"wordCount":1022,"commentCount":0,"publisher":{"@id":"https:\/\/www.unimedia.tech\/ca\/#organization"},"image":{"@id":"https:\/\/www.unimedia.tech\/ca\/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":"ca","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.unimedia.tech\/ca\/stripe-checkout-page-using-stripe-elements\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.unimedia.tech\/ca\/stripe-checkout-page-using-stripe-elements\/","url":"https:\/\/www.unimedia.tech\/ca\/stripe-checkout-page-using-stripe-elements\/","name":"P\u00e0gina de pagament de Stripe amb Stripe Elements - Unimedia Technology","isPartOf":{"@id":"https:\/\/www.unimedia.tech\/ca\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.unimedia.tech\/ca\/stripe-checkout-page-using-stripe-elements\/#primaryimage"},"image":{"@id":"https:\/\/www.unimedia.tech\/ca\/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:28:55+00:00","breadcrumb":{"@id":"https:\/\/www.unimedia.tech\/ca\/stripe-checkout-page-using-stripe-elements\/#breadcrumb"},"inLanguage":"ca","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.unimedia.tech\/ca\/stripe-checkout-page-using-stripe-elements\/"]}]},{"@type":"ImageObject","inLanguage":"ca","@id":"https:\/\/www.unimedia.tech\/ca\/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\/ca\/stripe-checkout-page-using-stripe-elements\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.unimedia.tech\/ca\/"},{"@type":"ListItem","position":2,"name":"P\u00e0gina de pagament de Stripe amb Stripe Elements"}]},{"@type":"WebSite","@id":"https:\/\/www.unimedia.tech\/ca\/#website","url":"https:\/\/www.unimedia.tech\/ca\/","name":"Unimedia Technology","description":"Your software development partner","publisher":{"@id":"https:\/\/www.unimedia.tech\/ca\/#organization"},"alternateName":"Unimedia Tech","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.unimedia.tech\/ca\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"ca"},{"@type":"Organization","@id":"https:\/\/www.unimedia.tech\/ca\/#organization","name":"Unimedia Technology","alternateName":"Unimedia Tech","url":"https:\/\/www.unimedia.tech\/ca\/","logo":{"@type":"ImageObject","inLanguage":"ca","@id":"https:\/\/www.unimedia.tech\/ca\/#\/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\/ca\/#\/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\/ca\/#\/schema\/person\/3a250aa22526d5c9ff6bc95bb380a5dd","name":"Unimedia","image":{"@type":"ImageObject","inLanguage":"ca","@id":"https:\/\/www.unimedia.tech\/ca\/#\/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\/ca\/wp-json\/wp\/v2\/posts\/7164","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.unimedia.tech\/ca\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.unimedia.tech\/ca\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.unimedia.tech\/ca\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/www.unimedia.tech\/ca\/wp-json\/wp\/v2\/comments?post=7164"}],"version-history":[{"count":0,"href":"https:\/\/www.unimedia.tech\/ca\/wp-json\/wp\/v2\/posts\/7164\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.unimedia.tech\/ca\/wp-json\/wp\/v2\/media\/6607"}],"wp:attachment":[{"href":"https:\/\/www.unimedia.tech\/ca\/wp-json\/wp\/v2\/media?parent=7164"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.unimedia.tech\/ca\/wp-json\/wp\/v2\/categories?post=7164"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.unimedia.tech\/ca\/wp-json\/wp\/v2\/tags?post=7164"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}