The Headless Magento architecture, coupled with GraphQL, enables us to deliver a more responsive and personalized user interface. This enhancement provides the agility to adapt and incorporate future payment innovations seamlessly
Below are the steps to be followed:
1. Generate customer Token for authentication
URL : {{magento_base_url}}/graphql
Request
mutation { generateCustomerToken(email: "emailid", password: "password") { token } }
Response
{ "data": { "generateCustomerToken": { "token": "1qenuvub2pk7yft7t4zd131ekyia6wu3" } } }
Note : Use this token for authentication.
2. Retrieve the Magento cart ID
URL : {{magento_base_url}}/graphql
Request
{ customerCart{ id } }
Response
{ "data": { "customerCart": { "id": "RpFl1pemya4oBw1w0l23JvBk8TsToeye" } } }
Note : Use this card_id for payment session creation and place order
3. Create mastercard payment session using Magento
Create the payment session only after billing and shipping address are added.
URL : {{magento_base_url}}/graphql
card_id : It is getting from step 2
method_code : tns_hpf or tns_hosted
Request
mutation { createNewPaymentSession(input: { cart_id:"card_id", payment_method: { code: "method_code" } }) { id version } }
Response
{ "data": {"createNewPaymentSession": { "id": "SESSION0002129083069L01811395H8", "version": "0b687ae901" } } }
4. Add card details to session using Mastercard API endpoint
URL : {{host}}/api/rest/version/{{version}}/merchant/{{merchantId}}/session/{{session}}
Request
{ "sourceOfFunds": { "type": "CARD", "provided": { "card": { "number": "512345XXXXXXXXX8", "expiry": { "month": "01", "year": "39" }, "securityCode": "100" } } } }
5. Place Order using magento default GraphQL endpoint
URL : {{magento_base_url}}/graphql
Request
mutation { setPaymentMethodAndPlaceOrder( input: { cart_id: "card_id", payment_method: { code: "method_code" } } ) { order { order_id order_number } } }