Completing checkout with checkoutCompleteWithTokenizedPaymentV3 and Stripe

[alex-spataru]

Hello,

I am developing a mobile application (which is registered as a private app for my client's store) that uses the Storefront API. I have implemented most of the features that the client needs, however, I have some issues while using the checkoutCompleteWithTokenizedPaymentV3 mutation with the client's Stripe account.

For the moment, I use the following queries/mutations to build my checkout and associate customer information:

1. Create checkout with products & quantities:

   # "..." Denotes the items & qty selected by the user
   mutation { 
       checkoutCreate(input:{lineItems:[...]}) {
           checkout {
               id
           }
       }
   }

2. Wait for response, get checkout ID & associate customer information:

   # Query
   mutation checkoutCustomerAssociateV2($checkoutId: ID!, $customerAccessToken: String!) {
       checkoutCustomerAssociateV2(checkoutId: $checkoutId, customerAccessToken: $customerAccessToken) { 
           checkout { 
               id 
           } 
       } 
   }
   
   # Variables JSON
   {
       "checkoutId": $ID,
       "customerAccessToken": $CustomerAccessToken
   }

3. Wait for response, update checkout ID (if necessary) & update shipping address:

   # Query
   mutation checkoutShippingAddressUpdateV2($shippingAddress: MailingAddressInput!, $checkoutId: ID!) { 
       checkoutShippingAddressUpdateV2(shippingAddress: $shippingAddress, checkoutId: $checkoutId) {
           checkout { 
               id 
           } 
       } 
   }
   
   # Variables JSON
   {
       "checkoutId": $ID,
       "shippingAddress": {
           # Shipping address information from user
       }
   }

4. Wait for response, update checkout ID (if necessary) and get available shipping rates from store:

   query { 
       node(id: $ID) { 
           ... on Checkout { 
               id 
               availableShippingRates { 
                   ready 
                   shippingRates { 
                       handle 
                       priceV2 {
                           amount
                       } 
                       title 
                   } 
               } 
           } 
       }
   }

5. Select by default first option, and use checkoutShippingLineUpdate when user selects another option (shipping rates are displayed as a series of checkboxes in the UI). Get total order price, tax price, etc:

   mutation checkoutShippingLineUpdate($checkoutId: ID!, $shippingRateHandle: String!) { 
       checkoutShippingLineUpdate(checkoutId: $checkoutId, shippingRateHandle: $shippingRateHandle) { 
           checkout { 
               id 
               totalTaxV2 {
                   amount
               } 
               subtotalPriceV2 {
                   amount
               } 
               totalPriceV2 {
                   amount 
                   currencyCode
               } 
               shippingLine {
                   handle 
                   priceV2 {
                       amount
                   } 
               } 
           } 
       } 
   }

6. User agrees with displayed prices and clicks on the next button. Client sends payment information to Stripe and obtains a valid token, then we use the following query:

   # Query
   mutation checkoutCompleteWithTokenizedPaymentV3($checkoutId: ID!, $payment: TokenizedPaymentInputV3!) {
       checkoutCompleteWithTokenizedPaymentV3(checkoutId: $checkoutId, payment: $payment) { 
           checkout { 
               id 
           } 
           payment { 
               id 
               errorMessage 
               transaction {
                   statusV2 
                   kind 
                   amountV2 {
                       amount
                   }
               } 
           } 
           checkoutUserErrors { 
               message 
               code 
           } 
       }
   }
   
   # Variables
   {
       "checkoutId": $CheckoutID,
       "payment": {
           "billingAddress": {
               # Billing address information
           },
           "idempotencyKey":"123",
           "paymentAmount":{
               "amount": $TotalAmount,
               "currencyCode": $StoreCurrency
           },
           "paymentData": $StripeToken,
           "type":"SHOPIFY_PAY"
       }
   }

The problem is that after sending the last query, the order is not created and the checkout is listed as an "abandoned checkout" in the Shopify Admin Console, no warnings/errors are shown in the order details. The Storefront API responds with the following information:

{
   "checkoutCompleteWithTokenizedPaymentV3":{
      "checkout":{
       "id": $CheckoutID
      },
      "checkoutUserErrors":[

      ],
      "payment":{
         "errorMessage":null,
         "id": $PaymentID,
         "transaction":null
      }
   }
}

Unfortunately, this was the last step I needed in order to finish the project. But I cannot find enough information in the documentation to find a way to fix this issue. Any help would be greatly appreciated.

Greetings!

PS: I'm sorry if I am using the wrong terminology and/or do not follow "standard" Shopify developer practices. I am an embedded developer and work mostly with C/C++, I've just started developing with Shopify because of a project that I needed to accept (thanks to COVID-19 and its economical repercussions).