{"title":"Headless integration","category":"default","creationDate":1776961628,"content":"

This page describes how to build a front end for your headless Shopware 6 integration using either Adyen's pre-built UI solutions or your own UI. Your front end connects to your existing back end that uses Shopware's Store API endpoints.<\/p>\n

Requirements<\/h2>\n

Before you start building a Shopware 6 Headless integration, set up the Shopware 6 plugin<\/a>.<\/p>\n

Step 1: Get available payment methods<\/h2>\n

Get the available payment methods, so you can show them in the checkout form.<\/p>\n

Make a POST<\/strong> \n store-api\/payment-method<\/code>\n<\/a> request to get the available payment methods. Specify:<\/p>\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Parameter name<\/th>\nDescription<\/th>\n<\/tr>\n<\/thead>\n
page<\/code><\/td>\nSearch result page.<\/td>\n<\/tr>\n
limit<\/code><\/td>\nNumber of items per result page.<\/td>\n<\/tr>\n
filter<\/code><\/td>\nList of filters to restrict the search result.<\/td>\n<\/tr>\n
sort<\/code><\/td>\nSorting in the search result.<\/td>\n<\/tr>\n
post_filter<\/code><\/td>\nFilters that applied without affecting aggregations.<\/td>\n<\/tr>\n
associations<\/code><\/td>\nUsed to fetch associations that are not fetched by default.<\/td>\n<\/tr>\n
aggregations<\/code><\/td>\nUsed to perform aggregations on the search result.<\/td>\n<\/tr>\n
grouping<\/code><\/td>\nPerform groupings over certain fields.<\/td>\n<\/tr>\n
onlyAvailable<\/code><\/td>\nList only available.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

The response contains an adyenData<\/code> object for each available payment method.<\/p>\n

\n <\/code-sample>\n<\/div>\n

In the next step, use information from the adyenData<\/code> objects to show payment methods on your checkout page.<\/p>\n

Step 2: Show available payment methods<\/h2>\n

Show the available payment methods on your front end and collect the shopper's payment details by rendering the input fields using our Drop-in or Components<\/a>.<\/p>\n

Render the input fields using our Drop-in or Components<\/h3>\n

Use one of our Pre-built UI options<\/a>.<\/p>\n

    \n
  1. From your server, make a GET<\/strong> \/store-api\/adyen\/payment-methods<\/code> request. The response you get is the same as an Adyen Checkout API \n \/paymentMethods<\/code>\n<\/a> response.<\/li>\n<\/ol>\n\n
    \n
    \n \n <\/tabs>\n <\/div>\n<\/div>\n\n

    Saving the shopper's payment details<\/h4>\n

    The shopper's payment details are collected by the Drop-in and Component in a STATE_DATA<\/code> object that you send in Step 4 when you make a payment<\/a>.<\/p>\n

    Step 3: Create order<\/h2>\n

    When the shopper submits the order, create the order by making a \n store-api\/checkout\/order<\/code>\n<\/a> endpoint.<\/p>\n\n\n\n\n\n\n\n
    Parameter name<\/th>\nDescription<\/th>\n<\/tr>\n<\/thead>\n
    customerComment<\/code><\/td>\nAdds a comment from the customer to the order.<\/td>\n<\/tr>\n
    affiliateCode<\/code><\/td>\nThe affiliate code can be used to track which referrer the customer came through.<\/td>\n<\/tr>\n
    campaignCode<\/code><\/td>\nThe campaign code is used to track which action the customer came from.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

    Step 4: Make payment<\/h2>\n

    Make a POST<\/strong> \n store-api\/handle-payment<\/code>\n<\/a> request, including the shopper's payment details in the stateData<\/code> parameter. For example:<\/p>\n

    this.client = new StoreApiClient();\nlet params = {\n            'orderId': 'XXX',\n            'finishUrl': 'https:\/\/example.com\/checkout\/finish?orderId=XXX',\n            'errorUrl': 'https:\/\/example.com\/checkout\/finish?orderId=XXX&paymentFailed=1',\n        };\n\/\/ Add payment state data\nparams['stateData'] = {\n    paymentMethod: {\n     type: \"scheme\",\n     encryptedCardNumber: \"adyenjs_0_1_18$k7s65M5V0KdPxTErhBIPoMPI8HlC..\",\n     encryptedExpiryMonth: \"adyenjs_0_1_18$p2OZxW2XmwAA8C1Avxm3G9UB6e4..\",\n     encryptedExpiryYear: \"adyenjs_0_1_18$CkCOLYZsdqpxGjrALWHj3QoGHqe+..\",\n     encryptedSecurityCode: \"adyenjs_0_1_18$XUyMJyHebrra\/TpSda9fha978+..\"\n     holderName: \"S. Hopper\"\n   }\n}\nthis.client.post(\n    'https:\/\/example.com\/store-api\/handle-payment',\n    JSON.stringify(params)\n);<\/code><\/pre>\n
    Step 5: Handle additional actions<\/h2>\n
    You can get the status of the payment by making a POST<\/strong> \/store-api\/adyen\/payment-status<\/code> request with the orderId<\/code> parameter as shown below:<\/p>\n
    this.client.post(\n    'https:\/\/example.com\/store-api\/adyen\/payment-status',\n    JSON.stringify({orderId: 'XXX'})\n);<\/code><\/pre>\n
    The response will contain the following parameters:<\/p>\n\n\n\n\n\n\n\n
    Parameter<\/th>\nDescription<\/th>\n<\/tr>\n<\/thead>\n
    isFinal<\/code><\/td>\nThis is a boolean value that indicates whether or not the payment requires additional action for the shopper.<\/td>\n<\/tr>\n
    resultCode<\/code><\/td>\nReturns one of the Adyen payment result codes<\/a>.<\/td>\n<\/tr>\n
    action<\/code><\/td>\nThis optional response parameter is only returned for payments that require additional action from the user.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
    Some payment methods require additional action from the shopper, you can determine if this is the case from the response for isFinal<\/code>:<\/p>\n