{"title":"Sessions flow integration guide","category":"default","creationDate":1677490620,"content":"
\n \n <\/in-page-filtering>\n<\/div>\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n <\/div>\n","url":"https:\/\/docs.adyen.com\/online-payments\/build-your-integration\/sessions-flow","articleFields":{"feedback_component":true,"description":"Start accepting payments on your website or app.","last_edit_on":"10-03-2023 14:38","filters_component":true,"filters_config_folder":"sessions-flow-integration","dynamic_minitoc":true,"dynamic_minitoc_context":".in-page-filtering--content","search_tags":["ios drop-in customization","web drop-in customization","android drop-in customization","ios dropin customization","web dropin customization","android dropin customization","ios drop in customization","web drop in customization","android drop in customization","ios components customization","web components customization","android components customization","adyen android","adyen ios","adyen web","adyen react native","adyen flutter","adyen sdk","adyen sessions"]},"algolia":[{"url":"https:\/\/docs.adyen.com\/online-payments\/build-your-integration\/sessions-flow","title":"Sessions flow integration guide","content":"Web Drop-in\nRender a list of available payment methods anywhere on your website.\nSupported payment methods\nCards, buy now pay later, wallets, and many more.\nSee all supported payment methods\nFeatures\n\nLow development time to integrate payment methods\nUI styling customization for the list of payment methods\nAdding payment methods to the list requires no extra development time\n3D Secure 2 support built in\n\nDemo\nView live demoIntroducing Web v6\nImprovements\nThe Web v6 library introduces the following improvements:\n\nReduced bundle size through tree shaking\nEnhanced design\nEnhanced Typescript developer experience\nBetter alignment of express payment methods\nAdded support for 6 localizations\nSupport for Apple Pay Order tracking\nImprove AVS checks for Google Pay and Apple Pay\n\nTo upgrade your existing integration, see Upgrade to Adyen Web v6Requirements\nBefore you begin, take into account the following requirements, limitations, and preparations.\n\n\n\nRequirement\nDescription\n\n\n\n\nIntegration type\nUse this information to build an online payments integration.\n\n\nCustomer Area roles\nMake sure that you have the following roles: Merchant admin role Manage API credentials\n\n\nAdyen API credentials\nMake sure that you have created the following: API credential API key Client key\n\n\nAdyen API credential roles\nMake sure that you have the roles for payments that are assigned by default.\n\n\nWebhooks\nSubscribe to the following webhooks: Standard webhook with default event codes\n\n\nLimitations\nMake sure that your integration follows our recommended best practices: <iframe>: an <iframe> must be hosted on the same domain as the parent window to support payment flows that use redirects. WebViews: we do not recommend using WebViews in native apps due to security and functionality limitations. Use native equivalents instead.Server-side Rendering (SSR): if you use SSR, ensure the AdyenCheckout instance and Components are initialized on the client side. Browser support: we support recent versions of all major browsers. For 3D Secure 2: A strict Content Security Policy (CSP) can prevent native 3D Secure 2 challenges from being loaded on your website, because loading the 3D Secure 2 interface requires adding more URLs to your CSP. Adyen does not maintain a list of all URLs. You can specify to use the redirect flow when creating a session if you do not want to adjust your CSP. \n\n\nSetup steps\nMake sure that you have done the following: Set up your test account.Got an overview of what is required before you accept live payments.\n\n\nHow it works\nFor a Drop-in integration, you must implement the following parts:\n\nYour payment server: sends the API request to create a payment session. \n\nYour client website: shows the Drop-in UI where the shopper makes the payment. Drop-in uses the data from the API responses to handle the payment flow and additional actions on your client website. \nYour webhook server: receives webhooks that include the outcome of each payment.\n\nIntegration steps\nTo integrate Drop-in in your web application:\n\nInstall an API library on your server.\nCreate a session from your server.\nInstall the Adyen Web library on your front end.\nCreate a DOM element for Drop-in.\nConfigure and create an instance of AdyenCheckout.\nConfigure and create an instance of Drop-in.\nHandle redirects.\nShow the payment status to your shopper.\nUpdate your order management system.\nTest your integration and go live.\n\nPayment flow\nThe parts of your integration work together to complete the payment flow. The payment flow is the same for all payments:\n\nThe shopper goes to the checkout page.\nYour server uses the shopper's country and currency information from your client to create a payment session.\nYour client creates an instance of Drop-in using the session data from the server.\nDrop-in shows the available payment methods, collects the shopper's payment details, handles additional actions, and presents the payment result to the shopper.\nYour webhook server receives the notification containing the payment outcome.\n\n\nIf you are integrating these parts separately, you can start at the corresponding part of this integration guide:\n\n\n Payment server\n Go to the integration steps for your server.\n Client website\n Go to the integration steps for your client website.\n Webhook server\n Go to the integration steps for your webhook server.\nInstall an API library\n\n \n Payment server\n \n\n\nWe provide server-side API libraries for several programming languages, available through common package managers, like Gradle and npm, for easier installation and version management. Our API libraries will save you development time, because they:\n\nUse an API version that is up to date.\nHave generated models to help you construct requests.\nSend the request to Adyen using their built-in HTTP client, so you do not have to create your own.\n\n\n\n \n \n \n \n\nCreate a session\n\n \n Payment server\n \n\n\nA payment session is a resource with information about a payment flow initiated by the shopper. This resource has all the information required to handle all the stages of a payment flow. You can configure this resource with information like available payment methods, payment amount, or line items.\nTo create a payment session, make a \/sessions request, including:\n\n\n\nParameter name\nRequired\nDescription\n\n\n\n\nmerchantAccount\n\nYour merchant account name.\n\n\namount\n\nThe\u00a0currency\u00a0and\u00a0value\u00a0of the payment, in minor units. This is used to filter the list of available payment methods to your shopper.\n\n\nreturnUrl\n\nURL to where the shopper should be taken back to after a redirection. If the URL to return to includes non-ASCII characters, like spaces or special letters, URL encode the value. The URL must not include personally identifiable information (PII), for example name or email address. \n\n\nreference\n\nYour unique reference for the payment. Minimum length: three characters.\n\n\ncountryCode\n\nThe shopper's country code. This is used to filter the list of available payment methods to your shopper. If not set, setting the locale is required in the front-end global configuration.\n\n\nchannel\n\nThe platform where the payment is taking place. Use Web.\n\n\nexpiresAt\n\nThe session expiry date in ISO8601 format, for example 2023-11-23T12:25:28Z, or 2023-05-27T20:25:28+08:00. When not specified, the expiry date is set to 1 hour after session creation. You cannot set the session expiry to more than 24 hours after session creation.\n\n\nshopperLocale\n\nThe language that the payment methods will appear in if the locale in your front-end global configuration isn't set. Set it to the shopper's language and country code. The default is en-US.\n\n\nshopperEmail\n\nThe shopper's email address. Strongly recommended because this field is used in a number of risk checks, and for 3D Secure.\n\n\nshopperReference\n\nYour reference to uniquely identify this shopper. Strongly recommended because this field is used in a number of risk checks.\n\n\n\n applicationInfo\n\n\nIf you are building an Adyen solution for multiple merchants, include some basic identifying information, so that we can offer you better support.\n\n\n nativeThreeDS\n\nWhen set to disabled, the redirect flow is used for 3D Secure 2 authentication. This lets you use the redirect flow to avoid adjusting your Content Security Policy (CSP) to load the 3D Secure 2 interfaces.\n\n\n\nHere is an example of how to create a session for a payment of 10 EUR:\n\n \n\nThe response contains:\n\nsessionData: the payment session data you need to pass to your front end.\nid: a unique identifier for the session data.\nThe request body.\n\n\n \n\nAPI error handling\nIf you do not get an HTTP 201 response, use the errorCode field and the list of API error codes to troubleshoot.Prepare your front end\n\n \n Client website\n \n\n\nUse Drop-in to show the available payment methods, and to collect payment details from your shoppers.\nInstall Adyen Web\nUse the Adyen Web npm package, or embed the Adyen Web script and stylesheet into your HTML file:\n\n\n \n \n \n \n\n\nDrop-in resources are available on the window global variable.\nCreate a DOM element for Drop-in\nCreate a DOM container element on your checkout page where you want Drop-in to be rendered and give it a descriptive id. We strongly recommend that you do not put it in an iframe element, because it may cause issues. \n\n \n\nIf you are using JavaScript frameworks such as Vue or React, make sure that you use references instead of selectors and that you do not re-render the DOM element.Create Drop-in\n\n \n Client website\n \n\n\nDrop-in consists of:\n\nAdyenCheckout: represents one payment session.\nDropin: represents the interface where a shopper completes their payment.\n\nWith the AdyenCheckout instance, you can create a Dropin instance.\nCreate your instance of AdyenCheckout\nCreate a global configuration object that you use to create the instance of AdyenCheckout. The object contains configuration parameters and event handlers.\n\n\nAdd configuration parameters.\n\n\n\nParameter name\nRequired\nDescription\n\n\n\n\nsession\n\nThe payment session object from your call to \/sessions. Contains a session.id and session.sessionData.\n\n\nenvironment\n\nUse test. When you are ready to accept live payments, change the value to one of our live environments.\u00a0\n\n\namount\n\nAn object representing the amount to be displayed on the Pay Button. Its properties are value (the amount in the currencies smallest unit, for example cents for EUR) and currency.\n\n\ncountryCode\n\nThe shopper's country code. This is used to filter the list of available payment methods to your shopper.\n\n\nlocale\n\nThe language used in the Drop-in UI. For possible values, see the list of available languages. By default, this is the either the shopperLocale from your \/sessions request or, if this locale is not available on Drop-in, en-US.\n\n\nshowPayButton\n\nShows or hides a Pay Button for each payment method. Defaults to true. When set to false, you must override it in \n paymentMethodsConfiguration\n. The Pay button triggers the onSubmit event when payment details are valid. If you want to disable the button and then trigger the submit flow on your own, set this to false and call the .submit() method from your own button implementation. PayPal Smart Payment Buttons doesn't support the .submit() method.\n\n\nsecondaryAmount\n\nShows the payment amount in an additional currency on the Pay button. You must do the currency conversion and set the amount. This object has properties: currency: The three-character ISO currency code. value: The amount of the transaction, in minor units. currencyDisplay: Sets the currency formatting. Default: symbol. \n\n\n\n\n\nAdd event handlers, to handle events that get triggered during the payment.\n\n\n\nEvent handler name\nRequired\nDescription\n\n\n\n\nonPaymentCompleted(result, component)\n\nCreate an event handler, called when the payment is completed.\n\n\nonPaymentFailed(result, component)\n\nCreate an event handler, called when the payment failed. A failed payment has result code Cancelled, Error or Refused.\n\n\nonError(error)\n\nCreate an event handler, called when an error occurs in Drop-in.\n\n\nbeforeSubmit(data, component, actions)\n\nCreate an event handler, called when the shopper selects the Pay button. Do not use if you are implementing an additional use case. Allows you to add parameters to the payment request that Drop-in makes. For example, you can add shopper details like \n billingAddress\n, \n deliveryAddress\n, \n shopperEmail\n, or \n shopperName\n. When the beforeSubmit event is triggered, you need to continue or stop the payment flow using methods available in the event handler: Continue the payment flow (actions.resolve()): You should call the actions.resolve() method regardless of the resultCode, including when the payment is unsuccessful.Stop the payment flow (actions.reject()): Stop the payment flow only when your server-side API request to Adyen failed, or when experiencing network connection issues.\n\n\nonSubmit(state, component, actions)\n\nRequired if you need to update the payment amount after rendering Drop-in. For this additional use case, you need to integrate additional endpoints. Creates an event handler, called when the shopper selects the Pay button and payment details are valid. When the onSubmit event is triggered, you need to continue or stop the payment flow using methods available in the event handler: Continue the payment flow (actions.resolve()): You should call the actions.resolve() method regardless of the resultCode, including when the payment is unsuccessful.Stop the payment flow (actions.reject()): Stop the payment flow only when your server-side API request to Adyen failed, or when experiencing network connection issues.\n\n\nonActionHandled\n\nCreate an event handler, called when an action, for example a QR code or 3D Secure 2 authentication screen, is shown to the shopper. The following action.type values trigger this callback: threeDS qr await Returns data that contains: componentType: The type of component that shows the action to the shopper. actionDescription: A description of the action shown to the shopper. \n\n\nonAdditionalDetails(state, component, actions)\n\nRequired if you need to confirm an additional action on your server. For this additional use case, you need to integrate additional endpoints. Create an event handler, called when a payment method requires more details, for example for native 3D Secure 2, or native QR code payment methods.\n\n\nonChange(state, component)\n\nCreate an event handler, called when a change happens in the payment form.\n\n\n\nIf an error occurs, the onError event returns an object which contains details about the error:\n\n\n\nError field\nDescription\n\n\n\n\nerror.name\nThe type of error. Use the values it returns to configure localized error messages for your shoppers: NETWORK_ERROR: a call that Drop-in made to the server has failed, for example because of a timeout, or if there is missing information in the request. Ask the shopper to try again. CANCEL: the shopper canceled the payment. Only applies for payment methods that allow explicit cancellation in the UI, for example Apple Pay or PayPal. IMPLEMENTATION_ERROR: the method or parameter is incorrect or not supported. ERROR: generic catch-all error. Tell the shopper something went wrong and ask them to try paying again, maybe with a different payment method. \n\n\nerror.message\nGives more information for each type of error. The message is technical so you shouldn't show it to your shoppers. For error.name: NETWORK_ERROR, the information in the message field depends on the environment: test: you get a message with a generic error code to help you troubleshoot. live: the message from the response. \n\n\ncomponent\nThe name of the variable where you created the instance of Drop-in, for example dropinComponent.\n\n\n\nThe error object may contain additional fields inherited from the Error() constructor.\nCombine the configuration parameters and event handlers into your global configuration object.\n\n\n\n\n\nUse this global configuration object to create an instance of AdyenCheckout.\n\n\n\n\nInitializing in a reactive framework\nModern frameworks can re-render UI components, which can cause unexpected behavior in the checkout. As a rule, initialize AdyenCheckout and mount your Components only once when you are ready to display the payment methods.\n\n\n\nCreate your instance of Drop-in\n\n\nCreate another configuration object for Drop-in. You can add the following configuration:\n\n\n\nParameter name\nRequired\nDescription\n\n\n\n\npaymentMethodComponents\nIf you imported Drop-in with individual payment methods.\nAn array of the payment methods that you imported. For example: [Card, PayPal, GooglePay, ApplePay, Ideal].\n\n\npaymentMethodsConfiguration\n\nConfiguration for individual payment methods. The payment method guide for the individual payment method shows required and optional configuration. If you include this in the configuration on your instance of Dropin, it overrides global payment method configuration on your instance of AdyenCheckout.\n\n\nopenFirstPaymentMethod\n\nWhen enabled, Drop-in opens the first payment method automatically on page load. Defaults to true.\n\n\nopenFirstStoredPaymentMethod\n\nWhen enabled, Drop-in opens the payment method with stored card details on page load. This option takes precedence over openFirstPaymentMethod. Defaults to true.\n\n\nopenPaymentMethod.type\n\nAutomatically selects the specified payment method when Drop-in renders. Set the payment method type that you want to be automatically selected as the value.\n\n\nshowStoredPaymentMethods\n\nShows or hides payment methods with stored card details. Defaults to true.\n\n\nshowRemovePaymentMethodButton\n\nAllows the shopper to remove a stored payment method. Defaults to false. If using this prop, you must also implement the onDisableStoredPaymentMethod callback.\n\n\nshowPaymentMethods\n\nShows or hides regular (not stored) payment methods. Set to false if you only want to show payment methods with stored card details. Defaults to true.\n\n\npaymentMethodsConfiguration\n\nConfiguration for individual payment methods. The payment method guides have configuration options specific to each payment method. If you include this in the configuration on your instance of DropIn, it overrides global payment method configuration on your instance of AdyenCheckout.\n\n\nredirectFromTopWhenInIframe\n\nIf your Drop-in is inside of an iframe element, set to true if you want redirects to be performed on the top-level window. We recommend that you do not put Component in an iframe.\n\n\ninstantPaymentTypes\n\nMoves payment methods to the top of the list of available payment methods. This is available for Apple Pay and Google Pay.\n\n\ndisableFinalAnimation\n\nWhen enabled, disables the final animation after a shopper completes the payment (whether successful or failed). This lets you implement your own Defaults to false.\n\n\nshowRadioButton\n\nWhen enabled, payment methods in the Drop-in have a radio button. Defaults to false.\n\n\n\n\n\nOptionally add event handlers.\n\n\n\nEvent handler name\n\nDescription\n\n\n\n\nonReady()\n\nCalled when Drop-in is initialized and is ready for use.\n\n\nonSelect(component)\n\nCalled when the shopper selects a payment method.\n\n\nonDisableStoredPaymentMethod(storedPaymentMethodId, resolve, reject)\n\nCalled when a shopper removes a stored payment method. To remove the selected payment method, make a DELETE storedPaymentMethods request using the storedPaymentMethodId. Then call either resolve() or reject(), depending on the \/storedPaymentMethods\/{storedPaymentMethodId} response.\n\n\n\n\n\n\n\n\nFor some payment methods, you must add additional configuration. You can also add optional configuration for some payment methods. For example, you can add additional configuration for cards. \n\n\n\nConfiguration for payment methods overrides global configuration. In the following example, the onError() configuration for card overrides the global onError() configuration.\n\n\n\n\n\nCreate an instance of Drop-in, passing the instance of AdyenCheckout and the Drop-in configuration object that you created. Then mount the Drop-in to the DOM element you created.\n\n\n\n\n\n\n \n \n \n \n \n Drop-in methods\n \n \n \n \nThe following methods are available on your instance of Drop-in:\n\n\n\nMethod name\nDescription\n\n\n\n\nmount(selector)\nMounts the Drop-in into the DOM returned by the selector. The selector must be either a valid CSS selector string or an HTMLElement reference.\n\n\nunmount()\nUnmounts the Drop-in from the DOM. We recommend to unmount in case the payment amount changes after the initial mount.\n\n\ncloseActivePaymentMethod()\nCloses a selected payment method, for example if you want to reset the Drop-in.\n\n\nupdate()\nUpdates the properties and remounts Drop-in into the DOM, for example, if you want to change the properties of the configuration object after Drop-in is mounted.\n\n\n\n\n \n \n\n\n \n \n \n \n \n Custom order of payment methods\n \n \n \n \nIn the checkout settings in your Customer Area, you can enable dynamic payment method ordering, or manually configure which payment methods are rendered based on the shopper's country. If you want to customize rendered payment methods for specific transactions, you can do this on your server.\nCustomize for specific transactions (on your server)\nWhen making a \/sessions request, you can include one of the following parameters:\n\n allowedPaymentMethods: Drop-in renders only the payment methods that you specify.\n blockedPaymentMethods: Drop-in doesn't render payment methods that you specify.\n\n\nTo refer to payment methods, use their paymentMethod.type from Payment methods overview.\n\nThe following example shows how to make a request to only show iDEAL and credit cards in the payment form:\n\n \n\n\n \n \n\n\n \n \n \n \n \n Custom styling\n \n \n \n \nDrop-in includes a pre-styled payment form. The styling of fonts, colors, layouts, and buttons can be customized using CSS custom properties to match your website and brand.\nYou can customize elements that are not inside an iFrame, by overriding the CSS property styles:\n\n\nCreate a CSS file override.css, with the CSS variables you want to style:\n\n\n\n\n\nImport the override.css file after importing the Adyen library's main CSS file:\n\n\n\n\n\n\n \n \n\n\n \n \n \n \n \n Localization\n \n \n \n \nSupported languages\nWe include UI localizations for some languages. The fields and text are in the files for the included locales.\nTo use a language or localization that isn't included, create your own.\nChange the language\nThe language of the UI is based on the locale set when creating your instance of AdyenCheckout.\nIf no locale is set when creating an instance of AdyenCheckout, the language displayed matches the shopperLocale from your \/sessions request.\nIf neither language is set or supported, the UI language defaults to US English.\nCustomize the localization\nThe text displayed in each localization can be customized, allowing you to replace the default text with your own.\nTo customize a localization:\n\n\nCreate a\u00a0translations\u00a0object on your payments page.\n\n\nIn this object, specify the locale you want to customize, and add key-value pairs corresponding to any text you want to customize.\nThe following example shows how to customize the US English (en-US) translation so that:\n\nShipping Address\u00a0appears instead of Delivery Address (the default en-US text).\nState\u00a0appears instead of\u00a0State or Province (the default en-US text).\n\n\n\n\n\n\nTo use the customized localization in your payment form, provide the following parameters in the configuration object:\n\n\n\nParameter name\nRequired\nDescription\n\n\n\n\nlocale\n\nThe locale you customized in the previous step.\n\n\ntranslations\n\nUse translations\n\n\n\nThe following example shows how to use a customized en-US localization in Drop-in.\n\n\n\n\n\nCreate your custom localization\nTo use a language or localization that we do not included, create your own.\n\n\nCreate a\u00a0translations\u00a0object on your payments page.\n\n\nIn this object, specify the locale you want to create. For example, you can use the locale nl-BE to create a Belgian Dutch localization, and add key-value pairs corresponding to text shown in the UI.\nThe example below shows a translation object for creating a nl-BE localization.\n\n\n\nThe ellipsis (...) in the translations object above indicate the code sample isn't complete. For missing key-value pairs in your configuration, the translation defaults to en-US.\n\n\nTo use your localization in your payment form, provide the following parameters in the configuration object:\n\n\n\nParameter name\nRequired\nDescription\n\n\n\n\nlocale\n\nThe locale you created in the previous step.\n\n\ntranslations\n\nUse translations\n\n\n\nThe example below shows how to use a created localization for nl-BE.\n\n\n\n\n\nText direction\nThe default text direction is left-to-right. Text direction is independent from the locale you set in the configuration object. So even if you set the locale to a right-to-left language, like Arabic, you still need to set the text direction.\nTo change the text direction to right-to-left, use the HTML dir attribute on the parent element for the checkout container.\n\n \n \n\nHandle the payment\n\n \n Client website\n \n\n\nWhen you create and mount Drop-in, the shopper interacts with the interface to complete the payment. The whole payment flow is handled by Drop-in you configured and created, except for when a redirect happens.Handle the redirect\nSome payment methods, like iDEAL and some 3D Secure flows, will redirect the shopper back to your website. When the shopper comes back to your website, show them the payment result, based on the result code. To get the resultCode, you can either:\n\nCreate an instance of AdyenCheckout after the redirect, as described below.\nConfirm the redirect result on your server, for which you need to implement an extra API endpoint.\n\nThe shopper comes back to the returnUrl specified when creating the payment session. The returnUrl has query parameters appended to it, which you need to handle the redirect:\n\nsessionId: the unique identifier for the shopper's payment session.\nredirectResult: details you need to submit to handle the redirect.\n\nIf the shopper doesn't return to you website, you do not get a redirectResult. You do not need to do anything to handle the redirect in this case. Instead, wait for the webhook that we send to your server.\n\n \n\nExtract the values from the query string parameters and create a function which handles the redirect result. The function needs to:\n\nCreate an instance of Adyen Checkout using the sessionId value you extracted.\nSubmit the redirectResult value you extracted from the returnUrl.\n\n\n \n\nIf the shopper doesn't return to your website, do not call submitDetails, because the result doesn't change when you attempt the request.\nAfter you submit the redirectResult value, Drop-in calls the onPaymentCompleted(result, component) event. Use the result code in result.resultCode to inform the shopper.\nTo update your order management system, wait for the webhook that we send to your server.Get the payment outcome\nAfter Drop-in finishes the payment flow, you can show the shopper the current payment status. Adyen sends a webhook with the outcome of the payment.\nInform the shopper\n\n \n Client website\n \n\n\nDepending on whether the payment was successful, the onPaymentCompleted or onPaymentFailed event is triggered.\nFrom the relevant event, you can get the \n resultCode\n to inform the shopper about the current payment status.\n\n \n \n \n \n \n Optional: Get the result of the payment session on your server\n \n \n \n \n\n \n Payment server\n \n\n\nYou can also get the result of the payment session on your server.\n\nGet the id from the \/sessions response.\nGet sessionResult from the onPaymentCompleted or onPaymentFailed event.\n\nMake a GET \/sessions\/{id}?sessionResult={sessionResult} request including the id and sessionResult. For example:\n\n\n\nThe response includes the result of the payment session (status). For example:\n\n\n\nThe additionalData attributes in the response depend on the type of payment made.\nPossible statuses:\n\n\n\nstatus\nDescription\n\n\n\n\ncompleted\nThe shopper completed the payment. This means that the payment was authorized.\n\n\npaymentPending\nThe shopper is in the process of making the payment. This applies to payment methods with an asynchronous flow.\n\n\ncanceled\nThe shopper canceled the payment.\n\n\nexpired\nThe session expired (default: 1 hour after session creation). Shoppers can no longer complete the payment with this sessionId.\n\n\n\n\n\n\nThe status included in the response doesn't get updated. Do not make the request again to check for payment status updates. Instead, check webhooks or the Transactions list in your Customer Area.\n\n\n \n \n\n\nUpdate your order management system\n\n \n Webhook server\n \n\n\nYou get the outcome of each payment asynchronously, in an AUTHORISATION webhook. Use the merchantReference from the webhook to match it to your order reference.\nFor a successful payment, the event contains success: true.\n\n \n\nFor an unsuccessful payment, you get success: false, and the reason field has details about why the payment was unsuccessful.\n\n \nTest and go live\nBefore going live, use our list of test cards and other payment methods to\u00a0test your integration. We recommend testing each payment method that you intend to offer to your shoppers.\nYou can check the status of a test payment in your\u00a0Customer Area, under Transactions >\u00a0Payments.\nTo debug or troubleshoot test payments, you can also use API logs in your test environment.\nWhen you are ready to go live, you need to:\n\nApply for a live account. Review the process to start accepting payments on Get started with Adyen.\nAssess your PCI DSS compliance by submitting the Self-Assessment Questionnaire-A.\nConfigure your live account.\u00a0\nEnsure your checkout is served over HTTPS. Non-HTTPS connections can result in payment processing failures.\nSubmit a request to add payment methods in your live Customer Area.\nSwitch from test to our live endpoints.\n\nMake sure that all API requests you make for the same payment session use the same live endpoint region. Using different regions for \/payments and \/payments\/details requests may result in errors, for example, when authenticating with 3D Secure 2.\n\n\nLoad Drop-in from one of our live environments and set the environment to match your live endpoints:\n\n\n\nEndpoint region\nValue\n\n\n\n\nEurope (EU) live\nlive\n\n\nUnited States (US) live\nlive-us\n\n\nAustralia (AU) live\nlive-au\n\n\nAsia Pacific & Southeast (APSE) live\nlive-apse\n\n\nIndia (IN) live\nlive-in\n\n\n\n\n\nStaying up to date\nAfter you go live, keep your integration up-to-date. Regular updates help you:\n\nAccess new features as they are released.\nImprove checkout performance and accessibility for your customers.\nUpdate security to protect your business and your data.\nNext steps\n\nrequiredModify paymentsFind out how to cancel, refund, or capture a payment using our API.Add payment methodsLearn about payment methods and how to add them to your account.TokenizationSave shopper payment details for later payments.3D Secure authenticationComply with regulations such as PSD2 SCA in Europe.\n","type":"page","locale":"en","boost":17,"hierarchy":{"lvl0":"Home","lvl1":"Online payments","lvl2":"Build your integration","lvl3":"Sessions flow integration guide"},"hierarchy_url":{"lvl0":"https:\/\/docs.adyen.com\/","lvl1":"https:\/\/docs.adyen.com\/online-payments","lvl2":"https:\/\/docs.adyen.com\/online-payments\/build-your-integration","lvl3":"\/online-payments\/build-your-integration\/sessions-flow"},"levels":4,"category":"Online Payments","category_color":"green","tags":["ios drop-in customization","web drop-in customization","android drop-in customization","ios dropin customization","web dropin customization","android dropin customization","ios drop in customization","web drop in customization","android drop in customization","ios components customization","web components customization","android components customization","adyen android","adyen ios","adyen web","adyen react native","adyen flutter","adyen sdk","adyen sessions"]},{"url":"https:\/\/docs.adyen.com\/online-payments\/build-your-integration\/sessions-flow?platform=Web&integration=Drop-in","title":"Web Drop-in","content":"Web Drop-in\nRender a list of available payment methods anywhere on your website.\nSupported payment methods\nCards, buy now pay later, wallets, and many more.\nSee all supported payment methods\nFeatures\n\nLow development time to integrate payment methods\nUI styling customization for the list of payment methods\nAdding payment methods to the list requires no extra development time\n3D Secure 2 support built in\n\nDemo\nView live demoIntroducing Web v6\nImprovements\nThe Web v6 library introduces the following improvements:\n\nReduced bundle size through tree shaking\nEnhanced design\nEnhanced Typescript developer experience\nBetter alignment of express payment methods\nAdded support for 6 localizations\nSupport for Apple Pay Order tracking\nImprove AVS checks for Google Pay and Apple Pay\n\nTo upgrade your existing integration, see Upgrade to Adyen Web v6Requirements\nBefore you begin, take into account the following requirements, limitations, and preparations.\n\n\n\nRequirement\nDescription\n\n\n\n\nIntegration type\nUse this information to build an online payments integration.\n\n\nCustomer Area roles\nMake sure that you have the following roles: Merchant admin role Manage API credentials\n\n\nAdyen API credentials\nMake sure that you have created the following: API credential API key Client key\n\n\nAdyen API credential roles\nMake sure that you have the roles for payments that are assigned by default.\n\n\nWebhooks\nSubscribe to the following webhooks: Standard webhook with default event codes\n\n\nLimitations\nMake sure that your integration follows our recommended best practices: <iframe>: an <iframe> must be hosted on the same domain as the parent window to support payment flows that use redirects. WebViews: we do not recommend using WebViews in native apps due to security and functionality limitations. Use native equivalents instead.Server-side Rendering (SSR): if you use SSR, ensure the AdyenCheckout instance and Components are initialized on the client side. Browser support: we support recent versions of all major browsers. For 3D Secure 2: A strict Content Security Policy (CSP) can prevent native 3D Secure 2 challenges from being loaded on your website, because loading the 3D Secure 2 interface requires adding more URLs to your CSP. Adyen does not maintain a list of all URLs. You can specify to use the redirect flow when creating a session if you do not want to adjust your CSP. \n\n\nSetup steps\nMake sure that you have done the following: Set up your test account.Got an overview of what is required before you accept live payments.\n\n\nHow it works\nFor a Drop-in integration, you must implement the following parts:\n\nYour payment server: sends the API request to create a payment session. \n\nYour client website: shows the Drop-in UI where the shopper makes the payment. Drop-in uses the data from the API responses to handle the payment flow and additional actions on your client website. \nYour webhook server: receives webhooks that include the outcome of each payment.\n\nIntegration steps\nTo integrate Drop-in in your web application:\n\nInstall an API library on your server.\nCreate a session from your server.\nInstall the Adyen Web library on your front end.\nCreate a DOM element for Drop-in.\nConfigure and create an instance of AdyenCheckout.\nConfigure and create an instance of Drop-in.\nHandle redirects.\nShow the payment status to your shopper.\nUpdate your order management system.\nTest your integration and go live.\n\nPayment flow\nThe parts of your integration work together to complete the payment flow. The payment flow is the same for all payments:\n\nThe shopper goes to the checkout page.\nYour server uses the shopper's country and currency information from your client to create a payment session.\nYour client creates an instance of Drop-in using the session data from the server.\nDrop-in shows the available payment methods, collects the shopper's payment details, handles additional actions, and presents the payment result to the shopper.\nYour webhook server receives the notification containing the payment outcome.\n\n\nIf you are integrating these parts separately, you can start at the corresponding part of this integration guide:\n\n\n Payment server\n Go to the integration steps for your server.\n Client website\n Go to the integration steps for your client website.\n Webhook server\n Go to the integration steps for your webhook server.\nInstall an API library\n\n \n Payment server\n \n\n\nWe provide server-side API libraries for several programming languages, available through common package managers, like Gradle and npm, for easier installation and version management. Our API libraries will save you development time, because they:\n\nUse an API version that is up to date.\nHave generated models to help you construct requests.\nSend the request to Adyen using their built-in HTTP client, so you do not have to create your own.\n\n\n\n \n \n \n \n\nCreate a session\n\n \n Payment server\n \n\n\nA payment session is a resource with information about a payment flow initiated by the shopper. This resource has all the information required to handle all the stages of a payment flow. You can configure this resource with information like available payment methods, payment amount, or line items.\nTo create a payment session, make a \/sessions request, including:\n\n\n\nParameter name\nRequired\nDescription\n\n\n\n\nmerchantAccount\n\nYour merchant account name.\n\n\namount\n\nThe\u00a0currency\u00a0and\u00a0value\u00a0of the payment, in minor units. This is used to filter the list of available payment methods to your shopper.\n\n\nreturnUrl\n\nURL to where the shopper should be taken back to after a redirection. If the URL to return to includes non-ASCII characters, like spaces or special letters, URL encode the value. The URL must not include personally identifiable information (PII), for example name or email address. \n\n\nreference\n\nYour unique reference for the payment. Minimum length: three characters.\n\n\ncountryCode\n\nThe shopper's country code. This is used to filter the list of available payment methods to your shopper. If not set, setting the locale is required in the front-end global configuration.\n\n\nchannel\n\nThe platform where the payment is taking place. Use Web.\n\n\nexpiresAt\n\nThe session expiry date in ISO8601 format, for example 2023-11-23T12:25:28Z, or 2023-05-27T20:25:28+08:00. When not specified, the expiry date is set to 1 hour after session creation. You cannot set the session expiry to more than 24 hours after session creation.\n\n\nshopperLocale\n\nThe language that the payment methods will appear in if the locale in your front-end global configuration isn't set. Set it to the shopper's language and country code. The default is en-US.\n\n\nshopperEmail\n\nThe shopper's email address. Strongly recommended because this field is used in a number of risk checks, and for 3D Secure.\n\n\nshopperReference\n\nYour reference to uniquely identify this shopper. Strongly recommended because this field is used in a number of risk checks.\n\n\n\n applicationInfo\n\n\nIf you are building an Adyen solution for multiple merchants, include some basic identifying information, so that we can offer you better support.\n\n\n nativeThreeDS\n\nWhen set to disabled, the redirect flow is used for 3D Secure 2 authentication. This lets you use the redirect flow to avoid adjusting your Content Security Policy (CSP) to load the 3D Secure 2 interfaces.\n\n\n\nHere is an example of how to create a session for a payment of 10 EUR:\n\n \n\nThe response contains:\n\nsessionData: the payment session data you need to pass to your front end.\nid: a unique identifier for the session data.\nThe request body.\n\n\n \n\nAPI error handling\nIf you do not get an HTTP 201 response, use the errorCode field and the list of API error codes to troubleshoot.Prepare your front end\n\n \n Client website\n \n\n\nUse Drop-in to show the available payment methods, and to collect payment details from your shoppers.\nInstall Adyen Web\nUse the Adyen Web npm package, or embed the Adyen Web script and stylesheet into your HTML file:\n\n\n \n \n \n \n\n\nDrop-in resources are available on the window global variable.\nCreate a DOM element for Drop-in\nCreate a DOM container element on your checkout page where you want Drop-in to be rendered and give it a descriptive id. We strongly recommend that you do not put it in an iframe element, because it may cause issues. \n\n \n\nIf you are using JavaScript frameworks such as Vue or React, make sure that you use references instead of selectors and that you do not re-render the DOM element.Create Drop-in\n\n \n Client website\n \n\n\nDrop-in consists of:\n\nAdyenCheckout: represents one payment session.\nDropin: represents the interface where a shopper completes their payment.\n\nWith the AdyenCheckout instance, you can create a Dropin instance.\nCreate your instance of AdyenCheckout\nCreate a global configuration object that you use to create the instance of AdyenCheckout. The object contains configuration parameters and event handlers.\n\n\nAdd configuration parameters.\n\n\n\nParameter name\nRequired\nDescription\n\n\n\n\nsession\n\nThe payment session object from your call to \/sessions. Contains a session.id and session.sessionData.\n\n\nenvironment\n\nUse test. When you are ready to accept live payments, change the value to one of our live environments.\u00a0\n\n\namount\n\nAn object representing the amount to be displayed on the Pay Button. Its properties are value (the amount in the currencies smallest unit, for example cents for EUR) and currency.\n\n\ncountryCode\n\nThe shopper's country code. This is used to filter the list of available payment methods to your shopper.\n\n\nlocale\n\nThe language used in the Drop-in UI. For possible values, see the list of available languages. By default, this is the either the shopperLocale from your \/sessions request or, if this locale is not available on Drop-in, en-US.\n\n\nshowPayButton\n\nShows or hides a Pay Button for each payment method. Defaults to true. When set to false, you must override it in \n paymentMethodsConfiguration\n. The Pay button triggers the onSubmit event when payment details are valid. If you want to disable the button and then trigger the submit flow on your own, set this to false and call the .submit() method from your own button implementation. PayPal Smart Payment Buttons doesn't support the .submit() method.\n\n\nsecondaryAmount\n\nShows the payment amount in an additional currency on the Pay button. You must do the currency conversion and set the amount. This object has properties: currency: The three-character ISO currency code. value: The amount of the transaction, in minor units. currencyDisplay: Sets the currency formatting. Default: symbol. \n\n\n\n\n\nAdd event handlers, to handle events that get triggered during the payment.\n\n\n\nEvent handler name\nRequired\nDescription\n\n\n\n\nonPaymentCompleted(result, component)\n\nCreate an event handler, called when the payment is completed.\n\n\nonPaymentFailed(result, component)\n\nCreate an event handler, called when the payment failed. A failed payment has result code Cancelled, Error or Refused.\n\n\nonError(error)\n\nCreate an event handler, called when an error occurs in Drop-in.\n\n\nbeforeSubmit(data, component, actions)\n\nCreate an event handler, called when the shopper selects the Pay button. Do not use if you are implementing an additional use case. Allows you to add parameters to the payment request that Drop-in makes. For example, you can add shopper details like \n billingAddress\n, \n deliveryAddress\n, \n shopperEmail\n, or \n shopperName\n. When the beforeSubmit event is triggered, you need to continue or stop the payment flow using methods available in the event handler: Continue the payment flow (actions.resolve()): You should call the actions.resolve() method regardless of the resultCode, including when the payment is unsuccessful.Stop the payment flow (actions.reject()): Stop the payment flow only when your server-side API request to Adyen failed, or when experiencing network connection issues.\n\n\nonSubmit(state, component, actions)\n\nRequired if you need to update the payment amount after rendering Drop-in. For this additional use case, you need to integrate additional endpoints. Creates an event handler, called when the shopper selects the Pay button and payment details are valid. When the onSubmit event is triggered, you need to continue or stop the payment flow using methods available in the event handler: Continue the payment flow (actions.resolve()): You should call the actions.resolve() method regardless of the resultCode, including when the payment is unsuccessful.Stop the payment flow (actions.reject()): Stop the payment flow only when your server-side API request to Adyen failed, or when experiencing network connection issues.\n\n\nonActionHandled\n\nCreate an event handler, called when an action, for example a QR code or 3D Secure 2 authentication screen, is shown to the shopper. The following action.type values trigger this callback: threeDS qr await Returns data that contains: componentType: The type of component that shows the action to the shopper. actionDescription: A description of the action shown to the shopper. \n\n\nonAdditionalDetails(state, component, actions)\n\nRequired if you need to confirm an additional action on your server. For this additional use case, you need to integrate additional endpoints. Create an event handler, called when a payment method requires more details, for example for native 3D Secure 2, or native QR code payment methods.\n\n\nonChange(state, component)\n\nCreate an event handler, called when a change happens in the payment form.\n\n\n\nIf an error occurs, the onError event returns an object which contains details about the error:\n\n\n\nError field\nDescription\n\n\n\n\nerror.name\nThe type of error. Use the values it returns to configure localized error messages for your shoppers: NETWORK_ERROR: a call that Drop-in made to the server has failed, for example because of a timeout, or if there is missing information in the request. Ask the shopper to try again. CANCEL: the shopper canceled the payment. Only applies for payment methods that allow explicit cancellation in the UI, for example Apple Pay or PayPal. IMPLEMENTATION_ERROR: the method or parameter is incorrect or not supported. ERROR: generic catch-all error. Tell the shopper something went wrong and ask them to try paying again, maybe with a different payment method. \n\n\nerror.message\nGives more information for each type of error. The message is technical so you shouldn't show it to your shoppers. For error.name: NETWORK_ERROR, the information in the message field depends on the environment: test: you get a message with a generic error code to help you troubleshoot. live: the message from the response. \n\n\ncomponent\nThe name of the variable where you created the instance of Drop-in, for example dropinComponent.\n\n\n\nThe error object may contain additional fields inherited from the Error() constructor.\nCombine the configuration parameters and event handlers into your global configuration object.\n\n\n\n\n\nUse this global configuration object to create an instance of AdyenCheckout.\n\n\n\n\nInitializing in a reactive framework\nModern frameworks can re-render UI components, which can cause unexpected behavior in the checkout. As a rule, initialize AdyenCheckout and mount your Components only once when you are ready to display the payment methods.\n\n\n\nCreate your instance of Drop-in\n\n\nCreate another configuration object for Drop-in. You can add the following configuration:\n\n\n\nParameter name\nRequired\nDescription\n\n\n\n\npaymentMethodComponents\nIf you imported Drop-in with individual payment methods.\nAn array of the payment methods that you imported. For example: [Card, PayPal, GooglePay, ApplePay, Ideal].\n\n\npaymentMethodsConfiguration\n\nConfiguration for individual payment methods. The payment method guide for the individual payment method shows required and optional configuration. If you include this in the configuration on your instance of Dropin, it overrides global payment method configuration on your instance of AdyenCheckout.\n\n\nopenFirstPaymentMethod\n\nWhen enabled, Drop-in opens the first payment method automatically on page load. Defaults to true.\n\n\nopenFirstStoredPaymentMethod\n\nWhen enabled, Drop-in opens the payment method with stored card details on page load. This option takes precedence over openFirstPaymentMethod. Defaults to true.\n\n\nopenPaymentMethod.type\n\nAutomatically selects the specified payment method when Drop-in renders. Set the payment method type that you want to be automatically selected as the value.\n\n\nshowStoredPaymentMethods\n\nShows or hides payment methods with stored card details. Defaults to true.\n\n\nshowRemovePaymentMethodButton\n\nAllows the shopper to remove a stored payment method. Defaults to false. If using this prop, you must also implement the onDisableStoredPaymentMethod callback.\n\n\nshowPaymentMethods\n\nShows or hides regular (not stored) payment methods. Set to false if you only want to show payment methods with stored card details. Defaults to true.\n\n\npaymentMethodsConfiguration\n\nConfiguration for individual payment methods. The payment method guides have configuration options specific to each payment method. If you include this in the configuration on your instance of DropIn, it overrides global payment method configuration on your instance of AdyenCheckout.\n\n\nredirectFromTopWhenInIframe\n\nIf your Drop-in is inside of an iframe element, set to true if you want redirects to be performed on the top-level window. We recommend that you do not put Component in an iframe.\n\n\ninstantPaymentTypes\n\nMoves payment methods to the top of the list of available payment methods. This is available for Apple Pay and Google Pay.\n\n\ndisableFinalAnimation\n\nWhen enabled, disables the final animation after a shopper completes the payment (whether successful or failed). This lets you implement your own Defaults to false.\n\n\nshowRadioButton\n\nWhen enabled, payment methods in the Drop-in have a radio button. Defaults to false.\n\n\n\n\n\nOptionally add event handlers.\n\n\n\nEvent handler name\n\nDescription\n\n\n\n\nonReady()\n\nCalled when Drop-in is initialized and is ready for use.\n\n\nonSelect(component)\n\nCalled when the shopper selects a payment method.\n\n\nonDisableStoredPaymentMethod(storedPaymentMethodId, resolve, reject)\n\nCalled when a shopper removes a stored payment method. To remove the selected payment method, make a DELETE storedPaymentMethods request using the storedPaymentMethodId. Then call either resolve() or reject(), depending on the \/storedPaymentMethods\/{storedPaymentMethodId} response.\n\n\n\n\n\n\n\n\nFor some payment methods, you must add additional configuration. You can also add optional configuration for some payment methods. For example, you can add additional configuration for cards. \n\n\n\nConfiguration for payment methods overrides global configuration. In the following example, the onError() configuration for card overrides the global onError() configuration.\n\n\n\n\n\nCreate an instance of Drop-in, passing the instance of AdyenCheckout and the Drop-in configuration object that you created. Then mount the Drop-in to the DOM element you created.\n\n\n\n\n\n\n \n \n \n \n \n Drop-in methods\n \n \n \n \nThe following methods are available on your instance of Drop-in:\n\n\n\nMethod name\nDescription\n\n\n\n\nmount(selector)\nMounts the Drop-in into the DOM returned by the selector. The selector must be either a valid CSS selector string or an HTMLElement reference.\n\n\nunmount()\nUnmounts the Drop-in from the DOM. We recommend to unmount in case the payment amount changes after the initial mount.\n\n\ncloseActivePaymentMethod()\nCloses a selected payment method, for example if you want to reset the Drop-in.\n\n\nupdate()\nUpdates the properties and remounts Drop-in into the DOM, for example, if you want to change the properties of the configuration object after Drop-in is mounted.\n\n\n\n\n \n \n\n\n \n \n \n \n \n Custom order of payment methods\n \n \n \n \nIn the checkout settings in your Customer Area, you can enable dynamic payment method ordering, or manually configure which payment methods are rendered based on the shopper's country. If you want to customize rendered payment methods for specific transactions, you can do this on your server.\nCustomize for specific transactions (on your server)\nWhen making a \/sessions request, you can include one of the following parameters:\n\n allowedPaymentMethods: Drop-in renders only the payment methods that you specify.\n blockedPaymentMethods: Drop-in doesn't render payment methods that you specify.\n\n\nTo refer to payment methods, use their paymentMethod.type from Payment methods overview.\n\nThe following example shows how to make a request to only show iDEAL and credit cards in the payment form:\n\n \n\n\n \n \n\n\n \n \n \n \n \n Custom styling\n \n \n \n \nDrop-in includes a pre-styled payment form. The styling of fonts, colors, layouts, and buttons can be customized using CSS custom properties to match your website and brand.\nYou can customize elements that are not inside an iFrame, by overriding the CSS property styles:\n\n\nCreate a CSS file override.css, with the CSS variables you want to style:\n\n\n\n\n\nImport the override.css file after importing the Adyen library's main CSS file:\n\n\n\n\n\n\n \n \n\n\n \n \n \n \n \n Localization\n \n \n \n \nSupported languages\nWe include UI localizations for some languages. The fields and text are in the files for the included locales.\nTo use a language or localization that isn't included, create your own.\nChange the language\nThe language of the UI is based on the locale set when creating your instance of AdyenCheckout.\nIf no locale is set when creating an instance of AdyenCheckout, the language displayed matches the shopperLocale from your \/sessions request.\nIf neither language is set or supported, the UI language defaults to US English.\nCustomize the localization\nThe text displayed in each localization can be customized, allowing you to replace the default text with your own.\nTo customize a localization:\n\n\nCreate a\u00a0translations\u00a0object on your payments page.\n\n\nIn this object, specify the locale you want to customize, and add key-value pairs corresponding to any text you want to customize.\nThe following example shows how to customize the US English (en-US) translation so that:\n\nShipping Address\u00a0appears instead of Delivery Address (the default en-US text).\nState\u00a0appears instead of\u00a0State or Province (the default en-US text).\n\n\n\n\n\n\nTo use the customized localization in your payment form, provide the following parameters in the configuration object:\n\n\n\nParameter name\nRequired\nDescription\n\n\n\n\nlocale\n\nThe locale you customized in the previous step.\n\n\ntranslations\n\nUse translations\n\n\n\nThe following example shows how to use a customized en-US localization in Drop-in.\n\n\n\n\n\nCreate your custom localization\nTo use a language or localization that we do not included, create your own.\n\n\nCreate a\u00a0translations\u00a0object on your payments page.\n\n\nIn this object, specify the locale you want to create. For example, you can use the locale nl-BE to create a Belgian Dutch localization, and add key-value pairs corresponding to text shown in the UI.\nThe example below shows a translation object for creating a nl-BE localization.\n\n\n\nThe ellipsis (...) in the translations object above indicate the code sample isn't complete. For missing key-value pairs in your configuration, the translation defaults to en-US.\n\n\nTo use your localization in your payment form, provide the following parameters in the configuration object:\n\n\n\nParameter name\nRequired\nDescription\n\n\n\n\nlocale\n\nThe locale you created in the previous step.\n\n\ntranslations\n\nUse translations\n\n\n\nThe example below shows how to use a created localization for nl-BE.\n\n\n\n\n\nText direction\nThe default text direction is left-to-right. Text direction is independent from the locale you set in the configuration object. So even if you set the locale to a right-to-left language, like Arabic, you still need to set the text direction.\nTo change the text direction to right-to-left, use the HTML dir attribute on the parent element for the checkout container.\n\n \n \n\nHandle the payment\n\n \n Client website\n \n\n\nWhen you create and mount Drop-in, the shopper interacts with the interface to complete the payment. The whole payment flow is handled by Drop-in you configured and created, except for when a redirect happens.Handle the redirect\nSome payment methods, like iDEAL and some 3D Secure flows, will redirect the shopper back to your website. When the shopper comes back to your website, show them the payment result, based on the result code. To get the resultCode, you can either:\n\nCreate an instance of AdyenCheckout after the redirect, as described below.\nConfirm the redirect result on your server, for which you need to implement an extra API endpoint.\n\nThe shopper comes back to the returnUrl specified when creating the payment session. The returnUrl has query parameters appended to it, which you need to handle the redirect:\n\nsessionId: the unique identifier for the shopper's payment session.\nredirectResult: details you need to submit to handle the redirect.\n\nIf the shopper doesn't return to you website, you do not get a redirectResult. You do not need to do anything to handle the redirect in this case. Instead, wait for the webhook that we send to your server.\n\n \n\nExtract the values from the query string parameters and create a function which handles the redirect result. The function needs to:\n\nCreate an instance of Adyen Checkout using the sessionId value you extracted.\nSubmit the redirectResult value you extracted from the returnUrl.\n\n\n \n\nIf the shopper doesn't return to your website, do not call submitDetails, because the result doesn't change when you attempt the request.\nAfter you submit the redirectResult value, Drop-in calls the onPaymentCompleted(result, component) event. Use the result code in result.resultCode to inform the shopper.\nTo update your order management system, wait for the webhook that we send to your server.Get the payment outcome\nAfter Drop-in finishes the payment flow, you can show the shopper the current payment status. Adyen sends a webhook with the outcome of the payment.\nInform the shopper\n\n \n Client website\n \n\n\nDepending on whether the payment was successful, the onPaymentCompleted or onPaymentFailed event is triggered.\nFrom the relevant event, you can get the \n resultCode\n to inform the shopper about the current payment status.\n\n \n \n \n \n \n Optional: Get the result of the payment session on your server\n \n \n \n \n\n \n Payment server\n \n\n\nYou can also get the result of the payment session on your server.\n\nGet the id from the \/sessions response.\nGet sessionResult from the onPaymentCompleted or onPaymentFailed event.\n\nMake a GET \/sessions\/{id}?sessionResult={sessionResult} request including the id and sessionResult. For example:\n\n\n\nThe response includes the result of the payment session (status). For example:\n\n\n\nThe additionalData attributes in the response depend on the type of payment made.\nPossible statuses:\n\n\n\nstatus\nDescription\n\n\n\n\ncompleted\nThe shopper completed the payment. This means that the payment was authorized.\n\n\npaymentPending\nThe shopper is in the process of making the payment. This applies to payment methods with an asynchronous flow.\n\n\ncanceled\nThe shopper canceled the payment.\n\n\nexpired\nThe session expired (default: 1 hour after session creation). Shoppers can no longer complete the payment with this sessionId.\n\n\n\n\n\n\nThe status included in the response doesn't get updated. Do not make the request again to check for payment status updates. Instead, check webhooks or the Transactions list in your Customer Area.\n\n\n \n \n\n\nUpdate your order management system\n\n \n Webhook server\n \n\n\nYou get the outcome of each payment asynchronously, in an AUTHORISATION webhook. Use the merchantReference from the webhook to match it to your order reference.\nFor a successful payment, the event contains success: true.\n\n \n\nFor an unsuccessful payment, you get success: false, and the reason field has details about why the payment was unsuccessful.\n\n \nTest and go live\nBefore going live, use our list of test cards and other payment methods to\u00a0test your integration. We recommend testing each payment method that you intend to offer to your shoppers.\nYou can check the status of a test payment in your\u00a0Customer Area, under Transactions >\u00a0Payments.\nTo debug or troubleshoot test payments, you can also use API logs in your test environment.\nWhen you are ready to go live, you need to:\n\nApply for a live account. Review the process to start accepting payments on Get started with Adyen.\nAssess your PCI DSS compliance by submitting the Self-Assessment Questionnaire-A.\nConfigure your live account.\u00a0\nEnsure your checkout is served over HTTPS. Non-HTTPS connections can result in payment processing failures.\nSubmit a request to add payment methods in your live Customer Area.\nSwitch from test to our live endpoints.\n\nMake sure that all API requests you make for the same payment session use the same live endpoint region. Using different regions for \/payments and \/payments\/details requests may result in errors, for example, when authenticating with 3D Secure 2.\n\n\nLoad Drop-in from one of our live environments and set the environment to match your live endpoints:\n\n\n\nEndpoint region\nValue\n\n\n\n\nEurope (EU) live\nlive\n\n\nUnited States (US) live\nlive-us\n\n\nAustralia (AU) live\nlive-au\n\n\nAsia Pacific & Southeast (APSE) live\nlive-apse\n\n\nIndia (IN) live\nlive-in\n\n\n\n\n\nStaying up to date\nAfter you go live, keep your integration up-to-date. Regular updates help you:\n\nAccess new features as they are released.\nImprove checkout performance and accessibility for your customers.\nUpdate security to protect your business and your data.\nNext steps\n\nrequiredModify paymentsFind out how to cancel, refund, or capture a payment using our API.Add payment methodsLearn about payment methods and how to add them to your account.TokenizationSave shopper payment details for later payments.3D Secure authenticationComply with regulations such as PSD2 SCA in Europe.\n","type":"page","locale":"en","boost":17,"hierarchy":{"lvl0":"Home","lvl1":"Online payments","lvl2":"Build your integration","lvl3":"Sessions flow integration guide"},"hierarchy_url":{"lvl0":"https:\/\/docs.adyen.com\/","lvl1":"https:\/\/docs.adyen.com\/online-payments","lvl2":"https:\/\/docs.adyen.com\/online-payments\/build-your-integration","lvl3":"\/online-payments\/build-your-integration\/sessions-flow"},"levels":4,"category":"Online Payments","category_color":"green","tags":["Web","Drop-in"]},{"url":"https:\/\/docs.adyen.com\/online-payments\/build-your-integration\/sessions-flow?platform=Web&integration=Components","title":"Web Components","content":"Web Components\nRender individual payment methods anywhere on your website.\nSupported payment methods\nCards, buy now pay later, wallets, and many more.\nSee all supported payment methods\nFeatures\n\nLow development time to integrate each payment method component\nUI styling customization for each payment method\nFlexibility to add payment method components with configuration for each\n3D Secure 2 support using the 3D Secure 2 Component\n\nDemo\nView live demoIntroducing Web v6\nImprovements\nThe Web v6 library introduces the following improvements:\n\nReduced bundle size through tree shaking\nEnhanced design\nEnhanced Typescript developer experience\nBetter alignment of express payment methods\nAdded support for 6 localizations\nSupport for Apple Pay Order tracking\nImprove AVS checks for Google Pay and Apple Pay\n\nTo upgrade your existing integration, see Upgrade to Adyen Web v6How it works\nFor a Components integration, you must implement the following parts:\n\nYour payment server: sends the API requests to get available payment methods, make a payment, and send additional payment details. \n\nYour client website: shows the the Component UI where the shopper makes the payment. The Component uses the data from the API responses to handle the payment flow and additional actions on your client website. \nYour webhook server: receives webhooks that include the outcome of each payment.\n\nIntegration steps\nTo integrate Components in your web application:\n\nInstall an API library on your server.\nCreate a session from your server.\nInstall the Adyen Web library on your front end.\nCreate a DOM element for Components.\nConfigure and create an instance of AdyenCheckout.\nConfigure and create an instance of the Component.\nHandle redirects.\nShow the payment status to your shopper.\nUpdate your order management system.\nTest your integration and go live.\n\nPayment flow\nThe parts of your integration work together to complete the payment flow. The payment flow is the same for all payments:\n\nThe shopper goes to the checkout page.\nYour server uses the shopper's country and currency information from your client to create a payment session.\nYour client creates an instance of the Component using the session data from the server.\nThe Component collects the shopper's payment details, handles additional actions, and presents the payment result to the shopper.\nYour webhook server receives the notification containing the payment outcome.\n\n\nIf you are integrating these parts separately, you can start at the corresponding part of this integration guide:\n\n\n Payment server\n Go to the integration steps for your server.\n Client website\n Go to the integration steps for your client website.\n Webhook server\n Go to the integration steps for your webhook server.\nRequirements\nBefore you begin, take into account the following requirements, limitations, and preparations.\n\n\n\nRequirement\nDescription\n\n\n\n\nIntegration type\nUse this information to build an online payments integration.\n\n\nCustomer Area roles\nMake sure that you have the following roles: Merchant admin role Manage API credentials\n\n\nAdyen API credentials\nMake sure that you have created the following: API credential API key Client key\n\n\nAdyen API credential roles\nMake sure that you have the roles for payments that are assigned by default.\n\n\nWebhooks\nSubscribe to the following webhooks: Standard webhook with default event codes\n\n\nLimitations\nMake sure that your integration follows our recommended best practices: <iframe>: an <iframe> must be hosted on the same domain as the parent window to support payment flows that use redirects. WebViews: we do not recommend using WebViews in native apps due to security and functionality limitations. Use native equivalents instead.Server-side Rendering (SSR): if you use SSR, ensure the AdyenCheckout instance and Components are initialized on the client side. Browser support: we support recent versions of all major browsers. For 3D Secure 2: A strict Content Security Policy (CSP) can prevent native 3D Secure 2 challenges from being loaded on your website, because loading the 3D Secure 2 interface requires adding more URLs to your CSP. Adyen does not maintain a list of all URLs. You can specify to use the redirect flow when creating a session if you do not want to adjust your CSP. \n\n\nSetup steps\nMake sure that you have done the following: Set up your test account.Got an overview of what is required before you accept live payments.\n\n\nInstall an API library\n\n \n Payment server\n \n\n\nWe provide server-side API libraries for several programming languages, available through common package managers, like Gradle and npm, for easier installation and version management. Our API libraries will save you development time, because they:\n\nUse an API version that is up to date.\nHave generated models to help you construct requests.\nSend the request to Adyen using their built-in HTTP client, so you do not have to create your own.\n\n\n\n \n \n \n \n\nCreate a session\n\n \n Payment server\n \n\n\nA payment session is a resource with information about a payment flow initiated by the shopper. This resource has all the information required to handle all the stages of a payment flow. You can configure this resource with information like available payment methods, payment amount, or line items.\nTo create a payment session, make a \/sessions request, including:\n\n\n\nParameter name\nRequired\nDescription\n\n\n\n\nmerchantAccount\n\nYour merchant account name.\n\n\namount\n\nThe\u00a0currency\u00a0and\u00a0value\u00a0of the payment, in minor units. This is used to filter the list of available payment methods to your shopper.\n\n\nreturnUrl\n\nURL to where the shopper should be taken back to after a redirection. If the URL to return to includes non-ASCII characters, like spaces or special letters, URL encode the value. The URL must not include personally identifiable information (PII), for example name or email address. \n\n\nreference\n\nYour unique reference for the payment. Minimum length: three characters.\n\n\ncountryCode\n\nThe shopper's country code. This is used to filter the list of available payment methods to your shopper. If not set, setting the locale is required in the front-end global configuration.\n\n\nchannel\n\nThe platform where the payment is taking place. Use Web.\n\n\nexpiresAt\n\nThe session expiry date in ISO8601 format, for example 2023-11-23T12:25:28Z, or 2023-05-27T20:25:28+08:00. When not specified, the expiry date is set to 1 hour after session creation. You cannot set the session expiry to more than 24 hours after session creation.\n\n\nshopperLocale\n\nThe language that the payment methods will appear in if the locale in your front-end global configuration isn't set. Set it to the shopper's language and country code. The default is en-US.\n\n\nshopperEmail\n\nThe shopper's email address. Strongly recommended because this field is used in a number of risk checks, and for 3D Secure.\n\n\nshopperReference\n\nYour reference to uniquely identify this shopper. Strongly recommended because this field is used in a number of risk checks.\n\n\n\n applicationInfo\n\n\nIf you are building an Adyen solution for multiple merchants, include some basic identifying information, so that we can offer you better support.\n\n\n nativeThreeDS\n\nWhen set to disabled, the redirect flow is used for 3D Secure 2 authentication. This lets you use the redirect flow to avoid adjusting your Content Security Policy (CSP) to load the 3D Secure 2 interfaces.\n\n\n\nHere is an example of how to create a session for a payment of 10 EUR:\nThe response contains:\n\nsessionData: the payment session data you need to pass to your front end.\nid: a unique identifier for the session data.\nThe request body.\n\nAPI error handling\nIf you do not get an HTTP 201 response, use the errorCode field and the list of API error codes to troubleshoot.Prepare your front end\n\n \n Client website\n \n\n\nUse a Component to show each available payment method, and to collect payment details from your shoppers.\nInstall Adyen Web\nUse the Adyen Web npm package, or embed the Adyen Web script and stylesheet into your HTML file:\n\n\n \n \n \n \n\n\nComponents resources are available on the window global variable.\nCreate a DOM element for the Component\nCreate a DOM container element on your checkout page where you want the Component to be rendered and give it a descriptive id. We strongly recommend that you do not put it in an iframe element, because it may cause issues. \nFor example, if you are implementing the Card Component:\n\n \n\nIf you are using JavaScript frameworks such as Vue or React, make sure that you use references instead of selectors and that you do not re-render the DOM element.Create the Component\n\n \n Client website\n \n\n\nComponents consists of:\n\nAdyenCheckout: represents one payment and is linked to a payment session, environment, and amount to be paid.\nComponents: represent the payment method-specific interface a shopper completes their payment with.\n\nWith the AdyenCheckout instance, you can create one or multiple Components.\nCreate your instance of AdyenCheckout\nCreate a global configuration object that you use to create the instance of AdyenCheckout. The object contains configuration parameters and event handlers.\n\n\nAdd configuration parameters.\n\n\n\nParameter name\nRequired\nDescription\n\n\n\n\nsession\n\nThe payment session object from your call to \/sessions. Contains a session.id and session.sessionData.\n\n\nenvironment\n\nUse test. When you are ready to accept live payments, change the value to one of our live environments.\u00a0\n\n\namount\n\nAn object representing the amount to be displayed on the Pay Button. Its properties are value (the amount in the currencies smallest unit, for example cents for EUR) and currency.\n\n\ncountryCode\n\nThe shopper's country code. This is used to filter the list of available payment methods to your shopper.\n\n\nlocale\n\nThe language used in the the Component UI. For possible values, see the list of available languages. By default, this is the either the shopperLocale from your \/sessions request or, if this locale is not available on Components, en-US.\n\n\nshowPayButton\n\nShows or hides a Pay Button for each payment method. Defaults to true. The Pay button triggers the onSubmit event when payment details are valid. If you want to disable the button and then trigger the submit flow on your own, set this to false and call the .submit() method from your own button implementation. PayPal Smart Payment Buttons doesn't support the .submit() method.\n\n\nsecondaryAmount\n\nShows the payment amount in an additional currency on the Pay button. You must do the currency conversion and set the amount. This object has properties: currency: The three-character ISO currency code. value: The amount of the transaction, in minor units. currencyDisplay: Sets the currency formatting. Default: symbol. \n\n\n\n\n\nAdd event handlers, to handle events that get triggered during the payment.\n\n\n\nEvent handler name\nRequired\nDescription\n\n\n\n\nonPaymentCompleted(result, component)\n\nCreate an event handler, called when the payment is completed.\n\n\nonPaymentFailed(result, component)\n\nCreate an event handler, called when the payment failed. A failed payment has result code Cancelled, Error or Refused.\n\n\nonError(error)\n\nCreate an event handler, called when an error occurs in Components.\n\n\nbeforeSubmit(data, component, actions)\n\nCreate an event handler, called when the shopper selects the Pay button. Do not use if you are implementing an additional use case. Allows you to add parameters to the payment request that the Component makes. For example, you can add shopper details like \n billingAddress\n, \n deliveryAddress\n, \n shopperEmail\n, or \n shopperName\n. When the beforeSubmit event is triggered, you need to continue or stop the payment flow using methods available in the event handler: Continue the payment flow (actions.resolve()): You should call the actions.resolve() method regardless of the resultCode, including when the payment is unsuccessful.Stop the payment flow (actions.reject()): Stop the payment flow only when your server-side API request to Adyen failed, or when experiencing network connection issues.\n\n\nonSubmit(state, component, actions)\n\nRequired if you need to update the payment amount after rendering the Component. For this additional use case, you need to integrate additional endpoints. Creates an event handler, called when the shopper selects the Pay button and payment details are valid. When the onSubmit event is triggered, you need to continue or stop the payment flow using methods available in the event handler: Continue the payment flow (actions.resolve()): You should call the actions.resolve() method regardless of the resultCode, including when the payment is unsuccessful.Stop the payment flow (actions.reject()): Stop the payment flow only when your server-side API request to Adyen failed, or when experiencing network connection issues.\n\n\nonActionHandled\n\nCreate an event handler, called when an action, for example a QR code or 3D Secure 2 authentication screen, is shown to the shopper. The following action.type values trigger this callback: threeDS qr await Returns data that contains: componentType: The type of component that shows the action to the shopper. actionDescription: A description of the action shown to the shopper. \n\n\nonAdditionalDetails(state, component, actions)\n\nRequired if you need to confirm an additional action on your server. For this additional use case, you need to integrate additional endpoints. Create an event handler, called when a payment method requires more details, for example for native 3D Secure 2, or native QR code payment methods.\n\n\nonChange(state, component)\n\nCreate an event handler, called when a change happens in the payment form.\n\n\n\nIf an error occurs, the onError event returns an object which contains details about the error:\n\n\n\nError field\nDescription\n\n\n\n\nerror.name\nThe type of error. Use the values it returns to configure localized error messages for your shoppers: NETWORK_ERROR: a call that the Component made to the server has failed, for example because of a timeout, or if there is missing information in the request. Ask the shopper to try again. CANCEL: the shopper canceled the payment. Only applies for payment methods that allow explicit cancellation in the UI, for example Apple Pay or PayPal. IMPLEMENTATION_ERROR: the method or parameter is incorrect or not supported. ERROR: generic catch-all error. Tell the shopper something went wrong and ask them to try paying again, maybe with a different payment method. \n\n\nerror.message\nGives more information for each type of error. The message is technical so you shouldn't show it to your shoppers. For error.name: NETWORK_ERROR, the information in the message field depends on the environment: test: you get a message with a generic error code to help you troubleshoot. live: the message from the response. \n\n\ncomponent\nThe name of the variable where you created the instance of the Component, for example cardComponent.\n\n\n\nThe error object may contain additional fields inherited from the Error() constructor.\nCombine the configuration parameters and event handlers into your global configuration object.\n\n\n\n\n\nUse this global configuration object to create an instance of AdyenCheckout.\n\n\n\n\nInitializing in a reactive framework\nModern frameworks can re-render UI components, which can cause unexpected behavior in the checkout. As a rule, initialize AdyenCheckout and mount your Components only once when you are ready to display the payment methods.\n\n\n\nCreate your instance of Components\n\n\nOptionally create another configuration object for the Component. For some payment methods, you must add additional configuration. You can also add optional configuration for some payment methods. For example, you can add additional configuration for cards. \n\n\n\nConfiguration for payment methods overrides global configuration. In the following example, the onError() configuration for card overrides the global onError() configuration.\n\n\n\n\n\nUse the paymentMethodsResponse property of the AdyenCheckout instance to check the available payment methods.\n\n\nIf the payment method is available, create an instance of the Component and mount it to the container element you created.\nThe Component you use depends on the payment method. You can find which Component to use for which payment method on the payment method pages. For example, for cards, use Card.\n\n\n\n\nThe Github repository also includes a Components map that shows which payment methods use which Components.\n\n\n\n\n \n \n \n \n \n Components methods\n \n \n \n \nThe following methods are available on your instance of Components:\n\n\n\nMethod name\nDescription\n\n\n\n\nmount(selector)\nMounts the the Component into the DOM returned by the selector. The selector must be either a valid CSS selector string or an HTMLElement reference.\n\n\nunmount()\nUnmounts the the Component from the DOM. We recommend to unmount in case the payment amount changes after the initial mount.\n\n\nupdate()\nUpdates the properties and remounts the Component into the DOM, for example, if you want to change the properties of the configuration object after the Component is mounted.\n\n\n\n\n \n \n\n\n \n \n \n \n \n Localization\n \n \n \n \nSupported languages\nWe include UI localizations for some languages. The fields and text are in the files for the included locales.\nTo use a language or localization that isn't included, create your own.\nChange the language\nThe language of the UI is based on the locale set when creating your instance of AdyenCheckout.\nIf no locale is set when creating an instance of AdyenCheckout, the language displayed matches the shopperLocale from your \/sessions request.\nIf neither language is set or supported, the UI language defaults to US English.\nCustomize the localization\nThe text displayed in each localization can be customized, allowing you to replace the default text with your own.\nTo customize a localization:\n\n\nCreate a\u00a0translations\u00a0object on your payments page.\n\n\nIn this object, specify the locale you want to customize, and add key-value pairs corresponding to any text you want to customize.\nThe following example shows how to customize the US English (en-US) translation so that:\n\nShipping Address\u00a0appears instead of Delivery Address (the default en-US text).\nState\u00a0appears instead of\u00a0State or Province (the default en-US text).\n\n\n\n\n\n\nTo use the customized localization in your payment form, provide the following parameters in the configuration object:\n\n\n\nParameter name\nRequired\nDescription\n\n\n\n\nlocale\n\nThe locale you customized in the previous step.\n\n\ntranslations\n\nUse translations\n\n\n\nThe following example shows how to use a customized en-US localization in Drop-in.\n\n\n\n\n\nCreate your custom localization\nTo use a language or localization that we do not included, create your own.\n\n\nCreate a\u00a0translations\u00a0object on your payments page.\n\n\nIn this object, specify the locale you want to create. For example, you can use the locale nl-BE to create a Belgian Dutch localization, and add key-value pairs corresponding to text shown in the UI.\nThe example below shows a translation object for creating a nl-BE localization.\n\n\n\nThe ellipsis (...) in the translations object above indicate the code sample isn't complete. For missing key-value pairs in your configuration, the translation defaults to en-US.\n\n\nTo use your localization in your payment form, provide the following parameters in the configuration object:\n\n\n\nParameter name\nRequired\nDescription\n\n\n\n\nlocale\n\nThe locale you created in the previous step.\n\n\ntranslations\n\nUse translations\n\n\n\nThe example below shows how to use a created localization for nl-BE.\n\n\n\n\n\nText direction\nThe default text direction is left-to-right. Text direction is independent from the locale you set in the configuration object. So even if you set the locale to a right-to-left language, like Arabic, you still need to set the text direction.\nTo change the text direction to right-to-left, use the HTML dir attribute on the parent element for the checkout container.\n\n \n \n\nHandle the payment\n\n \n Client website\n \n\n\nWhen you create and mount the Component, the shopper interacts with the interface to complete the payment. The whole payment flow is handled by the Component you configured and created, except for when a redirect happens.Handle the redirect\nSome payment methods, like iDEAL and some 3D Secure flows, will redirect the shopper back to your website. When the shopper comes back to your website, show them the payment result, based on the result code. To get the resultCode, you can either:\n\nCreate an instance of AdyenCheckout after the redirect, as described below.\nConfirm the redirect result on your server, for which you need to implement an extra API endpoint.\n\nThe shopper comes back to the returnUrl specified when creating the payment session. The returnUrl has query parameters appended to it, which you need to handle the redirect:\n\nsessionId: the unique identifier for the shopper's payment session.\nredirectResult: details you need to submit to handle the redirect.\n\nIf the shopper doesn't return to you website, you do not get a redirectResult. You do not need to do anything to handle the redirect in this case. Instead, wait for the webhook that we send to your server.\n\n \n\nExtract the values from the query string parameters and create a function which handles the redirect result. The function needs to:\n\nCreate an instance of Adyen Checkout using the sessionId value you extracted.\nSubmit the redirectResult value you extracted from the returnUrl.\n\n\n \n\nIf the shopper doesn't return to your website, do not call submitDetails, because the result doesn't change when you attempt the request.\nAfter you submit the redirectResult value, the Component calls the onPaymentCompleted(result, component) event. Use the result code in result.resultCode to inform the shopper.\nTo update your order management system, wait for the webhook that we send to your server.Get the payment outcome\nAfter the Component finishes the payment flow, you can show the shopper the current payment status. Adyen sends a webhook with the outcome of the payment.\nInform the shopper\n\n \n Client website\n \n\n\nDepending on whether the payment was successful, the onPaymentCompleted or onPaymentFailed event is triggered.\nFrom the relevant event, you can get the \n resultCode\n to inform the shopper about the current payment status.\n\n \n \n \n \n \n Optional: Get the result of the payment session on your server\n \n \n \n \n\n \n Payment server\n \n\n\nYou can also get the result of the payment session on your server.\n\nGet the id from the \/sessions response.\nGet sessionResult from the onPaymentCompleted or onPaymentFailed event.\n\nMake a GET \/sessions\/{id}?sessionResult={sessionResult} request including the id and sessionResult. For example:\nThe response includes the result of the payment session (status). For example:\n\n\n\nThe additionalData attributes in the response depend on the type of payment made.\nPossible statuses:\n\n\n\nstatus\nDescription\n\n\n\n\ncompleted\nThe shopper completed the payment. This means that the payment was authorized.\n\n\npaymentPending\nThe shopper is in the process of making the payment. This applies to payment methods with an asynchronous flow.\n\n\ncanceled\nThe shopper canceled the payment.\n\n\nexpired\nThe session expired (default: 1 hour after session creation). Shoppers can no longer complete the payment with this sessionId.\n\n\n\n\n\n\nThe status included in the response doesn't get updated. Do not make the request again to check for payment status updates. Instead, check webhooks or the Transactions list in your Customer Area.\n\n\n \n \n\n\nUpdate your order management system\n\n \n Webhook server\n \n\n\nYou get the outcome of each payment asynchronously, in an AUTHORISATION webhook. Use the merchantReference from the webhook to match it to your order reference.\nFor a successful payment, the event contains success: true.\n\n \n\nFor an unsuccessful payment, you get success: false, and the reason field has details about why the payment was unsuccessful.\n\n \nTest and go live\nBefore going live, use our list of test cards and other payment methods to\u00a0test your integration. We recommend testing each payment method that you intend to offer to your shoppers.\nYou can check the status of a test payment in your\u00a0Customer Area, under Transactions >\u00a0Payments.\nTo debug or troubleshoot test payments, you can also use API logs in your test environment.\nWhen you are ready to go live, you need to:\n\nApply for a live account. Review the process to start accepting payments on Get started with Adyen.\nAssess your PCI DSS compliance by submitting the Self-Assessment Questionnaire-A.\nConfigure your live account.\u00a0\nEnsure your checkout is served over HTTPS. Non-HTTPS connections can result in payment processing failures.\nSubmit a request to add payment methods in your live Customer Area.\nSwitch from test to our live endpoints.\n\nMake sure that all API requests you make for the same payment session use the same live endpoint region. Using different regions for \/payments and \/payments\/details requests may result in errors, for example, when authenticating with 3D Secure 2.\n\n\nLoad Components from one of our live environments and set the environment to match your live endpoints:\n\n\n\nEndpoint region\nValue\n\n\n\n\nEurope (EU) live\nlive\n\n\nUnited States (US) live\nlive-us\n\n\nAustralia (AU) live\nlive-au\n\n\nAsia Pacific & Southeast (APSE) live\nlive-apse\n\n\nIndia (IN) live\nlive-in\n\n\n\n\n\nStaying up to date\nAfter you go live, keep your integration up-to-date. Regular updates help you:\n\nAccess new features as they are released.\nImprove checkout performance and accessibility for your customers.\nUpdate security to protect your business and your data.\nNext steps\n\nrequiredModify paymentsFind out how to cancel, refund, or capture a payment using our API.Add payment methodsLearn about payment methods and how to add them to your account.TokenizationSave shopper payment details for later payments.3D Secure authenticationComply with regulations such as PSD2 SCA in Europe.\n","type":"page","locale":"en","boost":17,"hierarchy":{"lvl0":"Home","lvl1":"Online payments","lvl2":"Build your integration","lvl3":"Sessions flow integration guide"},"hierarchy_url":{"lvl0":"https:\/\/docs.adyen.com\/","lvl1":"https:\/\/docs.adyen.com\/online-payments","lvl2":"https:\/\/docs.adyen.com\/online-payments\/build-your-integration","lvl3":"\/online-payments\/build-your-integration\/sessions-flow"},"levels":4,"category":"Online Payments","category_color":"green","tags":["Web","Components"]},{"url":"https:\/\/docs.adyen.com\/online-payments\/build-your-integration\/sessions-flow?platform=Web&integration=Hosted Checkout","title":"Web Hosted Checkout","content":"Hosted Checkout\nRedirect the shopper to an Adyen-hosted webpage where they make a payment.\nSupported payment methods\nCards, buy now pay later, wallets, and many more.\nFeatures\n\nLowest development time to integrate\nBrand logo customization\nFor more features in addition to making payments and more styling options, we recommend integrating with our Drop-in or Components instead.\n\n \n \n \n \n \n Compare with Drop-in and Components\n \n \n \n \n\n\n\nFeature\nHosted Checkout\nDrop-in\/Components\n\n\n\n\nMake a payment with any available payment method.\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\nApple Pay payments with your own certificate.\n\n\n\n\n\n\n \n \n\n\n\n \n \n \n \n \n Supported payment methods\n \n \n \n \n\nACH Direct Debit\nAffirm\nAfterpay (AU, NZ, US, CA)\nAlipay\nAlipayHK\nApple Pay\nAtome\nBACS Direct Debit\nBancontact Card\nBancontact Mobile (Payconiq)\nBenefit\nBLIK\nBoleto Banc\u00e1rio\nCards, including 3D Secure 1 and 3D Secure 2 authentication\nClearpay\nCredit card installments\nStored card details\nDANA\nDragonpay\nEPS\nFawry\nGCash\nGift cards\nGoogle Pay\nGrabPay\niDEAL\nIndonesian bank transfers and convenience stores\nJapanese convenience stores (Konbini)\/ 7-Eleven Japan\nKakaoPay\nKlarna\nKNET\nMB WAY\nMobilePay\nMOLPay\nMoMo\nMultibanco\nOney 3x4x\nOnline banking Finland\nOnline banking India\nOnline banking Japan\nOnline banking Poland\nNapas card\nOXXO\nPayBright\nPayPal\nPaytm\nPayU\nPix\nRatepay\nSEPA Direct Debit\nSofort\nSwish\nTrustly\nTWINT\nVipps\nWallets India\nWeChat Pay\nZip\n\n \n \n\n\n\nHow it works\nWhen the shopper goes to checkout on your website, you redirect them to a Hosted Checkout page. After they make the payment, the shopper gets redirected to your page, and you show the shopper the outcome of the payment session.\nYou make two API requests to the \/sessions endpoint:\n\nWhen the shopper goes to checkout, make a request to get the URL to the Hosted Checkout page.\nAfter the shopper pays, make a request to get the outcome of the payment session.\n\nRequirements\nBefore you begin to integrate, make sure you have followed the Get started with Adyen guide to:\n\nGet an overview of the steps needed to accept live payments.\nCreate your test account.\n\nAfter you have created your test account:\n\nGet your API key.\nGet your client key.\nSet up webhooks to know the payment outcome.\n\nInstall an API library\n\n\n \n \n \n \n\n\nConfigure your theme\nTo create a theme, you must have one of the following user roles:\n\nMerchant admin\nHosted Checkout and Pay by Link Settings\n\nTo create a new theme:\n\nLog in to your Customer Area and switch to your merchant account if necessary.\nGo to Pay by Link > Themes.\nSelect Create a new theme.\nEnter a Theme name. This name helps you to identify different themes.\nEnter a Display name. This name is visible to the shopper on the Hosted Checkout page.\nUpload a brand logo.\nIf you want this to be the default theme for all Hosted Checkout pages, select Set as default. Available only on the merchant account.\nSelect Create.\n\nGet the theme ID:\n\nGo to Pay by Link > Themes.\nSelect the options icon from the theme.\nSelect Copy theme ID.\nThis copies the theme ID to your system's clipboard.\n\nCreate a payment session\nWhen the shopper goes to checkout, for example by selecting a Checkout button, make a POST \/sessions request from your server, including:\n\n\n\nParameter\nRequired\nDescription\n\n\n\n\namount\n\nThe\u00a0currency\u00a0and\u00a0value\u00a0of the payment, in minor units. This is used to filter the list of available payment methods to your shopper.\n\n\nmerchantAccount\n\nYour merchant account name.\n\n\nmode\n\nhosted\n\n\nthemeId\n\nThe theme ID of the theme to use for the Hosted Checkout page.\n\n\nreturnUrl\n\nURL where to redirect the shopper after they make the payment on the Hosted Checkout page. The URL can contain a maximum of 1024 characters and should include the protocol: http:\/\/ or https:\/\/. You can also include your own additional query parameters, for example, shopper ID or order reference number. If the URL to return to includes non-ASCII characters, like spaces or special letters, URL encode the value. The URL must not include personally identifiable information (PII), for example name or email address. \n\n\nreference\n\nYour unique reference for the payment. Minimum length: three characters.\n\n\ncountryCode\n\nThe shopper's country\/region. This is used to filter the list of available payment methods to your shopper. Format: the two-letter ISO-3166-1 alpha-2 country code. Exception: QZ (Kosovo).\n\n\nexpiresAt\n\nThe expiration time and date of the Hosted Checkout page, in ISO8601 format. The default is 1 hour after creation. You cannot set this to more than 24 hours after creation.\n\n\n nativeThreeDS\n\nWhen set to disabled, the redirect flow is used for 3D Secure 2 authentication. This lets you use the redirect flow to avoid adjusting your Content Security Policy (CSP) to load the 3D Secure 2 interfaces.\n\n\n\nFor example:\n\n \n\nThe \/sessions response includes the URL (url) for the Hosted Checkout page.\nFor example:\n\n \n\nBy default, the Hosted Checkout page expires (expiresAt) 1 hour after it was created.\nRedirect the shopper to the Hosted Checkout page\nRedirect the shopper to the URL (url) from the \/sessions response. The shopper pays on the Hosted Checkout page.\nWhen using Hosted Checkout for a mobile browser integration, use SFSafariViewController for iOS or Chrome Custom Tabs for Android, instead of WebView objects. Some payment methods do not function correctly with WebView objects.\n\nStarting November 1, 2025, you cannot embed the Hosted Checkout page in an iframe. If you are currently using payment links in an iframe, update your integration to comply.\n\nGet the payment outcome\nAfter finishes the payment flow, you can show the shopper the current payment status. Adyen sends a webhook with the outcome of the payment.\n1. Show the result of the payment session\n\n\nAfter the shopper makes the payment, they are redirected back to your website.\n\n\nGet the sessionId and sessionResult that is appended to the return URL from the Hosted Checkout page. Use it to get the outcome of the payment session.\n\n\n\n\n\nMake a GET \/sessions\/{id}?sessionResult={sessionResult} request including the sessionId and sessionResult. For example:\n\n\n\nThe response includes the current status (status) of the payment. For example:\n\n\n\nThe additionalData attributes in the response depend on the type of payment made.\nPossible statuses:\n\n\n\nstatus\nDescription\n\n\n\n\ncompleted\nThe shopper completed the payment.\n\n\npaymentPending\nThe shopper is in the process of making the payment. Applies to payment methods with an asynchronous flow, such as a voucher payment.\n\n\nexpired\nThe session expired. The shopper can no longer use the Hosted Checkout page to make a payment.\n\n\n\n\n\n\nThe status included in the response doesn't change. Do not make the request again to check for payment status updates. Instead, check webhooks or the Transactions list in your Customer Area.\n\nUpdate your order management system\nYou get the outcome of each payment asynchronously, in an AUTHORISATION webhook. Use the merchantReference from the webhook to match it to your order reference.\nFor a successful payment, the event contains success: true.\n\n \n\nFor an unsuccessful payment, you get success: false, and the reason field has details about why the payment was unsuccessful.\n\n \n\nPayment errors and retries\nIf the payment encounters an error, the shopper can retry the payment on the Hosted Checkout page. You receive a webhook for each payment attempt. So, you can receive more than one webhook with the same sessionId.\nFor a payment that encounters an error or fails on a redirect payment method's page, the shopper gets redirected to the Hosted Checkout page to retry the payment.\nExpiration\nThe Hosted Checkout page expires after either:\n\nThe expiresAt from the \/sessions response. The default is 1 hour after it was created.\nOur system determines that the shopper made too many payment attempts.\n\nTest and go live\nBefore going live, use our list of test cards and other payment methods to\u00a0test your integration. We recommend testing each payment method that you intend to offer to your shoppers.\nYou can check the test payments in your\u00a0Customer Area, under Transactions >\u00a0Payments.\nWhen you are ready to go live, you need to:\n\nApply for a live account.\nConfigure your live account.\u00a0\nSubmit a request to add payment methods in your live Customer Area .\nSwitch from test to our live endpoints.\n\nMake sure that all API requests you make for the same payment session use the same live endpoint region. Using different regions for \/payments and \/payments\/details requests may result in errors, for example, when authenticating with 3D Secure 2.\n\n\nSee also\n\nWebhooks\n","type":"page","locale":"en","boost":17,"hierarchy":{"lvl0":"Home","lvl1":"Online payments","lvl2":"Build your integration","lvl3":"Sessions flow integration guide"},"hierarchy_url":{"lvl0":"https:\/\/docs.adyen.com\/","lvl1":"https:\/\/docs.adyen.com\/online-payments","lvl2":"https:\/\/docs.adyen.com\/online-payments\/build-your-integration","lvl3":"\/online-payments\/build-your-integration\/sessions-flow"},"levels":4,"category":"Online Payments","category_color":"green","tags":["Web","Hosted Checkout"]},{"url":"https:\/\/docs.adyen.com\/online-payments\/build-your-integration\/sessions-flow?platform=iOS&integration=Drop-in","title":"iOS Drop-in","content":"iOS Drop-in\nRender a list of available payment methods anywhere in your app.\nSupported payment methods\nCards, buy now pay later, wallets, and many more.\nSee all supported payment methods\nFeatures\n\nLowest development time to integrate payment methods\nUI styling customization for the list of payment methods\nAdding payment methods to the list requires no extra development time\n3D Secure 2 support built in\nRequirements\nBefore you begin, take into account the following requirements, limitations, and preparations.\n\n\n\nRequirement\nDescription\n\n\n\n\nIntegration type\nUse this information to build an online payments integration.\n\n\nCustomer Area roles\nMake sure that you have the following roles: Merchant admin role Manage API credentials\n\n\nAdyen API credentials\nMake sure that you have created the following: API credential API key Client key\n\n\nAdyen API credential roles\nMake sure that you have the roles for payments that are assigned by default.\n\n\nWebhooks\nSubscribe to the following webhooks: Standard webhook with default event codes\n\n\nSetup steps\nMake sure that you have done the following: Set up your test account.Got an overview of what is required before you accept live payments.\n\n\nHow it works\nFor a Drop-in integration, you must implement the following parts:\n\nYour payment server: sends the API request to create a payment session. \n\nYour client app: shows the Drop-in UI where the shopper makes the payment. Drop-in uses the data from the API responses to handle the payment flow and additional actions on your client app. \nYour webhook server: receives webhooks that include the outcome of each payment.\n\nThe parts of your integration work together to complete the payment flow:\n\n\nThe shopper goes to the checkout page.\n\n\nYour server uses the shopper's country and currency information from your client to create a payment session.\n\n\nYour client creates an instance of Drop-in using the session data from the server.\n\n\nDrop-in shows the available payment methods, collects the shopper's payment details, handles additional actions, and presents the payment result to the shopper.\n\n\nYour webhook server receives the notification containing the payment outcome.\n\n\n\nIf you are integrating these parts separately, you can start at the corresponding part of this integration guide:\n\n\n Payment server\n Go to the integration steps for your server.\n Client app\n Go to the integration steps for your client app.\n Webhook server\n Go to the integration steps for your webhook server.\nInstall an API library\n\n \n Payment server\n \n\n\nWe provide server-side API libraries for several programming languages, available through common package managers, like Gradle and npm, for easier installation and version management. Our API libraries will save you development time, because they:\n\nUse an API version that is up to date.\nHave generated models to help you construct requests.\nSend the request to Adyen using their built-in HTTP client, so you do not have to create your own.\n\n\n\n \n \n \n \n\nCreate a payment session\n\n \n Payment server\n \n\n\nA payment session is a resource with information about a payment flow initiated by the shopper. This resource has all the information required to handle all the stages of a payment flow. You can configure this resource with information like available payment methods, payment amount, or line items.\nTo create a payment session, make a \/sessions request, including:\n\n\n\nParameter name\nRequired\nDescription\n\n\n\n\nmerchantAccount\n\nYour merchant account name.\n\n\namount\n\nThe\u00a0currency\u00a0and\u00a0value\u00a0of the payment, in minor units. This is used to filter the list of available payment methods to your shopper.\n\n\nreturnUrl\n\nThe URL the shopper should be taken back to after a redirection. Use the custom URL for your app, for example, my-app:\/\/adyen, to take the shopper back to your app after they complete the payment outside of your app. For more information on setting a custom URL scheme, read the Apple Developer documentation. The URL can contain a maximum of 1024 characters. You can also include your own additional query parameters, for example, shopper ID or order reference number. If the URL to return to includes non-ASCII characters, like spaces or special letters, URL encode the value. The URL must not include personally identifiable information (PII), for example name or email address. \n\n\nreference\n\nYour unique reference for the payment. Minimum length: three characters.\n\n\nexpiresAt\n\nThe session expiry date in ISO8601 format, for example 2023-11-23T12:25:28Z, or 2023-05-27T20:25:28+08:00. When not specified, the expiry date is set to 1 hour after session creation. You cannot set the session expiry to more than 24 hours after session creation.\n\n\ncountryCode\n\nThe shopper's country\/region. This is used to filter the list of available payment methods to your shopper. Format: the two-letter ISO-3166-1 alpha-2 country code. Exception: QZ (Kosovo).\n\n\nchannel\n\nThe platform where the payment is taking place. Use iOS. Strongly recommended because this field is used for 3D Secure.\n\n\nshopperLocale\n\nThe language that the payment methods will appear in. Set it to the shopper's language and country code. The default is en-US. The client app. also uses this locale if it is available.\n\n\nshopperEmail\n\nThe shopper's email address. Strongly recommended because this field is used in a number of risk checks, and for 3D Secure.\n\n\nshopperReference\n\nYour reference to uniquely identify this shopper. Minimum length: three characters. Do not include personally identifiable information, for example name or email address. Strongly recommended because this field is used in a number of risk checks.\n\n\n\n applicationInfo\n\n\nIf you are building an Adyen solution for multiple merchants, include some basic identifying information, so that we can offer you better support. For more information, refer to Building Adyen solutions.\n\n\n\nThe following example shows how to create a session for a payment of 10 EUR:\n\n \n\nThe response contains:\n\nsessionData: the payment session data you need to pass to your client app.\nid: a unique identifier for the session data.\nThe request body.\n\n\n \n\nAPI error handling\nIf you do not get an HTTP 201 response, use the errorCode field and the list of API error codes to troubleshoot.Set up Drop-in\n\n \n Client app\n \n\n\n1. Get Adyen iOS\nChoose how you want to install the Adyen iOS client-side library:\n\n\n \n \n \n \n\n\n2. Create the context\nFirst, create an instance of APIContext that contains:\n\nThe client key.\nThe environment setting.\n\nThen, create an instance of AdyenContext that contains:\n\nThe instance of APIContext.\nPayment information.\n\n\n \n\n3. Create a configuration object\nUse the fields from the \/sessions response to configure and create an instance of AdyenSession:\n\n \n\n4. Initialize AdyenSession\nCall the static initialize function of the AdyenSession, setting:\n\nconfiguration: the configuration object you created in the previous step.\ndelegate: your delegate object. For example, self.\npresentationDelegate: your delegate object. For example, self.\n\nThis asynchronously creates and returns an instance of the session.\n\n \n5. Configure Drop-in\nCreate a Drop-in configuration object (DropInComponent.Configuration). Some payment methods require additional configuration, and you can add optional configuration. \n\n \n6. Initialize the DropInComponent class\nSet the instance of AdyenSession you created in the previous step as the delegate and, if you accept gift cards, partialPaymentDelegate of the DropInComponent instance.\n\n \n7. Show Drop-in in your app\nCall the present method, passing the configured viewController.\n\n \n\nSome payment methods require additional action from the shopper such as authenticating a payment with 3D Secure, or to switch to another app to complete the payment. Your instance of AdyenSession handles the actions to complete the payment.\nIf the action type is redirect, you need to handle the redirect result.8. Handle the redirect\nIf the action field returns redirect, the shopper is redirected to an external site or to another application to complete the payment. You then need to inform the Drop-in when the shopper returns to your app.\nThe way to handle the redirect depends on if you use Custom or Universal URLs and the way you manage your app\u2019s lifecycle events:\n\n\n \n \n \n \n\n9. Handle the result\nDrop-in handles a result code or an error object.Result code\nWhen the payment flow is finished, your instance of AdyenSession calls the didComplete method.\nImplement the following in your Drop-in configuration object.\n\n \n\nUse the resultCode to inform your shopper about the current payment status. Possible values:\n\n\n\nresultCode\nDescription\nAction to take\n\n\n\n\nauthorised\nThe payment was successfully authorised.\nInform the shopper that the payment was successful.\n\n\nrefused\nThe payment was refused.The response also contains a refusal reason that indicates why it was refused.\nInform the shopper that the payment was refused.\n\n\npending\nThe final status of the payment isn't available yet. This is common for payments with an asynchronous flow, such as Boleto or iDEAL.\nInform the shopper that you have received their order, and are waiting for them to complete the payment.When the shopper completes the payment, you get a webhook with the updated payment status.\n\n\ncancelled\nThe payment was cancelled (by either the shopper or your system) before processing was completed.\nInform the shopper that the payment was cancelled.\n\n\nerror\nAn error occurred during payment processing.The response also contains an error code that gives more details about the error.\nInform the shopper that an error occurred during payment processing.\n\n\nreceived\nThe payment request was received, but the final status of the payment isn't available yet. Some payments, like SEPA Direct Debit, take time to process.\nInform the shopper that you have received their order, and are waiting for the final payment status.When the updated payment status is available, you get a webhook.\n\n\npresentToShopper\nShow the voucher or QR code to the shopper.\nInform the shopper that you have received their order, and are waiting for them to complete the payment.When the shopper completes the payment, you get a webhook with the updated payment status.\n\n\nError\nIf an error occurs during the payment flow, your instance of AdyenSession calls the didFail method containing the error.\nImplement the following in your Drop-in configuration object.\n\n \n\nThe error tells you the type of error and contains a message with details. Use the information to tell the shopper what happened and use the message to troubleshoot the error.Get the payment outcome\nAfter Drop-in finishes the payment flow, you can show the shopper the current payment status. Adyen sends a webhook with the outcome of the payment.\nInform the shopper\n\n \n Client app\n \n\n\nFrom the didComplete method, you can get the \n resultCode\n to inform the shopper about the current payment status.\n\n \n \n \n \n \n Optional: Get the result of the payment session on your server\n \n \n \n \n\n \n Payment server\n \n\n\nYou can also get the result of the payment session on your server.\n\nGet the id from the \/sessions response.\nGet sessionResult from the onPaymentCompleted event.\n\nMake a GET \/sessions\/{id}?sessionResult={sessionResult} request including the id and sessionResult. For example:\n\n\n\nThe response includes the result of the payment session (status). For example:\n\n\n\nPossible statuses:\n\n\n\nstatus\nDescription\n\n\n\n\ncompleted\nThe shopper completed the payment. This means that the payment was authorized.\n\n\npaymentPending\nThe shopper is in the process of making the payment. This applies to payment methods with an asynchronous flow.\n\n\ncanceled\nThe shopper canceled the payment.\n\n\nexpired\nThe session expired (default: 1 hour after session creation). Shoppers can no longer complete the payment with this sessionId.\n\n\n\n\n\n\nThe status included in the response doesn't get updated. Do not make the request again to check for payment status updates. Instead, check webhooks or the Transactions list in your Customer Area.\n\n\n \n \n\n\nUpdate your order management system\n\n \n Webhook server\n \n\n\nYou get the outcome of each payment asynchronously, in an AUTHORISATION webhook. Use the merchantReference from the webhook to match it to your order reference.\nFor a successful payment, the event contains success: true.\n\n \n\nFor an unsuccessful payment, you get success: false, and the reason field has details about why the payment was unsuccessful.\n\n \nTest and go live\nBefore going live, use our list of test cards and other payment methods to\u00a0test your integration. We recommend testing each payment method that you intend to offer to your shoppers.\nYou can check the status of a test payment in your\u00a0Customer Area, under Transactions >\u00a0Payments.\nTo debug or troubleshoot test payments, you can also use API logs in your test environment.\nWhen you are ready to go live, you need to:\n\nApply for a live account. Review the process to start accepting payments on Get started with Adyen.\nAssess your PCI DSS compliance by submitting the Self-Assessment Questionnaire-A.\nConfigure your live account.\u00a0\nSubmit a request to add payment methods in your live Customer Area .\nSwitch from test to our live endpoints.\n\nMake sure that all API requests you make for the same payment session use the same live endpoint region. Using different regions for \/payments and \/payments\/details requests may result in errors, for example, when authenticating with 3D Secure 2.\n\n\nLoad Drop-in from one of our live environments and set the environment to match your live endpoints:\n\n\n\nEndpoint region\nValue\n\n\n\n\nEurope (EU) live\nliveEurope\n\n\nUnited States (US) live\nliveUnitedStates\n\n\nAustralia (AU) live\nliveAustralia\n\n\nAsia Pacific & Southeast (APSE) live\nliveApse\n\n\nIndia (IN) live\nliveIndia\n\n\n\n\nOptional configuration\n\n \n Client app\n \n\n\nYou can set additional configuration on the Drop-in configuration.\n\n\n\nParameter name\nDescription\n\n\n\n\nshopperInformation\nPrefilled shopper information.\n\n\nlocalizationParameters\nLocalization parameters, like custom placeholders in other languages.\n\n\nallowsSkippingPaymentList\nIf you support only one non-instant payment method, set to true to disable showing the list of payment methods in the app view. Default: false.\n\n\nallowPreselectedPaymentView\nShow the preselected stored payment method in the app view. Default: true.\n\n\n\nThe following example shows how to set an optional configuration parameter:\n\n \n\n \n \n \n \n \n Localization\n \n \n \n \niOS Drop-in supports the languages listed here.\nTo customize a localization, add a new localizable.strings file for the language that you need. You can also override existing strings by using the same keys.\nFor example, to override the cardholder name field title, set the following on your localizable.strings file:\n\"adyen.card.nameItem.title\" = \"Your cardholder name\";\nTo find localized strings, the library first checks your custom localizable.strings file, and then the default Adyen file.\nYou can use LocalizationParameters to customize the localization file name, bundle, or the separator for translation strings.\nFor example, if you store translations in MyLocalizable.strings files in the shared bundle CommonBundle:\nlet localizationParameters = LocalizationParameters(bundle: commonBundle, tableName: \"MyLocalizable\")\ndropInComponent.localizationParameters = localizationParameters\n\n \n \n\nNext steps\n\nrequiredModify paymentsFind out how to cancel, refund, or capture a payment using our API.Add payment methodsLearn about payment methods and how to add them to your account.TokenizationSave shopper payment details for later payments.3D Secure authenticationComply with regulations such as PSD2 SCA in Europe.\n","type":"page","locale":"en","boost":17,"hierarchy":{"lvl0":"Home","lvl1":"Online payments","lvl2":"Build your integration","lvl3":"Sessions flow integration guide"},"hierarchy_url":{"lvl0":"https:\/\/docs.adyen.com\/","lvl1":"https:\/\/docs.adyen.com\/online-payments","lvl2":"https:\/\/docs.adyen.com\/online-payments\/build-your-integration","lvl3":"\/online-payments\/build-your-integration\/sessions-flow"},"levels":4,"category":"Online Payments","category_color":"green","tags":["iOS","Drop-in"]},{"url":"https:\/\/docs.adyen.com\/online-payments\/build-your-integration\/sessions-flow?platform=iOS&integration=Components","title":"iOS Components","content":"iOS Components\nRender individual payment methods anywhere in your app.\nSupported payment methods\nCards, buy now pay later, wallets, and many more.\nSee all supported payment methods\nFeatures\n\nLow development time to integrate each payment method component\nUI styling customization for each payment method\nFlexibility to add payment method components with configuration for each\n3D Secure 2 support using the 3D Secure 2 Component\nRequirements\nBefore you begin, take into account the following requirements, limitations, and preparations.\n\n\n\nRequirement\nDescription\n\n\n\n\nIntegration type\nUse this information to build an online payments integration.\n\n\nCustomer Area roles\nMake sure that you have the following roles: Merchant admin role Manage API credentials\n\n\nAdyen API credentials\nMake sure that you have created the following: API credential API key Client key\n\n\nAdyen API credential roles\nMake sure that you have the roles for payments that are assigned by default.\n\n\nWebhooks\nSubscribe to the following webhooks: Standard webhook with default event codes\n\n\nSetup steps\nMake sure that you have done the following: Set up your test account.Got an overview of what is required before you accept live payments.\n\n\nHow it works\nFor a Components integration, you must implement the following parts:\n\nYour payment server: sends the API request to create a payment session. \n\nYour client app: shows the the Component UI where the shopper makes the payment. The Component uses the data from the API responses to handle the payment flow and additional actions on your client app. \nYour webhook server: receives webhooks that include the outcome of each payment.\n\nThe parts of your integration work together to complete the payment flow:\n\n\nThe shopper goes to the checkout page.\n\n\nYour server uses the shopper's country and currency information from your client to create a payment session.\n\n\nYour client creates an instance of the Component using the session data from the server.\n\n\nThe Component collects the shopper's payment details, handles additional actions, and presents the payment result to the shopper.\n\n\nYour webhook server receives the notification containing the payment outcome.\n\n\n\nIf you are integrating these parts separately, you can start at the corresponding part of this integration guide:\n\n\n Payment server\n Go to the integration steps for your server.\n Client app\n Go to the integration steps for your client app.\n Webhook server\n Go to the integration steps for your webhook server.\nInstall an API library\n\n \n Payment server\n \n\n\nWe provide server-side API libraries for several programming languages, available through common package managers, like Gradle and npm, for easier installation and version management. Our API libraries will save you development time, because they:\n\nUse an API version that is up to date.\nHave generated models to help you construct requests.\nSend the request to Adyen using their built-in HTTP client, so you do not have to create your own.\n\n\n\n \n \n \n \n\nCreate a payment session\n\n \n Payment server\n \n\n\nA payment session is a resource with information about a payment flow initiated by the shopper. This resource has all the information required to handle all the stages of a payment flow. You can configure this resource with information like available payment methods, payment amount, or line items.\nTo create a payment session, make a \/sessions request, including:\n\n\n\nParameter name\nRequired\nDescription\n\n\n\n\nmerchantAccount\n\nYour merchant account name.\n\n\namount\n\nThe\u00a0currency\u00a0and\u00a0value\u00a0of the payment, in minor units. This is used to filter the list of available payment methods to your shopper.\n\n\nreturnUrl\n\nThe URL the shopper should be taken back to after a redirection. Use the custom URL for your app, for example, my-app:\/\/adyen, to take the shopper back to your app after they complete the payment outside of your app. For more information on setting a custom URL scheme, read the Apple Developer documentation. The URL can contain a maximum of 1024 characters. You can also include your own additional query parameters, for example, shopper ID or order reference number. If the URL to return to includes non-ASCII characters, like spaces or special letters, URL encode the value. The URL must not include personally identifiable information (PII), for example name or email address. \n\n\nreference\n\nYour unique reference for the payment. Minimum length: three characters.\n\n\nexpiresAt\n\nThe session expiry date in ISO8601 format, for example 2023-11-23T12:25:28Z, or 2023-05-27T20:25:28+08:00. When not specified, the expiry date is set to 1 hour after session creation. You cannot set the session expiry to more than 24 hours after session creation.\n\n\ncountryCode\n\nThe shopper's country\/region. This is used to filter the list of available payment methods to your shopper. Format: the two-letter ISO-3166-1 alpha-2 country code. Exception: QZ (Kosovo).\n\n\nchannel\n\nThe platform where the payment is taking place. Use iOS. Strongly recommended because this field is used for 3D Secure.\n\n\nshopperLocale\n\nThe language that the payment methods will appear in. Set it to the shopper's language and country code. The default is en-US. The client app. also uses this locale if it is available.\n\n\nshopperEmail\n\nThe shopper's email address. Strongly recommended because this field is used in a number of risk checks, and for 3D Secure.\n\n\nshopperReference\n\nYour reference to uniquely identify this shopper. Minimum length: three characters. Do not include personally identifiable information, for example name or email address. Strongly recommended because this field is used in a number of risk checks.\n\n\napplicationInfo\n\nIf you are building an Adyen solution for multiple merchants, include some basic identifying information, so that we can offer you better support. For more information, refer to Building Adyen solutions.\n\n\n\nThe following example shows how to create a session for a payment of 10 EUR:\n\n \n\nThe response contains:\n\nsessionData: the payment session data you need to pass to your client app.\nid: a unique identifier for the session data.\nThe request body.\n\n\n \n\nAPI error handling\nIf you do not get an HTTP 201 response, use the errorCode field and the list of API error codes to troubleshoot.Set up Components\n\n \n Client app\n \n\n\n1. Get Adyen iOS\nChoose how you want to install the Adyen iOS client-side library:\n\n\n \n \n \n \n\n\n2. Create the context\nFirst, create an instance of APIContext that contains:\n\nThe client key.\nThe environment setting.\n\nThen, create an instance of AdyenContext that contains:\n\nThe instance of APIContext.\nPayment information.\n\n\n \n\n3. Create a configuration object\nUse the fields from the \/sessions response to configure and create an instance of AdyenSession:\n\n \n\n4. Initialize AdyenSession\nCall the static initialize function of the AdyenSession, setting:\n\nconfiguration: the configuration object you created in the previous step.\ndelegate: your delegate object. For example, self.\npresentationDelegate: your delegate object. For example, self.\n\nThis asynchronously creates and returns an instance of the session.\n\n \n5. Configure the Component\nThe Component shows the UI elements such as the payment form and pay button. \nCreate and set the following:\n\nA configuration object for the payment method. For example, cardComponentConfiguration for the Card Component. Initialize it with CardComponent.Configuration().\n\nOptionally, custom localization parameters.\nOptionally, payment method specific parameters. For example, showsHolderNameField for the Card Component. \n\nOther optional configuration.\n\n\n \n6. Initialize the Component\nWhen the shopper selects a payment method, initialize the matching payment method Component.\n\n\nCreate the Component, passing the following configurations:\n\npaymentMethod: the payment method object that you created.\ncontext: the AdyenContext that you created.\nconfiguration: the configuration object that you created.\n\n\n\nSet the instance of AdyenSession you created in the previous step as the delegate.\nThe following example shows how to create the Card Component and set the instance of AdyenSession you created as the delegate:\n\n\n\n\n7. Show the Component in your app\nCall the present method, passing the configured viewController.\nThe following example shows how to present the Card Component:\n\n \n\nSome payment methods require additional action from the shopper such as authenticating a payment with 3D Secure, or to switch to another app to complete the payment. Your instance of AdyenSession handles the actions to complete the payment.\nIf the action type is redirect, you need to handle the redirect result.8. Handle the redirect\nIf the action field returns redirect, the shopper is redirected to an external site or to another application to complete the payment. You then need to inform the Component when the shopper returns to your app.\nThe way to handle the redirect depends on if you use Custom or Universal URLs and the way you manage your app\u2019s lifecycle events:\n\n\n \n \n \n \n\n9. Handle the result\nThe Component handles a result code or an error object.Result code\nWhen the payment flow is finished, your instance of AdyenSession calls the didComplete method.\nImplement the following in your Component configuration object.\n\n \n\nUse the resultCode to inform your shopper about the current payment status. Possible values:\n\n\n\nresultCode\nDescription\nAction to take\n\n\n\n\nauthorised\nThe payment was successfully authorised.\nInform the shopper that the payment was successful.\n\n\nrefused\nThe payment was refused.The response also contains a refusal reason that indicates why it was refused.\nInform the shopper that the payment was refused.\n\n\npending\nThe final status of the payment isn't available yet. This is common for payments with an asynchronous flow, such as Boleto or iDEAL.\nInform the shopper that you have received their order, and are waiting for them to complete the payment.When the shopper completes the payment, you get a webhook with the updated payment status.\n\n\ncancelled\nThe payment was cancelled (by either the shopper or your system) before processing was completed.\nInform the shopper that the payment was cancelled.\n\n\nerror\nAn error occurred during payment processing.The response also contains an error code that gives more details about the error.\nInform the shopper that an error occurred during payment processing.\n\n\nreceived\nThe payment request was received, but the final status of the payment isn't available yet. Some payments, like SEPA Direct Debit, take time to process.\nInform the shopper that you have received their order, and are waiting for the final payment status.When the updated payment status is available, you get a webhook.\n\n\npresentToShopper\nShow the voucher or QR code to the shopper.\nInform the shopper that you have received their order, and are waiting for them to complete the payment.When the shopper completes the payment, you get a webhook with the updated payment status.\n\n\nError\nIf an error occurs during the payment flow, your instance of AdyenSession calls the didFail method containing the error.\nImplement the following in your Component configuration object.\n\n \n\nThe error tells you the type of error and contains a message with details. Use the information to tell the shopper what happened and use the message to troubleshoot the error.Get the payment outcome\nAfter the Component finishes the payment flow, you can show the shopper the current payment status. Adyen sends a webhook with the outcome of the payment.\nInform the shopper\n\n \n Client app\n \n\n\nFrom the didComplete method, you can get the resultCode to inform the shopper about the current payment status.\n\n \n \n \n \n \n Optional: Get the result of the payment session on your server\n \n \n \n \n\n \n Payment server\n \n\n\nYou can also get the result of the payment session on your server.\n\nGet the id from the \/sessions response.\nGet sessionResult from the onPaymentCompleted event.\n\nMake a GET \/sessions\/{id}?sessionResult={sessionResult} request including the id and sessionResult. For example:\n\n\n\nThe response includes the result of the payment session (status). For example:\n\n\n\nPossible statuses:\n\n\n\nstatus\nDescription\n\n\n\n\ncompleted\nThe shopper completed the payment. This means that the payment was authorized.\n\n\npaymentPending\nThe shopper is in the process of making the payment. This applies to payment methods with an asynchronous flow.\n\n\ncanceled\nThe shopper canceled the payment.\n\n\nexpired\nThe session expired (default: 1 hour after session creation). Shoppers can no longer complete the payment with this sessionId.\n\n\n\n\n\n\nThe status included in the response doesn't get updated. Do not make the request again to check for payment status updates. Instead, check webhooks or the Transactions list in your Customer Area.\n\n\n \n \n\n\nUpdate your order management system\n\n \n Webhook server\n \n\n\nYou get the outcome of each payment asynchronously, in an AUTHORISATION webhook. Use the merchantReference from the webhook to match it to your order reference.\nFor a successful payment, the event contains success: true.\n\n \n\nFor an unsuccessful payment, you get success: false, and the reason field has details about why the payment was unsuccessful.\n\n \nTest and go live\nBefore going live, use our list of test cards and other payment methods to\u00a0test your integration. We recommend testing each payment method that you intend to offer to your shoppers.\nYou can check the status of a test payment in your\u00a0Customer Area, under Transactions >\u00a0Payments.\nTo debug or troubleshoot test payments, you can also use API logs in your test environment.\nWhen you are ready to go live, you need to:\n\nApply for a live account. Review the process to start accepting payments on Get started with Adyen.\nAssess your PCI DSS compliance by submitting the Self-Assessment Questionnaire-A.\nConfigure your live account.\u00a0\nSubmit a request to add payment methods in your live Customer Area .\nSwitch from test to our live endpoints.\n\nMake sure that all API requests you make for the same payment session use the same live endpoint region. Using different regions for \/payments and \/payments\/details requests may result in errors, for example, when authenticating with 3D Secure 2.\n\n\nLoad Components from one of our live environments and set the environment to match your live endpoints:\n\n\n\nEndpoint region\nValue\n\n\n\n\nEurope (EU) live\nliveEurope\n\n\nUnited States (US) live\nliveUnitedStates\n\n\nAustralia (AU) live\nliveAustralia\n\n\nAsia Pacific & Southeast (APSE) live\nliveApse\n\n\nIndia (IN) live\nliveIndia\n\n\n\n\nOptional configuration\n\n \n Client app\n \n\n\nYou can set additional configuration on the Component configuration.\n\n\n\nParameter name\nDescription\n\n\n\n\nshowsSubmitButton\nSet to false to hide the default pay button, so that you can implement a custom button instead. Default: true.\n\n\nshopperInformation\nPrefilled shopper information.\n\n\nlocalizationParameters\nLocalization parameters, like custom placeholders in other languages.\n\n\nstyle\nCustom styling of the UI.\n\n\n\nThe following example shows how to set optional configuration parameters on the Card Component.\n\n \n\nImplement a custom pay button\nTo implement a custom pay button, hide the default one and use the included functions to validate and submit payment data.\n\nThis is not supported for Apple Pay and BACS Direct Debit.\n\n\nWhen you create the configuration object, set showsSubmitButton to false. \nInitialize the Component.\nYou can optionally show a confirmation page to the shopper, where payment data is validated.\nCreate and show your custom button.\n\nYou can use the following functions.\n\n\n\nFunction\nRequired\nDescription\n\n\n\n\nvalidate()\n\nValidates the payment data.\n\n\nsubmit()\n\nMakes a \/payments request to submit the payment data.\n\n\n\nThe following example shows the Card Component with a custom pay button.\n\n \n\n \n \n \n \n \n Localization\n \n \n \n \niOS Components support the languages listed here.\nTo customize a localization, add a new localizable.strings file for the language that you need. You can also override existing strings by using the same keys.\nFor example, to override the cardholder name field title, set the following on your localizable.strings file:\n\"adyen.card.nameItem.title\" = \"Your cardholder name\";\n\nFor more information on iOS Components classes, see our reference documentation page.\n\nTo find localized strings, the library first checks your custom localizable.strings file, and then the default Adyen file.\nYou can use LocalizationParameters to customize the localization file name, bundle, or the separator for translation strings.\nFor example, if you store translations in MyLocalizable.strings files in the shared bundle CommonBundle:\nlet localizationParameters = LocalizationParameters(bundle: commonBundle, tableName: \"MyLocalizable\")\ncardComponentConfiguration.localizationParameters = localizationParameters\n\n \n \n\nNext steps\n\nrequiredModify paymentsFind out how to cancel, refund, or capture a payment using our API.Add payment methodsLearn about payment methods and how to add them to your account.TokenizationSave shopper payment details for later payments.3D Secure authenticationComply with regulations such as PSD2 SCA in Europe.\n","type":"page","locale":"en","boost":17,"hierarchy":{"lvl0":"Home","lvl1":"Online payments","lvl2":"Build your integration","lvl3":"Sessions flow integration guide"},"hierarchy_url":{"lvl0":"https:\/\/docs.adyen.com\/","lvl1":"https:\/\/docs.adyen.com\/online-payments","lvl2":"https:\/\/docs.adyen.com\/online-payments\/build-your-integration","lvl3":"\/online-payments\/build-your-integration\/sessions-flow"},"levels":4,"category":"Online Payments","category_color":"green","tags":["iOS","Components"]},{"url":"https:\/\/docs.adyen.com\/online-payments\/build-your-integration\/sessions-flow?platform=Android&integration=Drop-in","title":"Android Drop-in","content":"Android Drop-in\nRender a list of available payment methods anywhere in your app.\nSupported payment methods\nCards, buy now pay later, wallets, and many more.\nSee all supported payment methods\nFeatures\n\nLowest development time to integrate payment methods\nUI styling customization for the list of payment methods\nAdding payment methods to the list requires no extra development time\n3D Secure 2 support built in\nRequirements\nBefore you begin to integrate, make sure you have followed the Get started with Adyen guide to:\n\nGet an overview of the steps needed to accept live payments.\nCreate your test account.\n\nAfter you have created your test account:\n\nGet your API key.\nGet your client key.\nSet up webhooks to know the payment outcome.\nHow it works\nFor a Drop-in integration, you must implement the following parts:\n\nYour payment server: sends the API request to create a payment session. \n\nYour client app: shows the Drop-in UI where the shopper makes the payment. Drop-in uses the data from the API responses to handle the payment flow and additional actions on your client app. \nYour webhook server: receives webhooks that include the outcome of each payment.\n\nThe parts of your integration work together to complete the payment flow:\n\n\nThe shopper goes to the checkout page.\n\n\nYour server uses the shopper's country or region and currency information from your client to create a payment session.\n\n\nYour client creates an instance of Drop-in using the session data from the server.\n\n\nDrop-in shows the available payment methods, collects the shopper's payment details, handles additional actions, and presents the payment result to the shopper.\n\n\nYour webhook server receives the event containing the payment outcome.\n\n\n\n \n\nIf you are integrating these parts separately, you can start at the corresponding part of this integration guide:\n\n\n Payment server\n Go to the integration steps for your server.\n Client app\n Go to the integration steps for your client app.\n Webhook server\n Go to the integration steps for your webhook server.\nInstall an API library\n\n \n Payment server\n \n\n\nWe provide server-side API libraries for several programming languages, available through common package managers, like Gradle and npm, for easier installation and version management. Our API libraries will save you development time, because they:\n\nUse an API version that is up to date.\nHave generated models to help you construct requests.\nSend the request to Adyen using their built-in HTTP client, so you do not have to create your own.\n\n\n\n \n \n \n \n\nCreate a payment session\n\n \n Payment server\n \n\n\nA payment session is a resource with information about a payment flow initiated by the shopper. This resource has all the information required to handle all the stages of a payment flow. You can configure this resource with information like available payment methods, payment amount, or line items.\nTo create a payment session, make a \/sessions request, including:\n\n\n\nParameter name\nRequired\nDescription\n\n\n\n\nmerchantAccount\n\nYour merchant account name.\n\n\namount\n\nThe\u00a0currency\u00a0and\u00a0value\u00a0of the payment, in minor units. This is used to filter the list of available payment methods to your shopper.\n\n\nreturnUrl\n\nURL to where the shopper should be taken back to after a redirection. The URL can contain a maximum of 1024 characters. You can include your own additional query parameters, for example, shopper ID or order reference number. Get this URL from Drop-in in the RedirectComponent.getReturnUrl(context). If the URL to return to includes non-ASCII characters, like spaces or special letters, URL encode the value. The URL must not include personally identifiable information (PII), for example name or email address. \n\n\nreference\n\nYour unique reference for the payment. Minimum length: three characters.\n\n\nexpiresAt\n\nThe session expiry date in ISO8601 format, for example 2023-11-23T12:25:28Z, or 2023-05-27T20:25:28+08:00. When not specified, the expiry date is set to 1 hour after session creation. You cannot set the session expiry to more than 24 hours after session creation.\n\n\ncountryCode\n\nThe shopper's country\/region. This is used to filter the list of available payment methods to your shopper. Format: the two-letter ISO-3166-1 alpha-2 country code. Exception: QZ (Kosovo).\n\n\nchannel\n\nThe platform where the payment is taking place. Use Android. Strongly recommended because this field is used for 3D Secure.\n\n\nshopperLocale\n\nThe language that the payment methods will appear in. Set it to the shopper's language and country code. The default is en-US. The client app. also uses this locale if it is available.\n\n\nshopperEmail\n\nThe shopper's email address. Strongly recommended because this field is used in a number of risk checks, and for 3D Secure.\n\n\nshopperReference\n\nYour reference to uniquely identify this shopper. Strongly recommended because this field is used in a number of risk checks.\n\n\n\n applicationInfo\n\n\nIf you are building an Adyen solution for multiple merchants, include some basic identifying information, so that we can offer you better support. For more information, refer to Building Adyen solutions.\n\n\n\nHere is an example of how to create a session for a payment of 10 EUR:\n\n \n\nThe response contains:\n\nsessionData: the payment session data you need to pass to your client app.\nid: a unique identifier for the session data.\nThe request body.\n\n\n \n\nYou must pass the response to your client app to create the checkout session.\nAPI error handling\nIf you do not get an HTTP 201 response, use the errorCode field and the list of API error codes to troubleshoot.Set up Drop-in\n\n \n Client app\n \n\n\n1: Import the library\nThe default implementation is with Jetpack Compose, but you can import the library without Jetpack Compose instead.\nImport the compatibility module in your build.gradle file:\n\n\n \n \n \n \n\n2: Create the checkout session\n\n\nDeserialize the \/sessions response to a SessionsModel object:\n\n\n\n\n\nCall the CheckoutSessionProvider.createSession suspending function, passing:\n\n\n\nParameter\nRequired\nDescription\n\n\n\n\nsessionModel\n\nThe deserialized SessionsModel object.\n\n\ndropInConfiguration (Example)\n\nThe configuration object for the payment method.\n\n\n\nFor example:\n\n\n\n\n\n\n\n \n \n \n \n \n 3. (Optional) Add a configuration object\n \n \n \n \nCreate a configuration object, setting the following properties: \n\n\n\nProperty\nRequired\nDescription\n\n\n\n\nenvironment\n\nThe same environment that you set when you created the session.\n\n\nclientKey\n\nThe same clientKey that you set when you created the session.\n\n\nshopperLocale\n\nThe shopper's locale. By default, this matches the shopperLocale you included in the \/sessions request.\n\n\n\n\n \n\n\n \n \n\n4: Launch and show Drop-in\n\n\n \n \n \n \n\n\nYour app shows Drop-in, and it handles the whole payment flow.Get the payment outcome\nAfter Drop-in finishes the payment flow, you can show the shopper the current payment status. Adyen sends a webhook with the outcome of the payment.\nInform the shopper\n\n \n Client app\n \n\n\nFrom the onDropInResult function, you can get the \n resultCode\n to inform the shopper about the current payment status.\n\n \n \n \n \n \n Optional: Get the result of the payment session on your server\n \n \n \n \n\n \n Payment server\n \n\n\nYou can also get the result of the payment session on your server.\n\nGet the id from the \/sessions response.\nGet sessionResult from the onDropInResult function.\n\nMake a GET \/sessions\/{id}?sessionResult={sessionResult} request including the id and sessionResult. For example:\n\n\n\nThe response includes the result of the payment session (status). For example:\n\n\n\nPossible statuses:\n\n\n\nstatus\nDescription\n\n\n\n\ncompleted\nThe shopper completed the payment. This means that the payment was authorized.\n\n\npaymentPending\nThe shopper is in the process of making the payment. This applies to payment methods with an asynchronous flow.\n\n\ncanceled\nThe shopper canceled the payment.\n\n\nexpired\nThe session expired (default: 1 hour after session creation). Shoppers can no longer complete the payment with this sessionId.\n\n\n\n\n\n\nThe status included in the response doesn't get updated. Do not make the request again to check for payment status updates. Instead, check webhooks or the Transactions list in your Customer Area.\n\n\n \n \n\n\nUpdate your order management system\n\n \n Webhook server\n \n\n\nYou get the outcome of each payment asynchronously, in an AUTHORISATION webhook. Use the merchantReference from the webhook to match it to your order reference.\nFor a successful payment, the event contains success: true.\n\n \n\nFor an unsuccessful payment, you get success: false, and the reason field has details about why the payment was unsuccessful.\n\n \nTest and go live\nBefore going live, use our list of test cards and other payment methods to\u00a0test your integration. Use the Adyen Android test cards app to access, copy, and autofill card details from within your Android device. We recommend testing each payment method that you intend to offer to your shoppers.\nYou can check the status of a test payment in your\u00a0Customer Area, under Transactions >\u00a0Payments.\nTo debug or troubleshoot test payments, you can also use API logs in your test environment.\nWhen you are ready to go live, you need to:\n\nApply for a live account. Review the process to start accepting payments on Get started with Adyen.\nAssess your PCI DSS compliance by submitting the Self-Assessment Questionnaire-A.\nConfigure your live account.\u00a0\nSubmit a request to add payment methods in your live Customer Area .\nSwitch from test to our live endpoints.\n\nMake sure that all API requests you make for the same payment session use the same live endpoint region. Using different regions for \/payments and \/payments\/details requests may result in errors, for example, when authenticating with 3D Secure 2.\n\n\nLoad from one of our live environments and set the environment to match your live endpoints:\n\n\n\nEndpoint region\nValue\n\n\n\n\nEurope (EU) live\nEUROPE\n\n\nUnited States (US) live\nUNITED_STATES\n\n\nAustralia (AU) live\nAUSTRALIA\n\n\nAsia Pacific & Southeast (APSE) live\nAPSE\n\n\nIndia (IN) live\nINDIA\n\n\n\n\nNext steps\n\nrequiredModify paymentsFind out how to cancel, refund, or capture a payment using our API.Add payment methodsLearn about payment methods and how to add them to your account.TokenizationSave shopper payment details for later payments.3D Secure authenticationComply with regulations such as PSD2 SCA in Europe.\n","type":"page","locale":"en","boost":17,"hierarchy":{"lvl0":"Home","lvl1":"Online payments","lvl2":"Build your integration","lvl3":"Sessions flow integration guide"},"hierarchy_url":{"lvl0":"https:\/\/docs.adyen.com\/","lvl1":"https:\/\/docs.adyen.com\/online-payments","lvl2":"https:\/\/docs.adyen.com\/online-payments\/build-your-integration","lvl3":"\/online-payments\/build-your-integration\/sessions-flow"},"levels":4,"category":"Online Payments","category_color":"green","tags":["Android","Drop-in"]},{"url":"https:\/\/docs.adyen.com\/online-payments\/build-your-integration\/sessions-flow?platform=Android&integration=Components","title":"Android Components","content":"Android Components\nRender individual payment methods anywhere in your app.\nSupported payment methods\nCards, buy now pay later, wallets, and many more.\nSee all supported payment methods\nFeatures\n\nLow development time to integrate each payment method component\nUI styling customization for each payment method\nFlexibility to add payment method components with configuration for each\n3D Secure 2 support using the 3D Secure 2 Component\nRequirements\nBefore you begin to integrate, make sure you have followed the Get started with Adyen guide to:\n\nGet an overview of the steps needed to accept live payments.\nCreate your test account.\n\nAfter you have created your test account:\n\nGet your API key.\nGet your client key.\nSet up webhooks to know the payment outcome.\nHow it works\nFor a Components integration, you must implement the following parts:\n\nYour payment server: sends the API request to create a payment session. \n\nYour client app: shows the Redirect UI where the shopper makes the payment. The Component uses the data from the API responses to handle the payment flow and additional actions on your client app. \nYour webhook server: receives webhooks that include the outcome of each payment.\n\nThe parts of your integration work together to complete the payment flow:\n\n\nThe shopper goes to the checkout page.\n\n\nYour server uses the shopper's country or region and currency information from your client to create a payment session.\n\n\nYour client creates an instance of Redirect using the session data from the server.\n\n\nThe Component collects the shopper's payment details, handles additional actions, and presents the payment result to the shopper.\n\n\nYour webhook server receives the event containing the payment outcome.\n\n\n\n \n\nIf you are integrating these parts separately, you can start at the corresponding part of this integration guide:\n\n\n Payment server\n Go to the integration steps for your server.\n Client app\n Go to the integration steps for your client app.\n Webhook server\n Go to the integration steps for your webhook server.\nInstall an API library\n\n \n Payment server\n \n\n\nWe provide server-side API libraries for several programming languages, available through common package managers, like Gradle and npm, for easier installation and version management. Our API libraries will save you development time, because they:\n\nUse an API version that is up to date.\nHave generated models to help you construct requests.\nSend the request to Adyen using their built-in HTTP client, so you do not have to create your own.\n\n\n\n \n \n \n \n\nCreate a payment session\n\n \n Payment server\n \n\n\nA payment session is a resource with information about a payment flow initiated by the shopper. This resource has all the information required to handle all the stages of a payment flow. You can configure this resource with information like available payment methods, payment amount, or line items.\nTo create a payment session, make a \/sessions request, including:\n\n\n\nParameter name\nRequired\nDescription\n\n\n\n\nmerchantAccount\n\nYour merchant account name.\n\n\namount\n\nThe\u00a0currency\u00a0and\u00a0value\u00a0of the payment, in minor units. This is used to filter the list of available payment methods to your shopper.\n\n\nreturnUrl\n\nURL to where the shopper should be taken back to after a redirection. The URL can contain a maximum of 1024 characters. You can include your own additional query parameters, for example, shopper ID or order reference number. Get this URL from the RedirectComponent.getReturnUrl(context). If the URL to return to includes non-ASCII characters, like spaces or special letters, URL encode the value. The URL must not include personally identifiable information (PII), for example name or email address. \n\n\nreference\n\nYour unique reference for the payment. Minimum length: three characters.\n\n\nexpiresAt\n\nThe session expiry date in ISO8601 format, for example 2023-11-23T12:25:28Z, or 2023-05-27T20:25:28+08:00. When not specified, the expiry date is set to 1 hour after session creation. You cannot set the session expiry to more than 24 hours after session creation.\n\n\ncountryCode\n\nThe shopper's country\/region. This is used to filter the list of available payment methods to your shopper. Format: the two-letter ISO-3166-1 alpha-2 country code. Exception: QZ (Kosovo).\n\n\nchannel\n\nThe platform where the payment is taking place. Use Android. Strongly recommended because this field is used for 3D Secure.\n\n\nshopperLocale\n\nThe language that the payment methods will appear in. Set it to the shopper's language and country code. The default is en-US. The client app. also uses this locale if it is available.\n\n\nshopperEmail\n\nThe shopper's email address. Strongly recommended because this field is used in a number of risk checks, and for 3D Secure.\n\n\nshopperReference\n\nYour reference to uniquely identify this shopper. Strongly recommended because this field is used in a number of risk checks.\n\n\n\n applicationInfo\n\n\nIf you are building an Adyen solution for multiple merchants, include some basic identifying information, so that we can offer you better support. For more information, refer to Building Adyen solutions.\n\n\n\nHere is an example of how to create a session for a payment of 10 EUR:\n\n \n\nThe response contains:\n\nsessionData: the payment session data you need to pass to your client app.\nid: a unique identifier for the session data.\nThe request body.\n\n\n \n\nYou must pass the response to your client app to create the checkout session.\nAPI error handling\nIf you do not get an HTTP 201 response, use the errorCode field and the list of API error codes to troubleshoot.Set up Components\n\n \n Client app\n \n\n\n1: Import the library\nThe default implementation is with Jetpack Compose, but you can import the library without Jetpack Compose instead.\nImport the compatibility module in your build.gradle file. For example, to import the Card Component:\n\n\n \n \n \n \n\n\nYou can find the module to import for each payment method on the corresponding payment method page.2: Create the checkout session\n\n\nDeserialize the \/sessions response to a SessionsModel object:\n\n\n\n\n\nCall the CheckoutSessionProvider.createSession suspending function, passing:\n\n\n\nParameter\nRequired\nDescription\n\n\n\n\nsessionModel\n\nThe deserialized SessionsModel object.\n\n\nenvironment\n\nUse Environment.TEST for testing. When going live, use one of our live environments.\n\n\nclientKey\n\nYour client key.\n\n\n\nFor example:\n\n\n\n\n\n\n\n \n \n \n \n \n 3. (Optional) Add a configuration object\n \n \n \n \nCreate a configuration object, setting the following properties: \n\n\n\nProperty\nRequired\nDescription\n\n\n\n\nenvironment\n\nThe same environment that you set when you created the session.\n\n\nclientKey\n\nThe same clientKey that you set when you created the session.\n\n\nshopperLocale\n\nThe shopper's locale. By default, this matches the shopperLocale you included in the \/sessions request.\n\n\n\n\n \n\n\n \n \n\n4: Launch and show the Component\n\n\n \n \n \n \n\n\nYour app shows the Component, and the Component handles the whole payment flow.Handle a redirect\nIf the shopper was redirected to another website or app, handle when the shopper is redirected back to your app:\n\nAdd an IntentFilter to your Activity that handles redirects. The\n\n\n \n\nThe android:host value is your package name at build time. This must match the returnUrl from the \/sessions request. To get your returnUrl, you can use the RedirectComponent.getReturnUrl(context) function.\n\nGet the result of the redirect from your Activity. Pass the Intent to the Component. Depending on your activity's launch mode, you get the intent in either onCreate or onNewIntent.\n\n\n \nGet the payment outcome\nAfter Redirect finishes the payment flow, you can show the shopper the current payment status. Adyen sends a webhook with the outcome of the payment.\nInform the shopper\n\n \n Client app\n \n\n\nFrom the onFinished function, you can get the \n resultCode\n to inform the shopper about the current payment status.\n\n \n \n \n \n \n Optional: Get the result of the payment session on your server\n \n \n \n \n\n \n Payment server\n \n\n\nYou can also get the result of the payment session on your server.\n\nGet the id from the \/sessions response.\nGet sessionResult from the onFinished function.\n\nMake a GET \/sessions\/{id}?sessionResult={sessionResult} request including the id and sessionResult. For example:\n\n\n\nThe response includes the result of the payment session (status). For example:\n\n\n\nPossible statuses:\n\n\n\nstatus\nDescription\n\n\n\n\ncompleted\nThe shopper completed the payment. This means that the payment was authorized.\n\n\npaymentPending\nThe shopper is in the process of making the payment. This applies to payment methods with an asynchronous flow.\n\n\ncanceled\nThe shopper canceled the payment.\n\n\nexpired\nThe session expired (default: 1 hour after session creation). Shoppers can no longer complete the payment with this sessionId.\n\n\n\n\n\n\nThe status included in the response doesn't get updated. Do not make the request again to check for payment status updates. Instead, check webhooks or the Transactions list in your Customer Area.\n\n\n \n \n\n\nUpdate your order management system\n\n \n Webhook server\n \n\n\nYou get the outcome of each payment asynchronously, in an AUTHORISATION webhook. Use the merchantReference from the webhook to match it to your order reference.\nFor a successful payment, the event contains success: true.\n\n \n\nFor an unsuccessful payment, you get success: false, and the reason field has details about why the payment was unsuccessful.\n\n \nTest and go live\nBefore going live, use our list of test cards and other payment methods to\u00a0test your integration. Use the Adyen Android test cards app to access, copy, and autofill card details from within your Android device. We recommend testing each payment method that you intend to offer to your shoppers.\nYou can check the status of a test payment in your\u00a0Customer Area, under Transactions >\u00a0Payments.\nTo debug or troubleshoot test payments, you can also use API logs in your test environment.\nWhen you are ready to go live, you need to:\n\nApply for a live account. Review the process to start accepting payments on Get started with Adyen.\nAssess your PCI DSS compliance by submitting the Self-Assessment Questionnaire-A.\nConfigure your live account.\u00a0\nSubmit a request to add payment methods in your live Customer Area .\nSwitch from test to our live endpoints.\n\nMake sure that all API requests you make for the same payment session use the same live endpoint region. Using different regions for \/payments and \/payments\/details requests may result in errors, for example, when authenticating with 3D Secure 2.\n\n\nLoad from one of our live environments and set the environment to match your live endpoints:\n\n\n\nEndpoint region\nValue\n\n\n\n\nEurope (EU) live\nEUROPE\n\n\nUnited States (US) live\nUNITED_STATES\n\n\nAustralia (AU) live\nAUSTRALIA\n\n\nAsia Pacific & Southeast (APSE) live\nAPSE\n\n\nIndia (IN) live\nINDIA\n\n\n\n\nNext steps\n\nrequiredModify paymentsFind out how to cancel, refund, or capture a payment using our API.Add payment methodsLearn about payment methods and how to add them to your account.TokenizationSave shopper payment details for later payments.3D Secure authenticationComply with regulations such as PSD2 SCA in Europe.\n","type":"page","locale":"en","boost":17,"hierarchy":{"lvl0":"Home","lvl1":"Online payments","lvl2":"Build your integration","lvl3":"Sessions flow integration guide"},"hierarchy_url":{"lvl0":"https:\/\/docs.adyen.com\/","lvl1":"https:\/\/docs.adyen.com\/online-payments","lvl2":"https:\/\/docs.adyen.com\/online-payments\/build-your-integration","lvl3":"\/online-payments\/build-your-integration\/sessions-flow"},"levels":4,"category":"Online Payments","category_color":"green","tags":["Android","Components"]},{"url":"https:\/\/docs.adyen.com\/online-payments\/build-your-integration\/sessions-flow?platform=React Native&integration=Drop-in","title":"React Native Drop-in","content":"React Native Drop-in\nRender a list of available payment methods anywhere in your app.\nSupported payment methods\nCards, buy now pay later, wallets, and many more.\nSee all supported payment methods\nFeatures\n\nLowest development time to integrate payment methods\nUI styling customization for the list of payment methods\nAdding payment methods to the list requires no extra development time\n3D Secure 2 support built in\nDrop-in is our pre-built UI solution for accepting payments in your app. Drop-in shows all payment methods as a list, in the same block. Your server makes one API request to the \/sessions endpoint.\nReact Native Drop-in v1, Components v1, and Components v2 only support Advanced flow integrations.Requirements\nBefore you begin to integrate, make sure you have followed the Get started with Adyen guide to:\n\nGet an overview of the steps needed to accept live payments.\nCreate your test account.\n\nAfter you have created your test account:\n\nGet your API key.\nGet your client key.\nSet up webhooks to know the payment outcome.\nHow it works\nFor a Drop-in integration, you must implement the following parts:\n\nYour payment server: sends the API request to create a payment session. \n\nYour client app: shows the Drop-in UI where the shopper makes the payment. Drop-in uses the data from the API responses to handle the payment flow and additional actions on your client app. \nYour webhook server: receives webhooks that include the outcome of each payment.\n\nThe parts of your integration work together to complete the payment flow:\n\nThe shopper goes to the checkout page.\nYour server uses the shopper's country and currency information from your client to create a payment session.\nYour client creates an instance of Drop-in using the session data from the server.\nDrop-in shows the available payment methods, collects the shopper's payment details, handles additional actions, and presents the payment result to the shopper.\nYour webhook server receives the notification containing the payment outcome.\n\n\nIf you are integrating these parts separately, you can start at the corresponding part of this integration guide:\n\n\n Payment server\n Go to the integration steps for your server.\n Client app\n Go to the integration steps for your client app.\n Webhook server\n Go to the integration steps for your webhook server.\nInstall an API library\n\n \n Payment server\n \n\n\nWe provide server-side API libraries for several programming languages, available through common package managers, like Gradle and npm, for easier installation and version management. Our API libraries will save you development time, because they:\n\nUse an API version that is up to date.\nHave generated models to help you construct requests.\nSend the request to Adyen using their built-in HTTP client, so you do not have to create your own.\n\n\n\n \n \n \n \n\nCreate a payment session\n\n \n Payment server\n \n\n\nA payment session is a resource with information about a payment flow initiated by the shopper. This resource has all the information required to handle all the stages of a payment flow. You can configure this resource with information like available payment methods, payment amount, or line items.\nTo create a payment session, make a \/sessions request, including:\n\n\n\nParameter name\nRequired\nDescription\n\n\n\n\nmerchantAccount\n\nYour merchant account name.\n\n\namount\n\nThe\u00a0currency\u00a0and\u00a0value\u00a0of the payment, in minor units. This is used to filter the list of available payment methods to your shopper.\n\n\nreturnUrl\n For Android, this value is automatically overridden by AdyenCheckout.\nThe URL the shopper should be taken back to after a redirection. Maximum length: 1024 characters. For iOS, use the custom URL for your app, for example, my-app:\/\/adyen, to take the shopper back to your app after they complete the payment outside of your app. For more information on setting a custom URL scheme, read the Apple Developer documentation. You can also include your own additional query parameters, for example, shopper ID or order reference number. If the URL to return to includes non-ASCII characters, like spaces or special letters, URL encode the value. The URL must not include personally identifiable information (PII), for example name or email address. \n\n\nreference\n\nYour unique reference for the payment. Minimum length: three characters.\n\n\nexpiresAt\n\nThe session expiry date in ISO8601 format, for example 2023-11-23T12:25:28Z, or 2023-05-27T20:25:28+08:00. When not specified, the expiry date is set to 1 hour after session creation. You cannot set the session expiry to more than 24 hours after session creation.\n\n\ncountryCode\n\nThe shopper's country\/region. This is used to filter the list of available payment methods to your shopper. Format: the two-letter ISO-3166-1 alpha-2 country code. Exception: QZ (Kosovo).\n\n\nchannel\n\nThe platform where the payment is taking place. Use iOS or Android. Strongly recommended because this field is used for 3D Secure.\n\n\nshopperLocale\n\nThe language that the payment methods will appear in. Set it to the shopper's language and country code. The default is en-US. The client app. also uses this locale if it is available.\n\n\nshopperEmail\n\nThe shopper's email address. Strongly recommended because this field is used in a number of risk checks, and for 3D Secure.\n\n\nshopperReference\n\nYour reference to uniquely identify this shopper. Minimum length: three characters. Do not include personally identifiable information, for example name or email address. Strongly recommended because this field is used in a number of risk checks.\n\n\n\n applicationInfo\n\n\nIf you are building an Adyen solution for multiple merchants, include some basic identifying information, so that we can offer you better support. For more information, refer to Building Adyen solutions.\n\n\n\nThe following example shows how to create a session for a payment of 10 EUR:\n\n \n\nThe response contains:\n\nsessionData: the payment session data you need to pass to your client app.\nid: a unique identifier for the session data.\nThe request body.\n\n\n \n\nAPI error handling\nIf you do not get an HTTP 201 response, use the errorCode field and the list of API error codes to troubleshoot.Add Adyen Drop-in to your app\n\n \n Client app\n \n\n\n1. Add Adyen React Native to your project\n\n \n\n2. Install\n\n\n \n \n \n \n\n3. Create a configuration object\nCreate a configuration object with the following properties:\n\n\n\nParameter\nRequired\nDescription\n\n\n\n\nenvironment\n\nUse test. When you're ready to accept live payments, change the value to one of our live environments.\n\n\nclientKey\n\nA public key linked to your API credential, used for client-side authentication.\n\n\n\nFor example:\n\n \n\nTo add configuration for specific payment methods, add these in a payment method specific configuration object. For example, for Apple Pay: \n\n \n\nOptional configuration\nOptionally, you can configure the following properties for Drop-in.\n\n\n\nParameter\nDescription\n\n\n\n\nshowPreselectedStoredPaymentMethod\nWhen enabled, shows the preselected stored payment method view. Defaults to true.\n\n\nskipListWhenSinglePaymentMethod\nSet to true to skip the payment methods list step when only one non-instant payment method is available. Defaults to false.\n\n\ntitle Only for iOS\nSet a custom title for the pre-selected stored payment view. By default, the app's name is used.\n\n\nshowRemovePaymentMethodButton\nAllows the shopper to remove a stored payment method. Defaults to false.\n\n\n\nFor example:\n\n \n4. Initialize Drop-in\nConfigure AdyenCheckout, setting the following:\n\n\n\nParameter\nRequired\nDescription\n\n\n\n\nconfig\n\nYour configuration object.\n\n\nsession\n\nThe full response from the \/sessions endpoint.\n\n\nonComplete\n\nCalls the onComplete function for returning the result code when the payment flow is complete.\n\n\nonError\n\nCalls the onError function for returning errors.\n\n\n\nIn your onComplete and onError callbacks, you must call component.hide(result) to dismiss the payment UI when the API request is completed and the payment result is known.\n\n \n\n5. Show Drop-in in your app\n\nSet AdyenCheckout as the context for your \n View\n.\nCreate a way, like a button, for AdyenCheckout to call the start function.\n\nFor example:\n\n \n\nThe context starts Adyen's Native Component for Drop-in.\n6. Handle the result\nWhen the payment flow is completed, you get a result object from the onComplete callback.\nThe \n resultCode\n indicates the payment status.\nErrors\nIf an error occurs during the payment flow, your AdyenCheckout calls the onError method. You get an error object with one of the following error codes:\n\n\n\nError code\nDescription\nAction to take\n\n\n\n\ncanceledByShopper\nThe shopper canceled the payment.\nTake the shopper back to the checkout page.\n\n\nnotSupported\nThe payment method isn't supported by the shopper's device.\nTell the shopper that the payment method isn't supported by their device.\n\n\nnoClientKey\nNo clientKey configured.\nTell the shopper that an error occurred.\n\n\nnoPayment\nNo payment information configured.\nTell the shopper that an error occurred.\n\n\ninvalidPaymentMethods\nCannot parse the paymentMethods list, or the list is empty.\nTell the shopper that an error occurred.\n\n\ninvalidAction\nCannot parse the action.\nTell the shopper that an error occurred.\n\n\nnoPaymentMethod\nCannot find the selected payment method.\nTell the shopper that their selected payment method is currently unavailable.\n\n\nsessionError\nAn error occurred while creating a new session.\nTell the shopper that an error occurred.\n\n\nGet the payment outcome\nAfter Drop-in finishes the payment flow, you can show the shopper the current payment status. Adyen sends a webhook with the outcome of the payment.\nInform the shopper\n\n \n Client app\n \n\n\nUse the \n resultCode\n to show the shopper the current payment status. This synchronous response doesn't give you the final outcome of the payment. You get the final payment status in a webhook that you use to update your order management system.\n\n \n \n \n \n \n Optional: Get the result of the payment session on your server\n \n \n \n \n\n \n Payment server\n \n\n\nYou can also get the result of the payment session on your server.\n\nGet the id from the \/sessions response.\nGet sessionResult from the onPaymentCompleted event.\n\nMake a GET \/sessions\/{id}?sessionResult={sessionResult} request including the id and sessionResult. For example:\n\n\n\nThe response includes the result of the payment session (status). For example:\n\n\n\nPossible statuses:\n\n\n\nstatus\nDescription\n\n\n\n\ncompleted\nThe shopper completed the payment. This means that the payment was authorized.\n\n\npaymentPending\nThe shopper is in the process of making the payment. This applies to payment methods with an asynchronous flow.\n\n\ncanceled\nThe shopper canceled the payment.\n\n\nexpired\nThe session expired (default: 1 hour after session creation). Shoppers can no longer complete the payment with this sessionId.\n\n\n\n\n\n\nThe status included in the response doesn't get updated. Do not make the request again to check for payment status updates. Instead, check webhooks or the Transactions list in your Customer Area.\n\n\n \n \n\n\nUpdate your order management system\n\n \n Webhook server\n \n\n\nYou get the outcome of each payment asynchronously, in an AUTHORISATION webhook. Use the merchantReference from the webhook to match it to your order reference.\nFor a successful payment, the event contains success: true.\n\n \n\nFor an unsuccessful payment, you get success: false, and the reason field has details about why the payment was unsuccessful.\n\n \nTest and go live\nBefore going live, use our list of test cards and other payment methods to\u00a0test your integration. We recommend testing each payment method that you intend to offer to your shoppers.\nYou can check the status of a test payment in your\u00a0Customer Area, under Transactions >\u00a0Payments.\nTo debug or troubleshoot test payments, you can also use API logs in your test environment.\nWhen you are ready to go live, you need to:\n\nApply for a live account. Review the process to start accepting payments on Get started with Adyen.\nAssess your PCI DSS compliance by submitting the Self-Assessment Questionnaire-A.\nConfigure your live account.\u00a0\nSubmit a request to add payment methods in your live Customer Area .\nSwitch from test to our live endpoints.\n\nMake sure that all API requests you make for the same payment session use the same live endpoint region. Using different regions for \/payments and \/payments\/details requests may result in errors, for example, when authenticating with 3D Secure 2.\n\n\nLoad Drop-in from one of our live environments and set the environment to match your live endpoints:\n\n\n\nEndpoint region\nValue\n\n\n\n\nEurope (EU) live\nlive-eu\n\n\nUnited States (US) live\nlive-us\n\n\nAustralia (AU) live\nlive-au\n\n\nAsia Pacific & Southeast (APSE) live\nlive-apse\n\n\nIndia (IN) live\nlive-in\n\n\n\n\nNext steps\n\nrequiredModify paymentsFind out how to cancel, refund, or capture a payment using our API.Add payment methodsLearn about payment methods and how to add them to your account.TokenizationSave shopper payment details for later payments.3D Secure authenticationComply with regulations such as PSD2 SCA in Europe.\n","type":"page","locale":"en","boost":17,"hierarchy":{"lvl0":"Home","lvl1":"Online payments","lvl2":"Build your integration","lvl3":"Sessions flow integration guide"},"hierarchy_url":{"lvl0":"https:\/\/docs.adyen.com\/","lvl1":"https:\/\/docs.adyen.com\/online-payments","lvl2":"https:\/\/docs.adyen.com\/online-payments\/build-your-integration","lvl3":"\/online-payments\/build-your-integration\/sessions-flow"},"levels":4,"category":"Online Payments","category_color":"green","tags":["React Native","Drop-in"]},{"url":"https:\/\/docs.adyen.com\/online-payments\/build-your-integration\/sessions-flow?platform=Flutter&integration=Drop-in","title":"Flutter Drop-in","content":"Flutter Drop-in\nRender a list of available payment methods anywhere in your app.\nSupported payment methods\nCards, buy now pay later, wallets, and many more.\nSee all supported payment methods\nFeatures\n\nLow development time to integrate payment methods\nUI styling customization for the list of payment methods\nAdding payment methods to the list requires no extra development time\n3D Secure 2 support built in\nDrop-in is our pre-built UI solution for accepting payments in your app. Drop-in shows all payment methods as a list, in the same block. Your server makes one API request to the \/sessions endpoint.\nRequirements\nBefore you begin to integrate, make sure you have followed the Get started with Adyen guide to:\n\nGet an overview of the steps needed to accept live payments.\nCreate your test account.\n\nAfter you have created your test account:\n\nGet your API key.\nGet your client key.\nSet up webhooks to know the payment outcome.\n\nRequired versions:\n\niOS 12 or later.\nAndroid 5.0 or later.\nKotlin 1.8 or later.\nGradle v8 or later.\nHow it works\nFor a Drop-in integration, you must implement the following parts:\n\nYour payment server: sends the API request to create a payment session. \n\nYour client app: shows the Drop-in UI where the shopper makes the payment. Drop-in uses the data from the API responses to handle the payment flow and additional actions on your client app. \nYour webhook server: receives webhooks that include the outcome of each payment.\n\nThe parts of your integration work together to complete the payment flow:\n\nThe shopper goes to the checkout page.\nYour server uses the shopper's country and currency information from your client to create a payment session.\nYour client creates an instance of Drop-in using the session data from the server.\nDrop-in shows the available payment methods, collects the shopper's payment details, handles additional actions, and presents the payment result to the shopper.\nYour webhook server receives the notification containing the payment outcome.\n\n\nIf you are integrating these parts separately, you can start at the corresponding part of this integration guide:\n\n\n Payment server\n Go to the integration steps for your server.\n Client\n Go to the integration steps for your client app.\n Webhook server\n Go to the integration steps for your webhook server.\nInstall an API library\n\n \n Payment server\n \n\n\nWe provide server-side API libraries for several programming languages, available through common package managers, like Gradle and npm, for easier installation and version management. Our API libraries will save you development time, because they:\n\nUse an API version that is up to date.\nHave generated models to help you construct requests.\nSend the request to Adyen using their built-in HTTP client, so you do not have to create your own.\n\n\n\n \n \n \n \n\nCreate a payment session\n\n \n Payment server\n \n\n\nA payment session is a resource with information about a payment flow initiated by the shopper. This resource has all the information required to handle all the stages of a payment flow. You can configure this resource with information like available payment methods, payment amount, or line items.\nTo create a payment session, make a POST \/sessions request, including:\n\n\n\nParameter name\nRequired\nDescription\n\n\n\n\nmerchantAccount\n\nYour merchant account name.\n\n\namount\n\nThe\u00a0currency\u00a0and\u00a0value\u00a0of the payment, in minor units. This is used to filter the list of available payment methods to your shopper.\n\n\nreturnUrl\n\nThe URL where the shopper should return to after a redirection. iOS: Use the custom URL scheme for your app. You also need to: Add the return URL handler to your AppDelegate in your native iOS layer.Configure the custom URL scheme in your Info.plist file. iOS example: com.mydomain.adyencheckout:\/\/ Android: Use the combination of: adyencheckout:\/\/ schemeYour package name Use the AdyenCheckout.instance.getReturnUrl() method to get the value, or hardcode the string. Android example: adyencheckout:\/\/com.adyen.adyen_checkout_example Format: Maximum 1024 characters. The URL must not include personally identifiable information (PII), for example name or email address. \n\n\nreference\n\nYour unique reference for the payment. Minimum length: three characters.\n\n\nexpiresAt\n\nThe session expiry date in ISO8601 format, for example 2023-11-23T12:25:28Z, or 2023-05-27T20:25:28+08:00. When not specified, the expiry date is set to 1 hour after session creation. You cannot set the session expiry to more than 24 hours after session creation.\n\n\ncountryCode\n\nThe shopper's country\/region. This is used to filter the list of available payment methods to your shopper. Format: the two-letter ISO-3166-1 alpha-2 country code. Exception: QZ (Kosovo).\n\n\nchannel\n\nThe platform where the payment is taking place. Use iOS or Android. Strongly recommended because this field is used for 3D Secure.\n\n\nshopperLocale\n\nThe language that the payment methods will appear in. Set it to the shopper's language and country code. The default is en-US. Drop-in also uses this locale, if it is available.\n\n\nshopperEmail\n\nThe shopper's email address. Strongly recommended because this field is used in a number of risk checks, and for 3D Secure.\n\n\nshopperReference\n\nYour reference to uniquely identify this shopper. Minimum length: three characters. Do not include personally identifiable information, for example name or email address. Strongly recommended because this field is used in a number of risk checks.\n\n\n\n applicationInfo\n\n\nIf you are building an Adyen solution for multiple merchants, include some basic identifying information, so that we can offer you better support. For more information, refer to Building Adyen solutions.\n\n\n\n\n \n\nThe response contains:\n\nsessionData: the payment session data.\nid: a unique identifier for the session data.\nThe request body.\n\nPass the response to your client app, putting it in the sessionResponse object.\n\n \n\nAPI error handling\nIf you do not get an HTTP 201 response, use the errorCode field and the list of API error codes to troubleshoot.Add Drop-in to your app\n\n \n Client app\n \n\n\nAdd different configurations for iOS and Android, 'Drop-in', and some payment methods.\n1. Add platform-specific configurations\n\n\n \n \n \n \n\n2. Create a configuration object\nCreate a configuration object with the following properties:\n\n\n\nParameter\nRequired\nDescription\n\n\n\n\nenvironment\n\nUse test. When you are ready to accept live payments, change the value to one of our live environments.\n\n\nclientKey\n\nA public key linked to your API credential, used for client-side authentication.\n\n\ncountryCode\n\nThe shopper's country\/region. This is used to filter the list of available payment methods to your shopper. Format: the two-letter ISO-3166-1 alpha-2 country code. Exception: QZ (Kosovo).\n\n\nshopperLocale\n\nBy default, this is set to en-US. To change the language, set this to the shopper's language and country code. If you included shopperLocale in your \/sessions request, Drop-in uses that one.\n\n\namount\n\nThe currency and value of the payment, in minor units. This is used to filter the list of available payment methods to your shopper.\n\n\n\nFor example: \n\n \n\nTo add configuration for specific payment methods, create an additional configuration object. For example, for Apple Pay:\n\n \n\nOptional configuration\n\n\n\nParameter name\nDescription\n\n\n\n\npreselectedPaymentMethodTitle Only for iOS.\nWhen you have a preselected payment method, sets the title of the Drop-in overlay.\n\n\npaymentMethodNames\nIf you want to use custom names when displaying payment methods, set the name to use for each payment method.\n\n\n\n\n \n\n3. Initialize Drop-in\nCall the create method, passing the following:\n\n\n\nParameter\nRequired\nDescription\n\n\n\n\nsessionId\n\nsessionResponse.id: the id from the \/sessions response.\n\n\nsessionData\n\nsessionData: the sessionData from the \/sessions response.\n\n\nconfiguration\n\nThe configuration object you created.\n\n\n\n\n \n\n4. Show Drop-in in your app\nCall startDropin to show the Drop-in, passing the following:\n\n\n\nParameter\nRequired\nDescription\n\n\n\n\ndropInConfiguration\n\nThe configuration object you created.\n\n\ncheckout\n\nThe sessionCheckout you created.\n\n\n\n\n \n\nDrop-in handles the payment flow.\n5. Dismiss Drop-in (optional)\n\n \n Client app\n \n\n\nYou can optionally implement the method to dismiss Drop-in, if this is required for your app. For example, if you want to stop showing the Drop-in UI when the shopper abandons your payment page for an extended period of time.\nUse the global AdyenCheckout.sessions.stopDropIn(); method to dismiss Drop-in. If you do not implement this method, Drop-in is automatically dismissed when the payment flow ends.\n\nIf the shopper has been redirected to a third-party app, for example to authorize the payment on an issuer-hosted website, they can still complete the payment even after you dismiss the Drop-in UI.\n\n5. Handle the result\nWhen the payment flow is completed, you get one of the following objects:\n\n\n\nObject\nDescription\n\n\n\n\nPaymentSessionFinished\nThe payment was successfully submitted. Contains a resultCode with the status of the payment.\n\n\nPaymentCancelledByUser\nThe payment was canceled by the user.\n\n\nPaymentError\nThe payment encountered an error.\n\n\n\nHandle the object and inform the shopper.Get the payment outcome\nAfter Drop-in finishes the payment flow, you can show the shopper the current payment status. Adyen sends a webhook with the outcome of the payment.\nInform the shopper\n\n \n Client app\n \n\n\nUse the \n resultCode\n to show the shopper the current payment status. This synchronous response doesn't give you the final outcome of the payment. You get the final payment status in a webhook that you use to update your order management system.\n\n \n \n \n \n \n Optional: Get the result of the payment session on your server\n \n \n \n \n\n \n Payment server\n \n\n\nYou can also get the result of the payment session on your server.\n\nGet the id from the \/sessions response.\nGet sessionResult from the onPaymentCompleted event.\n\nMake a GET \/sessions\/{id}?sessionResult={sessionResult} request including the id and sessionResult. For example:\n\n\n\nThe response includes the result of the payment session (status). For example:\n\n\n\nPossible statuses:\n\n\n\nstatus\nDescription\n\n\n\n\ncompleted\nThe shopper completed the payment. This means that the payment was authorized.\n\n\npaymentPending\nThe shopper is in the process of making the payment. This applies to payment methods with an asynchronous flow.\n\n\ncanceled\nThe shopper canceled the payment.\n\n\nexpired\nThe session expired (default: 1 hour after session creation). Shoppers can no longer complete the payment with this sessionId.\n\n\n\n\n\n\nThe status included in the response doesn't get updated. Do not make the request again to check for payment status updates. Instead, check webhooks or the Transactions list in your Customer Area.\n\n\n \n \n\n\nUpdate your order management system\n\n \n Webhook server\n \n\n\nYou get the outcome of each payment asynchronously, in an AUTHORISATION webhook. Use the merchantReference from the webhook to match it to your order reference.\nFor a successful payment, the event contains success: true.\n\n \n\nFor an unsuccessful payment, you get success: false, and the reason field has details about why the payment was unsuccessful.\n\n \nTest and go live\nBefore going live, use our list of test cards and other payment methods to\u00a0test your integration. We recommend testing each payment method that you intend to offer to your shoppers.\nYou can check the status of a test payment in your\u00a0Customer Area, under Transactions >\u00a0Payments.\nTo debug or troubleshoot test payments, you can also use API logs in your test environment.\nWhen you are ready to go live, you need to:\n\nApply for a live account. Review the process to start accepting payments on Get started with Adyen.\nAssess your PCI DSS compliance by submitting the Self-Assessment Questionnaire-A.\nConfigure your live account.\u00a0\nSubmit a request to add payment methods in your live Customer Area .\nSwitch from test to our live endpoints.\n\nMake sure that all API requests you make for the same payment session use the same live endpoint region. Using different regions for \/payments and \/payments\/details requests may result in errors, for example, when authenticating with 3D Secure 2.\n\n\nLoad Drop-in from one of our live environments and set the environment to match your live endpoints:\n\n\n\nEndpoint region\nValue\n\n\n\n\nEurope (EU) live\neurope\n\n\nUnited States (US) live\nunitedStates\n\n\nAustralia (AU) live\naustralia\n\n\nAsia Pacific & Southeast (APSE) live\napse\n\n\nIndia (IN) live\nindia\n\n\n\n\nNext steps\n\nrequiredModify paymentsFind out how to cancel, refund, or capture a payment using our API.Add payment methodsLearn about payment methods and how to add them to your account.TokenizationSave shopper payment details for later payments.3D Secure authenticationComply with regulations such as PSD2 SCA in Europe.\n","type":"page","locale":"en","boost":17,"hierarchy":{"lvl0":"Home","lvl1":"Online payments","lvl2":"Build your integration","lvl3":"Sessions flow integration guide"},"hierarchy_url":{"lvl0":"https:\/\/docs.adyen.com\/","lvl1":"https:\/\/docs.adyen.com\/online-payments","lvl2":"https:\/\/docs.adyen.com\/online-payments\/build-your-integration","lvl3":"\/online-payments\/build-your-integration\/sessions-flow"},"levels":4,"category":"Online Payments","category_color":"green","tags":["Flutter","Drop-in"]},{"url":"https:\/\/docs.adyen.com\/online-payments\/build-your-integration\/sessions-flow?platform=Flutter&integration=Components","title":"Flutter Components","content":"Flutter Components\nRender individual payment methods anywhere in your app.\nSupported payment methods\nCards, buy now pay later, wallets, and many more.\nSee all supported payment methods\nFeatures\n\nLow development time to integrate each payment method component\nUI styling customization for each payment method\nFlexibility to add payment method components with configuration for each\n3D Secure 2 support using the 3D Secure 2 Component\nComponents are our pre-built UI solution for accepting payments in your app. Each Component renders a payment method you can render anywhere in your app. Your server makes one API request to the \/sessions endpoint.\nRequirements\nBefore you begin to integrate, make sure you have followed the Get started with Adyen guide to:\n\nGet an overview of the steps needed to accept live payments.\nCreate your test account.\n\nAfter you have created your test account:\n\nGet your API key.\nGet your client key.\nSet up webhooks to know the payment outcome.\n\nRequired versions:\n\niOS 12 or later.\nAndroid 5.0 or later.\nKotlin 1.8 or later.\nGradle v8 or later.\nHow it works\nFor a Components integration, you must implement the following parts:\n\nYour payment server: sends the API request to create a payment session. \n\nYour client app: shows the the Component UI where the shopper makes the payment. The Component uses the data from the API responses to handle the payment flow and additional actions on your client app. \nYour webhook server: receives webhooks that include the outcome of each payment.\n\nThe parts of your integration work together to complete the payment flow:\n\nThe shopper goes to the checkout page.\nYour server uses the shopper's country and currency information from your client to create a payment session.\nYour client creates an instance of the Component using the session data from the server.\nThe Component collects the shopper's payment details, handles additional actions, and presents the payment result to the shopper.\nYour webhook server receives the notification containing the payment outcome.\n\n\nIf you are integrating these parts separately, you can start at the corresponding part of this integration guide:\n\n\n Payment server\n Go to the integration steps for your server.\n Client\n Go to the integration steps for your client app.\n Webhook server\n Go to the integration steps for your webhook server.\nInstall an API library\n\n \n Payment server\n \n\n\nWe provide server-side API libraries for several programming languages, available through common package managers, like Gradle and npm, for easier installation and version management. Our API libraries will save you development time, because they:\n\nUse an API version that is up to date.\nHave generated models to help you construct requests.\nSend the request to Adyen using their built-in HTTP client, so you do not have to create your own.\n\n\n\n \n \n \n \n\nCreate a payment session\n\n \n Payment server\n \n\n\nA payment session is a resource with information about a payment flow initiated by the shopper. This resource has all the information required to handle all the stages of a payment flow. You can configure this resource with information like available payment methods, payment amount, or line items.\nTo create a payment session, make a POST \/sessions request, including:\n\n\n\nParameter name\nRequired\nDescription\n\n\n\n\nmerchantAccount\n\nYour merchant account name.\n\n\namount\n\nThe\u00a0currency\u00a0and\u00a0value\u00a0of the payment, in minor units. This is used to filter the list of available payment methods to your shopper.\n\n\nreturnUrl\n\nThe URL where the shopper should return to after a redirection. iOS: Use the custom URL scheme for your app. You also need to: Add the return URL handler to your AppDelegate in your native iOS layer.Configure the custom URL scheme in your Info.plist file. iOS example: com.mydomain.adyencheckout:\/\/ Android: Use the combination of: adyencheckout:\/\/ schemeYour package nameA path. You must add an intent filter to your Manifest.xml file with this path. This is required for Components. Android example: adyencheckout:\/\/com.adyen.adyen_checkout_example\/adyenPayment Format: Maximum 1024 characters. The URL must not include personally identifiable information (PII), for example name or email address. \n\n\nreference\n\nYour unique reference for the payment. Minimum length: three characters.\n\n\nexpiresAt\n\nThe session expiry date in ISO8601 format, for example 2023-11-23T12:25:28Z, or 2023-05-27T20:25:28+08:00. When not specified, the expiry date is set to 1 hour after session creation. You cannot set the session expiry to more than 24 hours after session creation.\n\n\ncountryCode\n\nThe shopper's country\/region. This is used to filter the list of available payment methods to your shopper. Format: the two-letter ISO-3166-1 alpha-2 country code. Exception: QZ (Kosovo).\n\n\nchannel\n\nThe platform where the payment is taking place. Use iOS or Android. Strongly recommended because this field is used for 3D Secure.\n\n\nshopperLocale\n\nThe language that the payment methods will appear in. Set it to the shopper's language and country code. The default is en-US. the Component also uses this locale, if it is available.\n\n\nshopperEmail\n\nThe shopper's email address. Strongly recommended because this field is used in a number of risk checks, and for 3D Secure.\n\n\nshopperReference\n\nYour reference to uniquely identify this shopper. Minimum length: three characters. Do not include personally identifiable information, for example name or email address. Strongly recommended because this field is used in a number of risk checks.\n\n\n\n applicationInfo\n\n\nIf you are building an Adyen solution for multiple merchants, include some basic identifying information, so that we can offer you better support. For more information, refer to Building Adyen solutions.\n\n\n\n\n \n\nThe response contains:\n\nsessionData: the payment session data.\nid: a unique identifier for the session data.\nThe request body.\n\nPass the response to your client app, putting it in the sessionResponse object.\n\n \n\nAPI error handling\nIf you do not get an HTTP 201 response, use the errorCode field and the list of API error codes to troubleshoot.Add Components to your app\n\n \n Client app\n \n\n\nAdd different configurations for iOS and Android, 'the Component', and some payment methods.\n1. Add platform-specific configurations\n\n\n \n \n \n \n\n2. Create a configuration object\nCreate a configuration object with the following properties:\n\n\n\nParameter\nRequired\nDescription\n\n\n\n\nenvironment\n\nUse test. When you are ready to accept live payments, change the value to one of our live environments.\n\n\nclientKey\n\nA public key linked to your API credential, used for client-side authentication.\n\n\ncountryCode\n\nThe shopper's country\/region. This is used to filter the list of available payment methods to your shopper. Format: the two-letter ISO-3166-1 alpha-2 country code. Exception: QZ (Kosovo).\n\n\nshopperLocale\n\nBy default, this is set to en-US. To change the language, set this to the shopper's language and country code. If you included shopperLocale in your \/sessions request, the Component uses that one.\n\n\namount\n\nThe currency and value of the payment, in minor units. This is used to filter the list of available payment methods to your shopper.\n\n\n\nMost payment methods use the InstantComponent that takes the InstantComponentConfiguration, so they do not have specific configuration.\nSome payment methods use another type of Component that requires specific configuration. Check the Github repo for configuration for different payment method Components.\n\n\n \n \n \n \n\n\n3. Initialize Components\nCall the create method, passing the following:\n\n\n\nParameter\nRequired\nDescription\n\n\n\n\nsessionId\n\nsessionResponse.id: the id from the \/sessions response.\n\n\nsessionData\n\nsessionData: the sessionData from the \/sessions response.\n\n\nconfiguration\n\nThe configuration object you created.\n\n\n\n\n \n\n4. Show Components in your app\nMake sure that the selected payment method is available in your sessionCheckout.paymentMethods object.\n\n\nFrom the list of payment methods, find the one you want to use and put it in an object of the type Map<String, dynamic>:\n\n\n\n\n\n \n \n \n \n\n\n\n\nThe Component handles the payment flow.5. Handle the result\nWhen the payment flow is completed, you get one of the following objects:\n\n\n\nObject\nDescription\n\n\n\n\nPaymentSessionFinished\nThe payment was successfully submitted. Contains a resultCode with the status of the payment.\n\n\nPaymentCancelledByUser\nThe payment was canceled by the user.\n\n\nPaymentError\nThe payment encountered an error.\n\n\n\nHandle the object and inform the shopper.Get the payment outcome\nAfter the Component finishes the payment flow, you can show the shopper the current payment status. Adyen sends a webhook with the outcome of the payment.\nInform the shopper\n\n \n Client app\n \n\n\nUse the resultCode to show the shopper the current payment status. This synchronous response doesn't give you the final outcome of the payment. You get the final payment status in a webhook that you use to update your order management system.\n\n \n \n \n \n \n Optional: Get the result of the payment session on your server\n \n \n \n \n\n \n Payment server\n \n\n\nYou can also get the result of the payment session on your server.\n\nGet the id from the \/sessions response.\nGet sessionResult from the onPaymentCompleted event.\n\nMake a GET \/sessions\/{id}?sessionResult={sessionResult} request including the id and sessionResult. For example:\n\n\n\nThe response includes the result of the payment session (status). For example:\n\n\n\nPossible statuses:\n\n\n\nstatus\nDescription\n\n\n\n\ncompleted\nThe shopper completed the payment. This means that the payment was authorized.\n\n\npaymentPending\nThe shopper is in the process of making the payment. This applies to payment methods with an asynchronous flow.\n\n\ncanceled\nThe shopper canceled the payment.\n\n\nexpired\nThe session expired (default: 1 hour after session creation). Shoppers can no longer complete the payment with this sessionId.\n\n\n\n\n\n\nThe status included in the response doesn't get updated. Do not make the request again to check for payment status updates. Instead, check webhooks or the Transactions list in your Customer Area.\n\n\n \n \n\n\nUpdate your order management system\n\n \n Webhook server\n \n\n\nYou get the outcome of each payment asynchronously, in an AUTHORISATION webhook. Use the merchantReference from the webhook to match it to your order reference.\nFor a successful payment, the event contains success: true.\n\n \n\nFor an unsuccessful payment, you get success: false, and the reason field has details about why the payment was unsuccessful.\n\n \nTest and go live\nBefore going live, use our list of test cards and other payment methods to\u00a0test your integration. We recommend testing each payment method that you intend to offer to your shoppers.\nYou can check the status of a test payment in your\u00a0Customer Area, under Transactions >\u00a0Payments.\nTo debug or troubleshoot test payments, you can also use API logs in your test environment.\nWhen you are ready to go live, you need to:\n\nApply for a live account. Review the process to start accepting payments on Get started with Adyen.\nAssess your PCI DSS compliance by submitting the Self-Assessment Questionnaire-A.\nConfigure your live account.\u00a0\nSubmit a request to add payment methods in your live Customer Area .\nSwitch from test to our live endpoints.\n\nMake sure that all API requests you make for the same payment session use the same live endpoint region. Using different regions for \/payments and \/payments\/details requests may result in errors, for example, when authenticating with 3D Secure 2.\n\n\nLoad Components from one of our live environments and set the environment to match your live endpoints:\n\n\n\nEndpoint region\nValue\n\n\n\n\nEurope (EU) live\neurope\n\n\nUnited States (US) live\nunitedStates\n\n\nAustralia (AU) live\naustralia\n\n\nAsia Pacific & Southeast (APSE) live\napse\n\n\nIndia (IN) live\nindia\n\n\n\n\nNext steps\n\nrequiredModify paymentsFind out how to cancel, refund, or capture a payment using our API.Add payment methodsLearn about payment methods and how to add them to your account.TokenizationSave shopper payment details for later payments.3D Secure authenticationComply with regulations such as PSD2 SCA in Europe.\n","type":"page","locale":"en","boost":17,"hierarchy":{"lvl0":"Home","lvl1":"Online payments","lvl2":"Build your integration","lvl3":"Sessions flow integration guide"},"hierarchy_url":{"lvl0":"https:\/\/docs.adyen.com\/","lvl1":"https:\/\/docs.adyen.com\/online-payments","lvl2":"https:\/\/docs.adyen.com\/online-payments\/build-your-integration","lvl3":"\/online-payments\/build-your-integration\/sessions-flow"},"levels":4,"category":"Online Payments","category_color":"green","tags":["Flutter","Components"]}],"articleFiles":{"sessions-response-web.json":"

sessions-response-web.json<\/p>"}}