Hi! We’re building a mobile app providing a fully-native checkout experience (without redirecting users to a webview) using the Storefront APIs.
So far, we’ve got to the point of creating a Checkout object, and we’d like to test completing the checkout using the Bogus gateway by vaulting the card first.
We’re sending this request to the card server:
POST https://deposit.us.shopifycs.com/sessions
{
"credit_card": {
"number": "4242 4242 4242 4242",
"name": "John Doe",
"month": 12,
"year": 2029,
"verification_value": "123"
}
}
Response:
{
"id": "west-xxxxxxxxxxx"
}
Then we use the checkoutCompleteWithTokenizedPaymentV3 mutation to complete the payment using the above session id:
POST https://our-store-name.myshopify.com/api/2023-04/graphql.json
mutation checkoutCompleteWithTokenizedPaymentV3($checkoutId: ID!, $payment: TokenizedPaymentInputV3!) {
checkoutCompleteWithTokenizedPaymentV3(checkoutId: $checkoutId, payment: $payment) {
checkout {
id
}
payment {
id
idempotencyKey
amount {
amount
currencyCode
}
}
checkoutUserErrors {
code
field
message
}
payment {
id
errorMessage
nextActionUrl
creditCard {
brand
}
}
}
}
Variables:
{
"checkoutId": "{{checkoutId}}",
"payment": {
"billingAddress": {
...
},
"idempotencyKey": "...",
"paymentAmount": {
"amount": "19.99",
"currencyCode": "USD"
},
"test": true,
"paymentData": "west-xxxxxxx",
"type": "VAULT"
}
}
The response is successful and there are no GraphQL errors returned. However, when inspecting the order in the Shopify admin, it’s listed in the “Abandoned checkouts” section, and inside, the error is:
"****Unable to process a payment for $19.99 USD using a card ending in ••• via Vault."
“Failed to find requested vault card”
Could you please point to us how we should complete the checkout process natively within the mobile app using the Storefront APIs, and test it using the Bogus gateway?
Thanks!