{"id":7297,"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":"2023-12-18T13:07:39","modified_gmt":"2023-12-18T12:07:39","slug":"stripe-checkout-page-using-stripe-elements","status":"publish","type":"post","link":"https:\/\/www.unimedia.tech\/de\/stripe-checkout-page-using-stripe-elements\/","title":{"rendered":"Stripe checkout page using Stripe Elements"},"content":{"rendered":"\n<p><\/p>\n\n\n\n<p>In this article, We are going to discuss about how to <a href=\"https:\/\/www.unimedia.tech\/de\/engagierte-entwicklungsteams\/\">implement <\/a>a stripe checkout page using Stripe Elements instead of Stripe Checkout. When to use them, How to use them &amp; Which use cases are suitable for different <a href=\"https:\/\/www.unimedia.tech\/de\/bespoke-software-development\/\">requirements<\/a>.<\/p>\n\n\n\n<p>This article contains, Code with demos, So that, It becomes easier to learn and implement at the same time.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">What is Stripe?<\/h2>\n\n\n\n<p><\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>Millions of businesses of all sizes\u2014from startups to large enterprises\u2014use Stripe\u2019s software and APIs to accept payments, send payouts, and manage their businesses online.<\/p><cite>https:\/\/stripe.com<\/cite><\/blockquote>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Stripe Elements:<\/h2>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><a href=\"https:\/\/stripe.com\/payments\/elements\">Stripe Elements<\/a>&nbsp;is a set of prebuilt UI components, like inputs and buttons, for building your checkout flow.<\/p>\n\n\n\n<p>It is available as a feature of Stripe.js. So, It tokenizes the sensitive information within an Element without ever having it touch your server, Which makes it even more secure.<\/p>\n\n\n\n<p>Stripe Elements includes features as given below:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Formatting card information automatically as it\u2019s entered<\/li><li>Translating placeholders into your customer\u2019s preferred language<\/li><li>Using responsive design to fit the width of your customer\u2019s screen or mobile device<\/li><li>Customizing the styling to match the look and feel of your checkout flow<\/li><\/ul>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">To build custom payment forms:<\/h2>\n\n\n\n<p>In order to build custom payment forms, The primary integration path through Stripe.js is with Stripe Elements, which enables&nbsp;you to collect sensitive payment information using customizable UI components.&nbsp;<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>Stripe.js also provides a single interface for&nbsp;<a href=\"https:\/\/stripe.com\/docs\/apple-pay\">Apple Pay<\/a>,&nbsp;<a href=\"https:\/\/stripe.com\/docs\/google-pay\">Google Pay<\/a>, and the&nbsp;<a href=\"https:\/\/stripe.com\/docs\/payment-request-api\">Payment Request API<\/a>.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"card-element\">1. Card Element<\/h3>\n\n\n\n<p>The Card Element lets you collect card information all within one Element.&nbsp;It includes a dynamically-updating card brand icon as well as inputs for&nbsp;number, expiry, CVC, and postal code, <\/p>\n\n\n\n<p>Get started with&nbsp;<a href=\"https:\/\/stripe.com\/docs\/payments\/accept-a-payment#web\">accepting a payment<\/a>.<\/p>\n\n\n\n<p>It is advised to use Stripe.js to remain PCI compliant by ensuring that card details are sent directly to Stripe without hitting your server to make it more secured. <\/p>\n\n\n\n<p>To remain compliant, Always load Stripe.js from js.stripe.com. It is advised not to include the script in a bundle or to host it by yourself.<\/p>\n\n\n\n<p>Following is the running demo with code to explore and play with.<\/p>\n\n\n\n<p><strong>Pen<\/strong>: <a href=\"https:\/\/codepen.io\/sarkazein7\/pen\/rNWJvXd\">https:\/\/codepen.io\/sarkazein7\/pen\/rNWJvXd<\/a><\/p>\n\n\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\n\n<h4 class=\"wp-block-heading\">Setup Card Element (Client Side)<\/h4>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>Elements is available as part of&nbsp;<a href=\"https:\/\/stripe.com\/docs\/stripe-js\">Stripe.js<\/a>. So, Include this in your page and create a container so that it can be used for the&nbsp;<code>card <\/code>Element:<\/p>\n\n\n\n<p><\/p>\n\n\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\n\n<p><\/p>\n\n\n\n<p>Your Stripe publishable&nbsp;<a href=\"https:\/\/stripe.com\/docs\/keys\">API key<\/a>&nbsp;is also required as it identifies your website to Stripe:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx', {\n  apiVersion: \"2020-08-27\",\n});<\/code><\/pre>\n\n\n\n<p><\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Create Styled Card Element<\/h4>\n\n\n\n<p>Here, Initially, We are creating the reference to stripe API, So that We can use it to access the Stripe API.<\/p>\n\n\n\n<p>After that, We created the reference of stripe elements and stored in inside <code>elements<\/code> variable, By using that we will create the instance of Stripe Card Element.<\/p>\n\n\n\n<p>And Finally, We have created the card element, where we have passed, id of the element &amp; style to customize the look and feel of the element.<\/p>\n\n\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\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"payment-request-button-element\">2. Payment Request Button Element<\/h3>\n\n\n\n<p><\/p>\n\n\n\n<p>The Payment Request Button lets your customers check out with&nbsp;<a href=\"https:\/\/stripe.com\/docs\/apple-pay\">Apple Pay<\/a>,&nbsp;<a href=\"https:\/\/stripe.com\/docs\/google-pay\">Google Pay<\/a>, Chrome saved&nbsp;cards, and&nbsp;<a href=\"https:\/\/stripe.com\/docs\/microsoft-pay\">Microsoft Pay<\/a>. <\/p>\n\n\n\n<p>Following below is the running demo with code to explore and play with.<\/p>\n\n\n\n<p>Pen: <a href=\"https:\/\/codepen.io\/sarkazein7\/pen\/WNoZpzd\">https:\/\/codepen.io\/sarkazein7\/pen\/WNoZpzd<\/a><\/p>\n\n\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=\" class=\"wp-image-3273\" style=\"border: solid 1px lightgray !important\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\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=\" class=\"wp-image-3282\" width=\"766\" height=\"671\" style=\"border: solid 1px lightgray !important\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Setup Stripe Elements (Client Side)<\/h4>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>Elements is available as part of&nbsp;<a href=\"https:\/\/stripe.com\/docs\/stripe-js\">Stripe.js<\/a>. Include this in your page and create a container that will be used for the&nbsp;<em><strong><code>paymentRequestButton<\/code>&nbsp;<\/strong><\/em>Element:<\/p>\n\n\n\n<p><\/p>\n\n\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\n\n<p><\/p>\n\n\n\n<p>Your Stripe publishable&nbsp;<a href=\"https:\/\/stripe.com\/docs\/keys\">API key<\/a>&nbsp;is also required as it identifies your website to Stripe:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx', {\n  apiVersion: \"2020-08-27\",\n});<\/code><\/pre>\n\n\n\n<p><\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Create a <em>paymentRequestInstance<\/em> (Client Side)<\/h4>\n\n\n\n<p>In this step, We will create an instance of&nbsp;<a href=\"https:\/\/stripe.com\/docs\/js#stripe-payment-request\"><code>stripe.paymentRequest<\/code><\/a>&nbsp;with all required options, such as &#8220;country&#8221;, &#8220;total&#8221;, &#8220;currency&#8221; and etc.<\/p>\n\n\n\n<p>This instance will be used to create the Payment Request Button<\/p>\n\n\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\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Mount the <em>paymentRequestButton<\/em> (Client Side)<\/h4>\n\n\n\n<p>In this step, We will check, that <\/p>\n\n\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\n\n<p><\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Create a <em>PaymentIntent<\/em> (Server Side)<\/h4>\n\n\n\n<p><\/p>\n\n\n\n<p>In this step, We are going to Create a PaymentIntent on your server with an amount and currency.<\/p>\n\n\n\n<p>Always decide how much to charge on the server side, a trusted environment, as opposed to the client. So that you can prevent malicious customers from being able to choose their own prices.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>Following Code snippet is for <em><strong>node.js<\/strong><\/em>, You can use other <a href=\"https:\/\/stripe.com\/docs\/stripe-js\/elements\/payment-request-button#html-js-create-payment\" target=\"_blank\" rel=\"noreferrer noopener\">frameworks<\/a> as well.<\/p>\n\n\n\n<p><\/p>\n\n\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\n\n<p><\/p>\n\n\n\n<p>Included in the returned PaymentIntent is a&nbsp;<a href=\"https:\/\/stripe.com\/docs\/api\/payment_intents\/object#payment_intent_object-client_secret\">client secret<\/a>, which you\u2019ll use to securely complete the payment process instead of passing the entire PaymentIntent object.  Send the client secret back to the client to use in the next step.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Complete the payment (Client Side)<\/h4>\n\n\n\n<p><\/p>\n\n\n\n<p>In this step, We will listen to the&nbsp;<code>paymentmethod<\/code>&nbsp;event to receive a&nbsp;<a href=\"https:\/\/stripe.com\/docs\/api\/payment_methods\">PaymentMethod<\/a>&nbsp;object.<\/p>\n\n\n\n<p>Which can be used to perform the actions such as &#8220;Showing Error&#8221; or &#8220;Sending Email Notification&#8221;.<\/p>\n\n\n\n<p>Later, Pass the PaymentMethod ID and the PaymentIntent\u2019s client secret to&nbsp;<a href=\"https:\/\/stripe.com\/docs\/js#stripe-confirm-card-payment\">stripe.confirmCardPayment<\/a>&nbsp;to complete the payment.<\/p>\n\n\n\n<p><\/p>\n\n\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\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Style the Button:<\/h4>\n\n\n\n<p>Stripe elements let you to change the look and feel of the element based on your choice of colors and fonts.<\/p>\n\n\n\n<p>And to make that happen, You can pass few predefined parameters such as &#8220;type&#8221;,  &#8220;theme&#8221; and &#8220;height&#8221; of the button.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>Use the following parameters to customize the Element:<\/p>\n\n\n\n<p><\/p>\n\n\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\n\n<p><\/p>\n\n\n\n<p>Following is the running demo with code to explore and play with.<\/p>\n\n\n\n<p><strong>Pen<\/strong>: <a href=\"https:\/\/codepen.io\/sarkazein7\/pen\/bGBoWvO\">https:\/\/codepen.io\/sarkazein7\/pen\/bGBoWvO<\/a><\/p>\n\n\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=\" class=\"wp-image-3268\" width=\"820\" height=\"351\"\/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>I hope that you have enjoyed reading this article. Feel free to share and add your valuable comments.<\/p>\n\n\n\n<p>We at <a href=\"https:\/\/www.unimedia.tech\/de\/\">Unimedia <\/a>are always eager to hear the opinions from people.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Stripe checkout using Stripe Elements<\/p>\n","protected":false},"author":6,"featured_media":6608,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[223,219],"tags":[],"class_list":["post-7297","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-stripe-de","category-technical-guides-de"],"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>Stripe checkout page using 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\/de\/stripe-checkout-page-using-stripe-elements\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Stripe checkout page using Stripe Elements\" \/>\n<meta property=\"og:description\" content=\"Stripe checkout using Stripe Elements\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.unimedia.tech\/de\/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=\"2023-12-18T12:07:39+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=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"Unimedia\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"3\u00a0Minuten\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Stripe checkout page using 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\/de\/stripe-checkout-page-using-stripe-elements\/","og_locale":"de_DE","og_type":"article","og_title":"Stripe checkout page using Stripe Elements","og_description":"Stripe checkout using Stripe Elements","og_url":"https:\/\/www.unimedia.tech\/de\/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":"2023-12-18T12:07:39+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":{"Verfasst von":"Unimedia","Gesch\u00e4tzte Lesezeit":"3\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.unimedia.tech\/de\/stripe-checkout-page-using-stripe-elements\/#article","isPartOf":{"@id":"https:\/\/www.unimedia.tech\/de\/stripe-checkout-page-using-stripe-elements\/"},"author":{"name":"Unimedia","@id":"https:\/\/www.unimedia.tech\/de\/#\/schema\/person\/3a250aa22526d5c9ff6bc95bb380a5dd"},"headline":"Stripe checkout page using Stripe Elements","datePublished":"2021-03-07T16:41:35+00:00","dateModified":"2023-12-18T12:07:39+00:00","mainEntityOfPage":{"@id":"https:\/\/www.unimedia.tech\/de\/stripe-checkout-page-using-stripe-elements\/"},"wordCount":553,"publisher":{"@id":"https:\/\/www.unimedia.tech\/de\/#organization"},"image":{"@id":"https:\/\/www.unimedia.tech\/de\/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":"de"},{"@type":"WebPage","@id":"https:\/\/www.unimedia.tech\/de\/stripe-checkout-page-using-stripe-elements\/","url":"https:\/\/www.unimedia.tech\/de\/stripe-checkout-page-using-stripe-elements\/","name":"Stripe checkout page using Stripe Elements - Unimedia Technology","isPartOf":{"@id":"https:\/\/www.unimedia.tech\/de\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.unimedia.tech\/de\/stripe-checkout-page-using-stripe-elements\/#primaryimage"},"image":{"@id":"https:\/\/www.unimedia.tech\/de\/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":"2023-12-18T12:07:39+00:00","breadcrumb":{"@id":"https:\/\/www.unimedia.tech\/de\/stripe-checkout-page-using-stripe-elements\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.unimedia.tech\/de\/stripe-checkout-page-using-stripe-elements\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/www.unimedia.tech\/de\/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\/de\/stripe-checkout-page-using-stripe-elements\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.unimedia.tech\/de\/"},{"@type":"ListItem","position":2,"name":"Stripe checkout page using Stripe Elements"}]},{"@type":"WebSite","@id":"https:\/\/www.unimedia.tech\/de\/#website","url":"https:\/\/www.unimedia.tech\/de\/","name":"Unimedia Technology","description":"Your software development partner","publisher":{"@id":"https:\/\/www.unimedia.tech\/de\/#organization"},"alternateName":"Unimedia Tech","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.unimedia.tech\/de\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Organization","@id":"https:\/\/www.unimedia.tech\/de\/#organization","name":"Unimedia Technology","alternateName":"Unimedia Tech","url":"https:\/\/www.unimedia.tech\/de\/","logo":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/www.unimedia.tech\/de\/#\/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\/de\/#\/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\/de\/#\/schema\/person\/3a250aa22526d5c9ff6bc95bb380a5dd","name":"Unimedia","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/www.unimedia.tech\/de\/#\/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\/de\/wp-json\/wp\/v2\/posts\/7297","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.unimedia.tech\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.unimedia.tech\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.unimedia.tech\/de\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/www.unimedia.tech\/de\/wp-json\/wp\/v2\/comments?post=7297"}],"version-history":[{"count":0,"href":"https:\/\/www.unimedia.tech\/de\/wp-json\/wp\/v2\/posts\/7297\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.unimedia.tech\/de\/wp-json\/wp\/v2\/media\/6608"}],"wp:attachment":[{"href":"https:\/\/www.unimedia.tech\/de\/wp-json\/wp\/v2\/media?parent=7297"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.unimedia.tech\/de\/wp-json\/wp\/v2\/categories?post=7297"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.unimedia.tech\/de\/wp-json\/wp\/v2\/tags?post=7297"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}