Storefront API - checkout and payment

Bart3
Visitor
2 0 3

Hello,

Im building custom storefront based on Storefront API. From what i see in documentation - checkout can be created and manipulated, but there is no information about completing and payments. I found some posts on this forum asking about checkoutCompleteWithTokenizedPayment etc. but they are seems outdated, since there is no checkoutCompleteWithTokenizedPayment mutation mentioned in Storefront API docs.

I see there is CreditCardPaymentInput input object, and Payment object in docs, but there is no mutations for complete checkout. So the question is:
How i can build whole checkout flow on custom storefront, and completing the checkout without need to redirect to Shopify checkout page?

Replies 7 (7)

Radoslav
Tourist
4 0 1

Same question as above, can i finish checkout with payment ? Can i add credit card to vault and complete payment process ?

Pvl
New Member
5 0 0

Hi there. I have the same question. It would be great to hear some info on whether it is possible or not.

Sureesh
Visitor
2 0 0

Hi,

I am also looking an Answer for this question.

KarlOffenberger
Shopify Partner
1873 184 899

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.

vkhankina
Shopify Partner
3 0 1

I would like to notice that Shopify Vault Endpoint can't be accessed from JS because of CORS policy. It responds with 501 - Not implemented to OPTIONS request. Should I have my own service to communicate with Shopify Vault? If so our service will receive card details which requires PCI compliance certification as I know.

bpav
Shopify Partner
3 0 1

How on earth isn't this answered yet. Did you figure this one out? I can believe shopify makes it so hard to do something so basic.

arturoTryp
Tourist
5 0 3

Hi Karl, 
I'm dealing with a lot of trouble here while trying to completeCheckout using tokenized cards (with spreedly). I just tryed everything arround the Shopify documentation, but still can not complete a payment using the Storfreont API. Would be awesome if we can talk for some minutes about this. I'm looking for some eng to give us some consulting hours to finish our development.

Thanks on advance !