This page explains how to add Pay by Bank (US) 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 (US):<\/p>\n Select the endpoint you are using to make payments:<\/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 Your Components integration handles the redirect, so you do not need to do anything additional for Pay by Bank (US).<\/p>\n Your Components integration gets the payment outcome, so you do not need to do anything additional for Pay by Bank (US).<\/p>\n We strongly recommend capturing Pay by Bank (US) payments immediately, to reduce the risk of insufficient funds at the time of capture. <\/p>\n Through our partner Plaid, Adyen completes the checks on the shopper's bank account, including a balance check and risk checks, at the time of authorization. However, the issuing bank does not hold the authorized funds and thus it is possible that the account balance is no longer sufficient by the time you capture the payment. For that reason, you should capture Pay by Bank (US) payments as soon as possible.<\/p>\n However, even with immediate capture there is still a risk of insufficient funds at the time of capture, because capturing is an asynchronous process on the ACH Direct Debit network.<\/p>\n Pay by Bank (US) supports tokenization of the shopper's payment details for recurring transactions.<\/p>\n We strongly recommend that you ask explicit permission from the shopper if you intend to make future recurring payments. Being transparent about the payment schedule and the amount reduces the risk of chargebacks.<\/p>\n<\/div>\n To make recurring payments, refer to Tokenization<\/a> to:<\/p>\n You can test the payment flow as well as the chargeback flow.<\/p>\n To go live, you need to await registration with our partner Plaid.<\/p>\n In the test environment, the redirect flow mimics the live flow, but not all refusal reasons can be simulated.<\/p>\n To test the payment flow, you can either include a specific amount in your payment request to test a specific scenario, or you can specify custom_balances<\/strong> as your username when you are redirected to confirm the payment.<\/p>\n These are the scenarios you can test:<\/p>\nImport resources for v6<\/h2>\n
import { AdyenCheckout, PayByBankUS } 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_AIS_DD-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 PayByBankUS(checkout).mount('#paybybank_AIS_DD-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_AIS_DD').mount('#paybybank_AIS_DD-container');<\/code><\/pre>\n\n <\/div>\n <\/div>\n<\/div>\n\nRedirect handling<\/h2>\n
Payment outcome<\/h2>\n
Capture<\/h2>\n
Recurring payments<\/h2>\n
\n
Test and go live<\/h2>\n
Test the payment flow<\/h3>\n