\n <\/div>\n","url":"https:\/\/docs.adyen.com\/pt\/payment-methods\/iris\/web-component","articleFields":{"description":"Add IRIS to your Components integration.","never_cache_twig":true,"parameters":{"tx_variant":"iris","component_class_name":"IRIS","component_class_lowercase":"iris","integration":"Components","pm_directory":"iris","payment_method":"IRIS","action_type":"redirect, qrCode"},"filters_component":true,"filters_config_folder":"payment-methods\/iris\/web\/component-web"},"algolia":[{"url":"https:\/\/docs.adyen.com\/pt\/payment-methods\/iris\/web-component","title":"IRIS Web Component","content":"Requirements\n\n\n\nRequirement\nDescription\n\n\n\n\nIntegration type\nMake sure that you have an existing Sessions flow Web Components integration.\n\n\n\nCheckout API\nMake sure that you use Checkout API v68 or later.\n \n\n\nSetup steps\n- Before you begin, add IRIS in your Customer Area. - Before you can go live, request the IRIS payment method from your Greek bank, and from Adyen, by submitting your DIAS code, as well as the merchant account and the associated stores you want to have it activated on.\n\n\n\nAdd additional parameters to your \/sessions request\nYou do not need to add any additional parameters when you create a payment session.\nImport IRIS\nWhen you import Adyen Web, include Iris.\n\n \nAdd additional configuration for IRIS\nYou do not need to add any configuration parameters for IRIS.\nInitialize the Component for IRIS\nTo initialize IRIS, use the Iris class.\n\n \n\nTest and go live\nBefore you accept live payments, test your integration using Adyen\u2019s IRIS simulator. In this simulator, the payment outcome (Successful, Refused, or Cancelled) can be selected on an Adyen-hosted page. This page will load depending on the IRIS flow:\n\nIssuer redirect flow: the page URL is in the redirect link in Adyen\u2019s \/payments response.\nQR code (Ecommerce and In-person Payments): the page URL is encoded in the QR code, which can be opened with any smartphone camera.\n\nCheck the status of IRIS test payments in your Customer Area > Transactions > Payments.\nBefore you go live, go through the onboarding steps with your Greek bank, and enable IRIS payment method for your live merchant account on Customer Area.","type":"page","locale":"pt","boost":17,"hierarchy":{"lvl0":"Home","lvl1":"Payment methods","lvl2":"IRIS","lvl3":"IRIS Web Component"},"hierarchy_url":{"lvl0":"https:\/\/docs.adyen.com\/pt","lvl1":"https:\/\/docs.adyen.com\/pt\/payment-methods","lvl2":"https:\/\/docs.adyen.com\/pt\/payment-methods\/iris","lvl3":"\/pt\/payment-methods\/iris\/web-component"},"levels":4,"category":"Payment method","category_color":"green","tags":["Component"]},{"url":"https:\/\/docs.adyen.com\/pt\/payment-methods\/iris\/web-component?flow=Sessions flow&integration=Component","title":"Sessions flow Component","content":"Requirements\n\n\n\nRequirement\nDescription\n\n\n\n\nIntegration type\nMake sure that you have an existing Sessions flow Web Components integration.\n\n\n\nCheckout API\nMake sure that you use Checkout API v68 or later.\n \n\n\nSetup steps\n- Before you begin, add IRIS in your Customer Area. - Before you can go live, request the IRIS payment method from your Greek bank, and from Adyen, by submitting your DIAS code, as well as the merchant account and the associated stores you want to have it activated on.\n\n\n\nAdd additional parameters to your \/sessions request\nYou do not need to add any additional parameters when you create a payment session.\nImport IRIS\nWhen you import Adyen Web, include Iris.\n\n \nAdd additional configuration for IRIS\nYou do not need to add any configuration parameters for IRIS.\nInitialize the Component for IRIS\nTo initialize IRIS, use the Iris class.\n\n \n\nTest and go live\nBefore you accept live payments, test your integration using Adyen\u2019s IRIS simulator. In this simulator, the payment outcome (Successful, Refused, or Cancelled) can be selected on an Adyen-hosted page. This page will load depending on the IRIS flow:\n\nIssuer redirect flow: the page URL is in the redirect link in Adyen\u2019s \/payments response.\nQR code (Ecommerce and In-person Payments): the page URL is encoded in the QR code, which can be opened with any smartphone camera.\n\nCheck the status of IRIS test payments in your Customer Area > Transactions > Payments.\nBefore you go live, go through the onboarding steps with your Greek bank, and enable IRIS payment method for your live merchant account on Customer Area.","type":"page","locale":"pt","boost":17,"hierarchy":{"lvl0":"Home","lvl1":"Payment methods","lvl2":"IRIS","lvl3":"IRIS Web Component"},"hierarchy_url":{"lvl0":"https:\/\/docs.adyen.com\/pt","lvl1":"https:\/\/docs.adyen.com\/pt\/payment-methods","lvl2":"https:\/\/docs.adyen.com\/pt\/payment-methods\/iris","lvl3":"\/pt\/payment-methods\/iris\/web-component"},"levels":4,"category":"Payment method","category_color":"green","tags":["Sessions flow","Component"]},{"url":"https:\/\/docs.adyen.com\/pt\/payment-methods\/iris\/web-component?flow=Advanced flow&integration=Component","title":"Advanced flow Component","content":"Requirements\n\n\n\nRequirement\nDescription\n\n\n\n\nIntegration type\nMake sure that you have an existing Advanced flow Web Components integration.\n \n\n\nAction handling\nMake sure that your existing integration is set up to handle the additional action. action.type: redirect, qrCode.\n\n\n\nSetup steps\n- Before you begin, add IRIS in your Customer Area. - Before you can go live, request the IRIS payment method from your Greek bank, and from Adyen, by submitting your DIAS code, as well as the merchant account and the associated stores you want to have it activated on.\n\n\n\nImport IRIS\nWhen you import Adyen Web, include Iris.\n\n \nInitialize the Component for IRIS\nTo initialize IRIS, use the Iris class.\n\n \n\nAdd additional parameters to your \/payments request\nWhen you make a payment, add the following parameters to the \/payments request:\n\n\n\nParameter\nRequired\nDescription\n\n\n\n\n paymentMethod.type\n\niris\n\n\n returnUrl\n\nThe URL to which the shopper should be redirected after completing the payment. Required only for Issuer-redirect flow. Not required for QR code flow.\n\n\n paymentMethod.issuer\n\nThe issuer ID of the shopper's selected bank. This is only relevant (and required) for the Issuer redirect flow.If the issuer ID is included, the \/payments response will contain the redirect URL. If the issuer ID is not included, the \/payments response will contain the QR code data.\n\n\n\nIssuer-redirect flow\nThe following example shows how to make a payment request for 10 EUR, requesting the redirect flow.\n\n \n\nIn the \/payments response, note the action object. This contains the information needed to redirect the shopper.\n\n \n\nHandle the redirect\n\n\nTo complete the payment, redirect the shopper to the action.url returned in the \/payments response, taking the following recommendations into consideration:\n\n\nWhen using the HTTP GET method:\nFor security reasons, when showing the redirect in the app, we recommend that you use SFSafariViewController for iOS or Chrome Custom Tabs for Android, instead of WebView objects. Also refer to the security best practices for WebView.\n\n\nRedirection for mobile integrations:\nFor mobile integrations, we strongly recommended that you redirect the shopper to the default browser of their device. Redirecting to the default browser ensures the best compatibility, handling of multi-factor authentication, app-to-app redirection, and error handling.\n\n\n\n\nAfter the shopper is redirected back to your website, check the payment result by making a POST \/payments\/details request, specifying:\n\ndetails: object that contains the URL-decoded redirectResult returned when the shopper was redirected back to your site.\n\n\n\n\n \n\nIn the response note the following:\n\nresultCode: use this to present the result to your shopper.\npspReference: our unique identifier for the transaction.\n\n\n \n\nQR code flow\nThe following example shows how to make a payment request for 10 EUR, requesting the QR code flow.\n\n \n\nIn the \/payments response, note the action object. This contains the information needed to generate the QR code.\n\n \n\nAfter initiating the payment, the shopper has 10 minutes to complete the transaction. We recommend that you show this timer to the shopper.\nPresent the QR code\nFollow these steps to render the QR code on your checkout page:\n\nUse the qrCodeData from the action object to render the QR code on your checkout page.\nAfter the shopper scans the QR code and completes the payment, we send a webhook informing you of the payment result.\nPresent the payment result to your shopper.\n\nTest and go live\nBefore you accept live payments, test your integration using Adyen\u2019s IRIS simulator. In this simulator, the payment outcome (Successful, Refused, or Cancelled) can be selected on an Adyen-hosted page. This page will load depending on the IRIS flow:\n\nIssuer redirect flow: the page URL is in the redirect link in Adyen\u2019s \/payments response.\nQR code (Ecommerce and In-person Payments): the page URL is encoded in the QR code, which can be opened with any smartphone camera.\n\nCheck the status of IRIS test payments in your Customer Area > Transactions > Payments.\nBefore you go live, go through the onboarding steps with your Greek bank, and enable IRIS payment method for your live merchant account on Customer Area.","type":"page","locale":"pt","boost":17,"hierarchy":{"lvl0":"Home","lvl1":"Payment methods","lvl2":"IRIS","lvl3":"IRIS Web Component"},"hierarchy_url":{"lvl0":"https:\/\/docs.adyen.com\/pt","lvl1":"https:\/\/docs.adyen.com\/pt\/payment-methods","lvl2":"https:\/\/docs.adyen.com\/pt\/payment-methods\/iris","lvl3":"\/pt\/payment-methods\/iris\/web-component"},"levels":4,"category":"Payment method","category_color":"green","tags":["Advanced flow","Component"]}],"articleFiles":{"payments-request-qr.js":"
payments-request-qr.js<\/p>","payments-request-redirect.js":"
payments-request-redirect.js<\/p>","payments-response-qr.json":"
payments-response-qr.json<\/p>","payments-response-redirect.json":"
payments-response-redirect.json<\/p>","redirect-request.js":"
redirect-request.js<\/p>","redirect-response.json":"
redirect-response.json<\/p>"}}