As far as I know and understand from a few hours with Insomnia and Shopify API ecosystem, you can complete a checkout using checkoutCompleteWithCreditCardV2 which you won't find documented in Storefront API, but you can find all you need in either Mobile Buy SDK or Unity SDK sources. However, you will need to use card vaulting which is part of the Sales Channel SDK, more specifically the Checkout API.
I am not sure how Shopify limits the use of that API and am awaiting a response from someone who'd know (app requirements, Shopify plan requirements etc.).
Otherwise, the process is quite straight forward using Storefront API GraphQL:
# create a checkout
# (using query variables for simplicity sake)
# you will want to add lineItems, email, shippingAddress ...
mutation checkoutCreate($input: CheckoutCreateInput!) {
checkoutCreate(input: $input) {
userErrors {
field
message
}
checkout {
id
}
}
}
# query shipping rates handle
# create shipping line
# (using query variables for simplicity sake)
# you will want to add checkout id from above
# mutation result and shipping rate handle from
# above query (see docs query { node(id) { ... on Checkout } { availableShippingRates } } or similar
mutation checkoutShippingLineUpdate($checkoutId: ID!, $shippingRateHandle: String!) {
checkoutShippingLineUpdate(checkoutId: $checkoutId, shippingRateHandle: $shippingRateHandle) {
userErrors {
field
message
}
checkout {
id
}
}
}
Now with that you need to proceed to the Checkout API and add a payment by old-school REST POST-ing to https://shopify-vault-endpoint/sessions
{
"payment": {
"amount": "1.00",
"unique_token": "GENERATE_UUID_HERE",
"credit_card":{
"number": "1",
"month": "12",
"year": "2020",
"verification_value": "123",
"first_name":"Josh",
"last_name":"Rich"
}
}
}
Which returns a session ID which can be used for next mutation back in Storefront API:
# complete checkoutwith CC
# note the payment object field vauleId will
# receive the session ID from previous response
mutation checkoutCompleteWithCreditCardV2($checkoutId: ID!, $payment: CreditCardPaymentInputV2!) {
checkoutCompleteWithCreditCardV2(checkoutId: $checkoutId, payment: $payment) {
userErrors {
field
message
}
checkout {
id
webUrl
}
}
}
Probably mising something here, but that's how far I've got so far. The documentation is admitedly very confusing not for lack of content, but because the API's, SDK's are so fragmented, tied to specific "allowances" or "restrictions" on behalf od Shopify or the subscription plan or the app type and I suppose, without describing this ecosystem clearly and with good end-to-end samples, its difficult to follow.
