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.
createKlarnaPaymentsSession
mutation to generate the client_token
and retrieve a list of payment_categories
.client_token
and the payment_categories
available to the customer.payment_categories
.client_token
and payment_categories
to initialize the Klarna payments JavaScript SDK.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_token
in response to the authorize call.authorization_token
as part of the setPaymentMethodOnCart
mutation.setPaymentMethodOnCart
mutation to set the payment method to klarna_<identifier-value>
. The authorization_token
is passed in the klarna
object.placeOrder
mutation.placeOrder
mutation.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.
mutation {
setPaymentMethodOnCart(input: {
cart_id: "3WxC8gQn4Fbo55yqVLSiUFJ9fmEwnlxG"
payment_method: {
code: "klarna_pay_later"
klarna: {
authorization_token: "e9abc610-6748-256f-a506-355626551326"
}
}
}) {
A sample setPaymentMethodOnCart
mutation for the Klarna payment method.
{
"data": {
"setPaymentMethodOnCart": {
"cart": {
"selected_payment_method": {
"code": "klarna_pay_later"
}
}
}
}
A sample response to the setPaymentMethodOnCart
mutation.