This page explains how to add Sofort to your existing Web Components integration.<\/p>\n
Select the server-side flow<\/a> that your integration uses:<\/p>\n\n You do not need to send additional fields for Sofort. To see optional fields that you can send for all payment methods, choose the endpoint you integrated:<\/p>\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 We support recurring transactions for Sofort through SEPA Direct Debit<\/a>. To make recurring payments, you need to:<\/p>\n We strongly recommend that you request explicit permission from the shopper if you intend to make recurring SEPA payments. Being transparent about the payment schedule and the charged amount reduces the risk of\u00a0chargebacks<\/a>.<\/p>\n<\/div><\/div>\n To create a token, include in your \/payments<\/a> request:<\/p>\n When the payment has been settled, you receive a recurring.token.created<\/a> webhook<\/a> containing:<\/p>\n Make sure that your server is able to receive the Recurring tokens life cycle events<\/a> webhook. You can set up this webhook in your Customer Area<\/a>.<\/p>\n<\/div>\n To make a payment with the token, include in your \/payments<\/a> request:<\/p>\n You can also get this value using the \/listRecurringDetails<\/a> endpoint.<\/p>\n<\/div>\n For more information about the Sofort does not have a specialized test environment. This means that you are\u00a0redirected to the Sofort live\u00a0environment even when making a payment from the Adyen test environment.<\/p>\n You can test successful and cancelled payments in EUR for Sofort. For other scenarios, use real payment details and small amounts in your live environment.<\/p>\n To test your integration, use the following details:\u00a0<\/p>\nAPI reference<\/h2>\n
\n
Component configuration<\/h2>\n
Step 1: Create a DOM element<\/h3>\n
<div id=\"directEbanking-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 sofort = new Redirect(checkout, { type: 'directEbanking' }).mount('#directEbanking-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 sofortComponent = checkout.create('directEbanking').mount('#directEbanking-container');<\/code><\/pre>\n\n <\/div>\n <\/div>\n<\/div>\n\nRecurring payments<\/h2>\n
\n
Create a token<\/h3>\n
\n
storePaymentMethod<\/code>: true<\/strong><\/li>\n\n
type<\/code>: recurring.token.created<\/strong><\/li>\nshopperReference<\/code>: your unique identifier for the shopper.<\/li>\neventId<\/code>: the pspReference<\/code> of the initial payment.<\/li>\nstoredPaymentMethodId<\/code>: the token that you need to make recurring payments for this shopper.<\/li>\n<\/ul>\nMake a payment with a token<\/h3>\n
\n
paymentMethod.storedPaymentMethodId<\/code>: The storedPaymentMethodId<\/code> from the recurring.token.created<\/a> webhook.<\/li>\n<\/ul>\n\n
shopperReference<\/code>: The unique shopper identifier that you specified when creating the token.<\/li>\nshopperInteraction<\/code>:\u00a0ContAuth<\/strong>.<\/li>\nrecurringProcessingModel<\/code>: Subscription<\/strong> or UnscheduledCardOnFile<\/strong>.<\/li>\n<\/ul>\nshopperInteraction<\/code> and recurringProcessingModel<\/code> fields, refer to Tokenization<\/a>.<\/p>\nTest and go live<\/h2>\n
Test a successful payment<\/h3>\n