Payment-method icon

Sofort Component

Add Sofort to an existing Components integration.

This page explains how to add Sofort to your existing Web Components integration.

Requirements

Select the server-side flow that your integration uses:

API reference

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:

Component configuration

Step 1: Create a DOM element

Create a DOM element on your checkout page, placing it where you want the payment method form to be rendered:

 <div id="directEbanking-container"></div>

Step 2: Create an instance of the Component

v6.0.0 or later

Create an instance of the Component, passing:

  • Your instance of AdyenCheckout.
const sofort = new Redirect(checkout, { type: 'directEbanking' }).mount('#directEbanking-container');

Use the create method of your AdyenCheckout instance, in this case checkout, to create the Component:

const sofortComponent = checkout.create('directEbanking').mount('#directEbanking-container');

Recurring payments

We support recurring transactions for Sofort through SEPA Direct Debit. To make recurring payments, you need to:

  1. Create a shopper token.
  2. Use the token to make future payments for the shopper.

Create a token

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 chargebacks.

To create a token, include in your /payments request:

  • storePaymentMethod: true
  • shopperReference: Your unique identifier for the shopper (minimum length three characters).

When the payment has been settled, you receive a webhook containing:

  • eventCode: RECURRING_CONTRACT
  • originalReference: The pspReference of the initial payment.
  • pspReference: This is the token that you need to make recurring payments for this shopper.

Make sure that your server is able to receive RECURRING_CONTRACT as part of your standard webhooks. You can enable the RECURRING_CONTRACT event code in the webhook settings page.

Make a payment with a token

To make a payment with the token, include in your /payments request:

  • paymentMethod.storedPaymentMethodId: The pspReference from the RECURRING_CONTRACT.

You can also get this value using the /listRecurringDetails endpoint.

  • shopperReference: The unique shopper identifier that you specified when creating the token.
  • shopperInteraction: ContAuth.
  • recurringProcessingModel: Subscription or UnscheduledCardOnFile.

For more information about the shopperInteraction and recurringProcessingModel fields, refer to Tokenization.

Test and go live

Sofort does not have a specialized test environment. This means that you are redirected to the Sofort live environment even when making a payment from the Adyen test environment.

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.

Test a successful payment

To test your integration, use the following details: 

Bank Name Account Number Country/region PIN TAN
DemoBank Use any value DE Use any value Follow the instructions

Using a different bank name (live data) will initiate a real payment. This payment will not be transferred to your account, and is therefore lost. It is not possible to reverse or refund this payment.

  1. Set the paymentMethod type to directEbanking. This redirects you to the Sofort page.
  2. Under Bank name, select Demo Bank, then Next.
  3. Enter any test login details for Account number and PIN, and select Next.
  4. Select an account, then Next.
  5. Enter any test TAN and select Next.
  6. To check the status of your test payment, go to your test Customer Area > Transactions > Payments.

Test a cancelled payment

  1. Set the paymentMethod type to directEbanking. This redirects you to the Sofort page.
  2. Under Bank name, select Demo Bank.
  3. Select Next.
  4. Select the icon.
  5. Select Cancel payment.
  6. To check the status of your test payment, go to your test Customer Area > Transactions > Payments.

Go live

To accept live Sofort payments, you must submit a request for Sofort in your live Customer Area.

See also