Headless integration

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.

Requirements

Before you start building a Shopware 6 Headless integration, set up the Shopware 6 plugin.

Step 1: Get available payment methods

Get the available payment methods, so you can show them in the checkout form.

Make a POST store-api/payment-method request to get the available payment methods. Specify:

The response contains an adyenData object for each available payment method.

In the next step, use information from the adyenData objects to show payment methods on your checkout page.

Step 2: Show available payment methods

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.

Render the input fields using our Drop-in or Components

Use one of our Pre-built UI options.

1. From your server, make a GET /store-api/adyen/payment-methods request. The response you get is the same as an Adyen Checkout API /paymentMethods response.

Saving the shopper's payment details

The shopper's payment details are collected by the Drop-in and Component in a STATE_DATA object that you send in Step 4 when you make a payment.

Step 3: Create order

When the shopper submits the order, create the order by making a store-api/checkout/order endpoint.

Step 4: Make payment

Make a POST store-api/handle-payment request, including the shopper's payment details in the stateData parameter. For example:

this.client = new StoreApiClient();
let params = {
            'orderId': 'XXX',
            'finishUrl': 'https://example.com/checkout/finish?orderId=XXX',
            'errorUrl': 'https://example.com/checkout/finish?orderId=XXX&paymentFailed=1',
        };
// Add payment state data
params['stateData'] = {
    paymentMethod: {
     type: "scheme",
     encryptedCardNumber: "adyenjs_0_1_18$k7s65M5V0KdPxTErhBIPoMPI8HlC..",
     encryptedExpiryMonth: "adyenjs_0_1_18$p2OZxW2XmwAA8C1Avxm3G9UB6e4..",
     encryptedExpiryYear: "adyenjs_0_1_18$CkCOLYZsdqpxGjrALWHj3QoGHqe+..",
     encryptedSecurityCode: "adyenjs_0_1_18$XUyMJyHebrra/TpSda9fha978+.."
     holderName: "S. Hopper"
   }
}
this.client.post(
    'https://example.com/store-api/handle-payment',
    JSON.stringify(params)
);

Step 5: Handle additional actions

You can get the status of the payment by making a POST /store-api/adyen/payment-status request with the orderId parameter as shown below:

this.client.post(
    'https://example.com/store-api/adyen/payment-status',
    JSON.stringify({orderId: 'XXX'})
);

The response will contain the following parameters:

Some payment methods require additional action from the shopper, you can determine if this is the case from the response for isFinal:

• When isFinal is true, the payment has been completed and no further action is required.
• When isFinal is false, the action parameter will contain the payload needed to mount the UI elements for additional actions.

Note: Consult the Web Component or Drop-in documentation for how to handle additional front end actions.

After your shopper completes the additional action:

1. Access the additional input from the shopper by implementing the onAdditionalDetails event listener of your Drop-in or Web Component.
2. Submit the additional details by making a POST /store-api/adyen/payment-details request with the orderId and stateData parameters.

handleOnAdditionalDetails (state) {
    this.client.post(
        'https://example.com/store-api/adyen/payment-details',
        JSON.stringify({orderId: 'XXX', stateData: state.data})
    );
}

Step 6: Present payment results

After the shopper completes the payment and no further actions are required on the front end or client app, use the resultCode to inform the shopper of the payment status.

For other possible resultCode values and recommended messages that you can present to your shopper, see Result codes.