Solved

Documentation on `checkoutCompleteWithTokenizedPaymentV3:paymentData`

cansin
Excursionist
27 0 23

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.

Accepted Solution (1)

tolgapaksoy
Shopify Partner
105 7 64

This is an 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"

View solution in original post

Replies 14 (14)

tolgapaksoy
Shopify Partner
105 7 64

This is an 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
Excursionist
27 0 23

@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
Excursionist
27 0 23

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

cansin
Excursionist
27 0 23

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
Excursionist
27 0 23

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
Shopify Partner
105 7 64

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
Excursionist
27 0 23

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
Excursionist
27 0 23

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
Excursionist
27 0 23

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
Excursionist
27 0 23

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
Shopify Partner
105 7 64

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...

Screenshot 2020-07-01 at 20.35.42.png

cansin
Excursionist
27 0 23

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
Tourist
5 0 3

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
Tourist
5 0 3

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