This page explains how to add Pay by Bank (Europe) to your existing Web Components integration.<\/p>\n
Select the server-side flow<\/a> that your integration uses:<\/p>\n\n If you are using Web Components v6, import the Component<\/a> that you need for Pay by Bank (Europe):<\/p>\n Select which endpoint you are using:<\/p>\n\n Create a DOM element on your checkout page, placing it where you want the payment method form to be rendered:<\/p>\n Create an instance of the Component, passing:<\/p>\n Use the You can optionally configure your payment form to include a list of issuing banks for Pay by Bank (Europe). <\/p>\n In some regions, like Germany, there are so many banks that you cannot show a list of issuing banks. Shoppers are redirected to our open banking partner Tink to select their bank.<\/p>\n In other regions, like the United Kingdom, you can let shoppers pre-select their bank before redirecting them to Tink, by showing the list of issuing banks in your payment form. If you do not show the list of issuing banks, shoppers select their bank after being redirected to Tink.<\/p>\n In markets where issuer selection is supported, you can use the following optional configuration to show the list of issuing banks:<\/p>\nImport resources for v6<\/h2>\n
import { AdyenCheckout, PayByBank } from '@adyen\/adyen-web'<\/code><\/pre>\nAPI reference<\/h2>\n
Component configuration<\/h2>\n
Step 1: Create a DOM element<\/h3>\n
<div id=\"paybybank-container\"><\/div><\/code><\/pre>\nStep 2: Create an instance of the Component<\/h3>\n
v6.0.0 or later<\/h4>\n
\n
AdyenCheckout<\/code>.<\/li>\n<\/ul>\nconst openBanking = new PayByBank(checkout).mount('#paybybank-container');<\/code><\/pre>\nv5.x.x or earlier<\/h4>\n <\/div>\n <\/div>\n
create<\/code> method of your AdyenCheckout<\/code> instance, in this case checkout<\/code>, to create the Component:<\/p>\nconst openBankingComponent = checkout.create('paybybank').mount('#paybybank-container');<\/code><\/pre>\n\n <\/div>\n <\/div>\n<\/div>\n\nOptional configuration<\/h3>\n