How to create a headless checkout screen with APIs?

[erikvillegas]

Hello! My store site is fully headless, with the exception of our current checkout screen which uses the standard Shopify Checkout template. I'm looking to make our checkout screen headless as well, built using React, and am having trouble understanding what APIs could be used for this. From my understanding, the Storefront API does not have any APIs for processing a checkout with a payment, but the Admin API appears to have support for this here.

Is the Admin API approach the way to go here, and if so, how might I use it with Shopify Payments after a customer has entered their payment info?

Thank you!

[hanebuechen2000]

Hello! Did you find a way to create a headless checkout? I am trying to do the same thing and I can not find any answers or resources.

[erikvillegas]

Hi there! I couldn't quite get this to work due to how involved it is, but Shopify does provide Storefront APIs for this purpose: https://shopify.dev/docs/api/storefront/2024-01/mutations/checkoutCompleteWithCreditCardV2

However, only PCI-compliant sales channel apps that have been approved by Shopify for payment processing can invoke these APIs. More info on that process can be found here! https://shopify.dev/docs/apps/selling-strategies/channels/getting-started#request-payment-processing