Our fruitful cooperation with Adyen has brought to life the Sylius integration of their payment solution, based on the Adyen drop-in widget.


Learn about the business perspective of a new PSP partnership in Sylius portfolio in their blog >>


It’s a convenient way of embedding a list of payment methods and letting the customers pay in any way they want. The integration currently supports all the common payment methods, including card payments, one-click payments, and e-wallets. 

Configuration panel

The configuration panel contains all the necessary fields that make it possible to connect to Adyen. Their names reflect those used in the Adyen customer area. The webhooks are guarded with an HMAC key making sure the communication is secure at both ends.

Payment status updates

After the checkout process has been completed, the initial payment status is saved. It’s based on the authorization status from the card issuer, for example. After that, the shop will receive webhook notifications from Adyen, which will trigger automatic payment status updates. It also includes situations when a payment errors out.

The drop-in

The most prominent feature of the integration is the drop-in widget. It’s a JS component with a simple and intuitive design. This is the core interface between the customer, the shop, and Adyen.

Every payment method that has been enabled by the merchant and meets the currency requirements is shown to the customer. They can choose from a variety of payment options, including standard card payments, one-click payments, e-wallets, and more. The most compelling technical aspect of the drop-in is the fact that it lets the developer treat almost all of the payment methods in a uniform way with very few special cases when additional JSON data needs to be injected into it.

One-click payments

One-click payments let customers pay by clicking a single button (think about PayPal or the increasingly popular local Polish payment method BLIK). Card payments require the customer to input information in order to perform the payment process, which takes time. There are customers who don’t like using their physical cards to look up the details. With one-click payments, it’s as easy as clicking the button.

Wallet payments

E-wallets like Google Pay or Apple Pay are another convenient way of performing payments. They’re easy to use and are similar to one-click payments. The majority of buyers use Android or iOS-based devices, and more and more banks offer integrations with Google Pay or Apple thus the increase in conversion is literally one click away.

Refunds

This plugin utilizes the Sylius refund plugin. The current integration lets you refund orders using the admin panel.

Logs

The plugin has an integrated interface for viewing logs about payments. Error logs come in handy, especially while testing out the integration configuration. Webhook actions are not directly visible to admin users, so a log listing is helpful. 

Technical challenges

This integration doesn’t use Payum, which is the default payment library in Sylius. Instead, it directly handles state machine updates. From the initial payment request to the final webhook manipulations – it was all done using granular updates to make up for shortcomings and obstacles that popped up along the way. This way, we could make sure that the whole payment process runs smoothly without fear of getting something wrong.

Radosław Żurawski - CSO at BitBag
Do you want to implement this integration in your Sylius-based eCommerce?

At BitBag, we create many outstanding solutions that empower online businesses. If you feel we may help you, let us know using the form on the contact us page.