Documentation on `checkoutCompleteWithTokenizedPaymentV3:paymentData`

[cansin]

Hi,

I am trying to implement a custom checkout page relying on Storefront APIs. I am able to use related mutations like`shopifyCheckoutCreate` `checkoutLineItemsReplace`, `checkoutShippingLineUpdate`, `checkoutShippingAddressUpdateV2` without problems. Right now I am struggling with what data to send to `checkoutCompleteWithTokenizedPaymentV3` after I process the payment on my custom payment processor. 

Specifically what `type` needs to be used for `payment` for custom payment processing? (I am assuming `VAULT`) Plus, what should the JSON data look like at `paymentData`? The documentation simply states "A simple string or JSON containing the required payment data for the tokenized payment." which is not helpful.

Thanks.

[tolgapaksoy · Accepted solution]

Hi Cansin

These are the variables I use:

{
  "checkoutId": "Z2lkOi8vU2hvcGlmeS9FeGFtcGxlLzE=",
  "payment": {
    "paymentAmount": {
      "amount": "24.99",
      "currencyCode": "EUR"
    },
    "idempotencyKey": "myrandomclientidempotencykey",
    "billingAddress": {...},
    "paymentData": "tok_1EuJbkJAXUm7Q2VgiG2dt0yN",
    "type": "SHOPIFY_PAY"
  }
}

The paymentData token is created using Stripe Token API: https://stripe.com/docs/api/tokens/create_card

Obviously if you want to Vault the creditcard, you will have to create a Vault Session first, and use that token in paymentData and the type should be "VAULT"

[cansin]

@tolgapaksoy thanks for the reply! I am guessing in order to create `tok_1EuJbkJAXUm7Q2VgiG2dt0yN` token you were relying on `shopify_payments_account_id` returned by Shopify. So, your app is probably a sales channel app? (i.e. I am not able to find an API where I can fetch `shopify_payments_account_id` except for the Checkout Admin API, which requires read_checkout, which is apparently only enabled for sales channel apps) Or were you able to just feed in any token created by any Stripe instance?

[cansin]

Ah, I am stupid there is a query for that at Storefront API that I did not realize before. Cheers!

[cansin]

For people that might land here through a search, the query in question is at https://shopify.dev/docs/storefront-api/reference/object/shop/paymentsettings?api[version]=2020-04

[cansin]

Huh, though I am not able to see a way to fetch the Stripe secret key attached to that id. So, I would not be able to create the token through Stripe :confused: 

[tolgapaksoy]

A secret key will never be exposed to a client application.

You should create the token on your server, a.k.a. the sales channel app. Your server should have access to Stripe.

[cansin]

Yeah right that makes sense. My question was more around how could I even get access to the secret key so that I can start using it on my backend. As I won't have the login credentials for the given Stripe payment id, is there a way to acquire the secret key somehow?

[cansin]

I guess this question is quite specific to North American market, where Stripe integration is disable in favor of Shopify as a payment provider.

[cansin]

Well, the returned value for `"shopifyPaymentsAccountId"` is `null`, so I guess there is absolutely no possible way to create a custom checkout page for Shopify... Quite a weird limitation, given they claim Shopify payment provider uses Stripe as the engine. I wish they provided a way for us to access the underlying Stripe account's details so that we could use it to implement our own checkout pages using Stripe's JS-kit.

[cansin]

Here is the full return value for reference:

{
  "data": {
    "shopify": {
      "shop": {
        "paymentSettings": {
          "acceptedCardBrands": [
            "VISA",
            "MASTERCARD",
            "AMERICAN_EXPRESS",
            "DISCOVER",
            "JCB",
            "DINERS_CLUB"
          ],
          "cardVaultUrl": "https://elb.deposit.shopifycs.com/sessions",
          "countryCode": "US",
          "currencyCode": "USD",
          "enabledPresentmentCurrencies": [
            "USD"
          ],
          "shopifyPaymentsAccountId": null,
          "supportedDigitalWallets": [
            "SHOPIFY_PAY",
            "APPLE_PAY",
            "GOOGLE_PAY"
          ]
        }
      }
    }
  }
}

[tolgapaksoy]

You need to request "payment processing" capabilities from Shopify staff. If you convert your app to a sales channel, you will see that you can request payment processing. If successful, the "shopifyPaymentsAccountId" will be a Stripe Account ID which you can use. Refer to the Stripe API on usage of this.

We already had a talk about this in this thread btw: https://community.shopify.com/c/Storefront-API-SDKs/Confusing-Documentation-around-Stripe-and-Shopif...

[cansin]

Right, I guess that is a no-go for private apps, given they cannot be converted into sales channel apps. Thanks a lot for your help Tolga.

[arturoTryp]

Hello Casin, Arturo from Mexico writes to you. I am writing to you because at this moment we are in my team developing, or trying to develop an app in react native using Storefront, and we just have the same problem as you. When trying to process payments and complete the checkout we are having the problem of knowing how to generate this token. We do not want to process the payment directly through shopify, but instead process it in our own Spreedly payment processor, and be able to complete this checkout if the payment is successful.

Do you think you can help us if you managed to solve this.

thanks in advance

[arturoTryp]

Hello Tolgapaksoy, Arturo from Mexico writes to you. I am writing to you because at this moment we are in my team developing, or trying to develop an app in react native using Storefront, and we just have the same problem as you. When trying to process payments and complete the checkout we are having the problem of knowing how to generate this token. We do not want to process the payment directly through shopify, but instead process it in our own Spreedly payment processor, and be able to complete this checkout if the payment is successful.

Do you think you can help us if you managed to solve this.

thanks in advance