Read about using GraphQL in your checkout.
Headless e-commerce architecture is based on a headless content management system (CMS) that stores, manages, and delivers content without a front end and only through an API.
On a headless platform, the front end (or the head) has been decoupled and removed, leaving only the back end.
Back-end developers use APIs to deliver things like products, blog posts, or customer reviews. Front-end developers work on how to present that content using any framework they desire.
GraphQL is a query language developers can use to retrieve data from a server. Adobe Commerce uses GraphQL as an alternative way of retrieving front-end information.
For more information about GraphQL, refer to the GraphQL checkout tutorial.
Klarna payments requires cart information to initiate the payment session. For this reason, the below steps can be executed only after a cart has been created. Please follow Adobe's GraphQL checkout tutorial tutorial to create a cart.
createKlarnaPaymentsSessionmutation to generate the
client_tokenand retrieve a list of
payment_categoriesavailable to the customer.
authorize()call to Klarna. Then, the customer follows the authorization steps on the Klarna inline modal. During this phase, the communication between the PWA client and Klarna is handled directly by the Klarna Payments JS SDK.
authorization_tokenin response to the authorize call.
authorization_tokenas part of the
setPaymentMethodOnCartmutation to set the payment method to
authorization_tokenis passed in the
During the purchase flow, the cart can be updated by adding additional products, applying coupons, and changing the billing or shipping address. All these events might cause a change in Klarna options for the specific customer.
In order to always present customers with the latest available payment options provided by Klarna, the PWA client must:
When you set the payment method to Klarna in the
setPaymentMethodOnCart mutation, the payment_method object must contain a klarna object.
The following example shows the
setPaymentMethodOnCart mutation constructed for the Klarna payment method.