{"title":"Build your integration","category":"default","creationDate":1781186417,"content":"<p>Adyen provides a standard online payments integration that handles complete payment flows for the payment methods that we offer. You can choose between two pre-built solutions: <\/p>\n<ul>\n<li>Hosted Checkout: Redirect the shopper to an Adyen-hosted payment page.<\/li>\n<li>Drop-in: Render our pre-built payment UI on your webpage.<\/li>\n<\/ul>\n<h2>Integration options<\/h2>\n<p>Compare the differences between Hosted Checkout and Drop-in to choose the integration that best fits your technical implementation resources, level of customization, and business needs.<\/p>\n<h3>Implementation details<\/h3>\n<p>The following implementation details show what you need to do for each integration option.<\/p>\n<table>\n<thead>\n<tr>\n<th>Detail<\/th>\n<th>Hosted Checkout<\/th>\n<th>Drop-in<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>Coding effort<\/td>\n<td>Low: redirect shopper to an Adyen-hosted page<\/td>\n<td>Low: initialize Drop-in on your web page<\/td>\n<\/tr>\n<tr>\n<td>User interface (UI)<\/td>\n<td>Adyen-hosted page<\/td>\n<td>Your website embedded with Drop-in<\/td>\n<\/tr>\n<tr>\n<td>Checkout page URL\/domain<\/td>\n<td>Shopper redirected to Adyen's domain<\/td>\n<td>Shopper stays on your domain<\/td>\n<\/tr>\n<tr>\n<td>Server-side implementation<\/td>\n<td>You must build your own: <ul><li markdown=\"1\">Payment server<\/li><li markdown=\"1\">Webhook server<\/li><\/ul><\/td>\n<td>You must build your own: <ul><li markdown=\"1\">Payment server<\/li><li markdown=\"1\">Webhook server<\/li><\/ul><\/td>\n<\/tr>\n<tr>\n<td>Apple Pay<\/td>\n<td>Use Adyen's <a href=\"https:\/\/developer.apple.com\/documentation\/passkit\/setting-up-apple-pay#Create-a-payment-processing-certificate\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">certificate<\/a><\/td>\n<td>Use your own <a href=\"https:\/\/developer.apple.com\/documentation\/passkit\/setting-up-apple-pay#Create-a-payment-processing-certificate\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">certificate<\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h3>Features<\/h3>\n<p>The following table shows the features available for each integration option.<\/p>\n<table>\n<thead>\n<tr>\n<th>Feature<\/th>\n<th>Hosted Checkout<\/th>\n<th>Drop-in<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>Make a payment with any available payment method.<\/td>\n<td><span class=\"hint--bottom\" data-hint=\"Required\" markdown=\"1\"><img style=\"width: 25px;\" alt=\"Required\" src=\"\/user\/pages\/reuse\/image-library\/01.icons\/required\/required.svg?decoding=auto&amp;fetchpriority=auto\" \/><\/span><\/td>\n<td><span class=\"hint--bottom\" data-hint=\"Required\" markdown=\"1\"><img style=\"width: 25px;\" alt=\"Required\" src=\"\/user\/pages\/reuse\/image-library\/01.icons\/required\/required.svg?decoding=auto&amp;fetchpriority=auto\" \/><\/span><\/td>\n<\/tr>\n<tr>\n<td>Store payment details when the shopper checks out<\/td>\n<td><span class=\"hint--bottom\" data-hint=\"Required\" markdown=\"1\"><img style=\"width: 25px;\" alt=\"Required\" src=\"\/user\/pages\/reuse\/image-library\/01.icons\/required\/required.svg?decoding=auto&amp;fetchpriority=auto\" \/><\/span><\/td>\n<td><span class=\"hint--bottom\" data-hint=\"Required\" markdown=\"1\"><img style=\"width: 25px;\" alt=\"Required\" src=\"\/user\/pages\/reuse\/image-library\/01.icons\/required\/required.svg?decoding=auto&amp;fetchpriority=auto\" \/><\/span><\/td>\n<\/tr>\n<tr>\n<td>Store shoppers' payment details for future payments<\/td>\n<td><span class=\"hint--bottom\" data-hint=\"Required\" markdown=\"1\"><img style=\"width: 25px;\" alt=\"Required\" src=\"\/user\/pages\/reuse\/image-library\/01.icons\/required\/required.svg?decoding=auto&amp;fetchpriority=auto\" \/><\/span><\/td>\n<td><span class=\"hint--bottom\" data-hint=\"Required\" markdown=\"1\"><img style=\"width: 25px;\" alt=\"Required\" src=\"\/user\/pages\/reuse\/image-library\/01.icons\/required\/required.svg?decoding=auto&amp;fetchpriority=auto\" \/><\/span><\/td>\n<\/tr>\n<tr>\n<td>Payment optimization, personalized checkout, and risk management with Adyen Uplift.<\/td>\n<td><span class=\"hint--bottom\" data-hint=\"Required\" markdown=\"1\"><img style=\"width: 25px;\" alt=\"Required\" src=\"\/user\/pages\/reuse\/image-library\/01.icons\/required\/required.svg?decoding=auto&amp;fetchpriority=auto\" \/><\/span><\/td>\n<td><span class=\"hint--bottom\" data-hint=\"Required\" markdown=\"1\"><img style=\"width: 25px;\" alt=\"Required\" src=\"\/user\/pages\/reuse\/image-library\/01.icons\/required\/required.svg?decoding=auto&amp;fetchpriority=auto\" \/><\/span><\/td>\n<\/tr>\n<tr>\n<td><a href=\"\/online-payments\/accessibility\">Accessibility features<\/a> following Web Content Accessibility Guidelines (WCAG) 2.1 guidelines.<\/td>\n<td><span class=\"hint--bottom\" data-hint=\"Required\" markdown=\"1\"><img style=\"width: 25px;\" alt=\"Required\" src=\"\/user\/pages\/reuse\/image-library\/01.icons\/required\/required.svg?decoding=auto&amp;fetchpriority=auto\" \/><\/span><\/td>\n<td><span class=\"hint--bottom\" data-hint=\"Required\" markdown=\"1\"><img style=\"width: 25px;\" alt=\"Required\" src=\"\/user\/pages\/reuse\/image-library\/01.icons\/required\/required.svg?decoding=auto&amp;fetchpriority=auto\" \/><\/span><\/td>\n<\/tr>\n<tr>\n<td>Customize styling elements, for example button color and shape, of individual payment methods.<\/td>\n<td><\/td>\n<td><span class=\"hint--bottom\" data-hint=\"Required\" markdown=\"1\"><img style=\"width: 25px;\" alt=\"Required\" src=\"\/user\/pages\/reuse\/image-library\/01.icons\/required\/required.svg?decoding=auto&amp;fetchpriority=auto\" \/><\/span><\/td>\n<\/tr>\n<tr>\n<td>Update the payment amount after starting the payment session.<\/td>\n<td><\/td>\n<td><span class=\"hint--bottom\" data-hint=\"Required\" markdown=\"1\"><img style=\"width: 25px;\" alt=\"Required\" src=\"\/user\/pages\/reuse\/image-library\/01.icons\/required\/required.svg?decoding=auto&amp;fetchpriority=auto\" \/><\/span><\/td>\n<\/tr>\n<tr>\n<td>Trigger custom client-side actions when the shopper selects a payment method.<\/td>\n<td><\/td>\n<td><span class=\"hint--bottom\" data-hint=\"Required\" markdown=\"1\"><img style=\"width: 25px;\" alt=\"Required\" src=\"\/user\/pages\/reuse\/image-library\/01.icons\/required\/required.svg?decoding=auto&amp;fetchpriority=auto\" \/><\/span><\/td>\n<\/tr>\n<tr>\n<td>Automatically render a donation form after the payment to accept donations with Adyen Giving<\/td>\n<td><\/td>\n<td><span class=\"hint--bottom\" data-hint=\"Required\" markdown=\"1\"><img style=\"width: 25px;\" alt=\"Required\" src=\"\/user\/pages\/reuse\/image-library\/01.icons\/required\/required.svg?decoding=auto&amp;fetchpriority=auto\" \/><\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>After considering the implementation details and availability of features, choose the integration that best fits your needs.<\/p>\n<h2>Choose your integration<\/h2>\n<div class=\"next-steps\" id=\"next-steps\" >\n<a href=\"\/standard\/integration\/hosted-checkout\" class=\"next-steps__step\" style=\"width:45%;\" target=\"_self\"><p class=\"next-steps__body\"><div style=\"text-align: center;\"><h6 class=\"next-steps__title\">Hosted Checkout<\/h6><p>Your server makes a Checkout API request, and you redirect the shopper to an Adyen-hosted webpage to make the payment.<\/p><\/div><\/p><\/a><a href=\"\/standard\/integration\/drop-in\" class=\"next-steps__step\" style=\"width:45%;\" target=\"_self\"><p class=\"next-steps__body\"><div style=\"text-align: center;\"><h6 class=\"next-steps__title\">Drop-in<\/h6><p>Your server makes one Checkout API request, and you load our pre-built payment form UI for the shopper to make the payment on your webpage.<\/p><\/div><\/p><\/a><\/div>\n","url":"https:\/\/docs.adyen.com\/standard\/integration","articleFields":{"description":"Choose one of our pre-built solutions to accept online payments"},"algolia":{"url":"https:\/\/docs.adyen.com\/standard\/integration","title":"Build your integration","content":"Adyen provides a standard online payments integration that handles complete payment flows for the payment methods that we offer. You can choose between two pre-built solutions: \n\nHosted Checkout: Redirect the shopper to an Adyen-hosted payment page.\nDrop-in: Render our pre-built payment UI on your webpage.\n\nIntegration options\nCompare the differences between Hosted Checkout and Drop-in to choose the integration that best fits your technical implementation resources, level of customization, and business needs.\nImplementation details\nThe following implementation details show what you need to do for each integration option.\n\n\n\nDetail\nHosted Checkout\nDrop-in\n\n\n\n\nCoding effort\nLow: redirect shopper to an Adyen-hosted page\nLow: initialize Drop-in on your web page\n\n\nUser interface (UI)\nAdyen-hosted page\nYour website embedded with Drop-in\n\n\nCheckout page URL\/domain\nShopper redirected to Adyen's domain\nShopper stays on your domain\n\n\nServer-side implementation\nYou must build your own: Payment serverWebhook server\nYou must build your own: Payment serverWebhook server\n\n\nApple Pay\nUse Adyen's certificate\nUse your own certificate\n\n\n\nFeatures\nThe following table shows the features available for each integration option.\n\n\n\nFeature\nHosted Checkout\nDrop-in\n\n\n\n\nMake a payment with any available payment method.\n\n\n\n\nStore payment details when the shopper checks out\n\n\n\n\nStore shoppers' payment details for future payments\n\n\n\n\nPayment optimization, personalized checkout, and risk management with Adyen Uplift.\n\n\n\n\nAccessibility features following Web Content Accessibility Guidelines (WCAG) 2.1 guidelines.\n\n\n\n\nCustomize styling elements, for example button color and shape, of individual payment methods.\n\n\n\n\nUpdate the payment amount after starting the payment session.\n\n\n\n\nTrigger custom client-side actions when the shopper selects a payment method.\n\n\n\n\nAutomatically render a donation form after the payment to accept donations with Adyen Giving\n\n\n\n\n\nAfter considering the implementation details and availability of features, choose the integration that best fits your needs.\nChoose your integration\n\nHosted CheckoutYour server makes a Checkout API request, and you redirect the shopper to an Adyen-hosted webpage to make the payment.Drop-inYour server makes one Checkout API request, and you load our pre-built payment form UI for the shopper to make the payment on your webpage.\n","type":"page","locale":"en","boost":18,"hierarchy":{"lvl0":"Home","lvl1":"Standard payments integration","lvl2":"Build your integration"},"hierarchy_url":{"lvl0":"https:\/\/docs.adyen.com\/","lvl1":"https:\/\/docs.adyen.com\/standard","lvl2":"\/standard\/integration"},"levels":3,"category":"","category_color":"","tags":["Build","integration"]}}