How to Associate Checkout when click login?

[action-hong]

I built a website using js-buy-sdk, and then I created checkout with the following

const client = Client.buildClient({
  domain,
  storefrontAccessToken: token
})
client.checkout.create()

then i got a webURL and navigate to the checkout Page

then i click Login to navigate my store page to login and Associate Checkout

there is a problem:

How do I get the checkoutId from the login link(xx.com/account/login?checkout_url=https://xxx.com/861536322/checkouts/46e3d1ec037401fad36db2fe880f7be8?key=b6b5dc0043e84a20b846a3ab1b3ffdc7&step=contact_information) to do the following:

It doesn't look like the key(b6b5dc0043e84a20b846a3ab1b3ffdc7) is the checkoutId

graphQLClient.send(gql(graphQLClient)`
    mutation checkoutCustomerAssociateV2($checkoutId: ID!, $customerAccessToken: String!) {
      checkoutCustomerAssociateV2(checkoutId: $checkoutId, customerAccessToken: $customerAccessToken) {
        checkout {
          id
        }
        checkoutUserErrors {
          code
          field
          message
        }
        customer {
          id
        }
      }
    }
  `, { checkoutId, customerAccessToken })

[isamu]

You need to get the customerAccessToken using customerAccessTokenCreate API.
https://shopify.dev/docs/storefront-api/reference/customers/customeraccesstokencreate

However, this library does not yet support customerAccessTokenCreate API.

[action-hong]

@isamu

I've got the token. My problem is how to get checkoutID

[isamu]

Is this?

const client = Client.buildClient({
  domain,
  storefrontAccessToken: token
})
const checkout = await client.checkout.create()
const checkoutID = checkout.id;

[isamu]

I think the checkout id is the same as before logging in on the web.

[action-hong]

I think the checkout id is the same as before logging in on the web.

yse!

but here i click the log in button to open a new page , i can not know the checkout id before unless I use localstorage(or something) to save it

i thinks there is some way i can get the checkout id from the redirect url(xx.com/account/login?checkout_url=https://xxx.com/861536322/checkouts/46e3d1ec037401fad36db2fe880f7be8?key=b6b5dc0043e84a20b846a3ab1b3ffdc7&step=contact_information))

[isamu]

The format of web url and checkoutId are different, so I don't think there is a way to convert it.
I think the only way to do this is to save the chekcoutId in your browser when you first create the checkout.

[action-hong]

There may be some way to convert to checkoutid from web url, like this #31 (comment) (get the customer id from reset url)

i have no idea~ i feel the document is not complete

[isamu]

You try to Base64 decode your chekcoutId.

You will get gid://shopify/Checkout/xxxx?key=yyyy from your chekcoutId.

Then your redirect Url is
https://aaaa.myshopify.com/11111/checkouts/xxxx?key=yyyy

You can get the checkoutId by doing the reverse order.

[action-hong]

it works! thanks!

I found that if I used atob(CheckoutID) directly in the first time, I would know this immediately !!

[action-hong]

but here is a another problem , when i get checkoutID and use checkoutCustomerAssociateV2 to associate customer and checkout and get success

then i redirect the checkout page

it still show Already have account? Login in

looks like checkoutCustomerAssociateV2 not work ?

[isamu]

I've seen before that for security reasons, Storefront login information can't be passed on to Shopify web site.

That means: even if you link with customer and checkout using the Storefront API, customer still need to log in on Shopify website.

[action-hong]

but i build my shopify website by storefront api

looks like MULTIPASS can do this

https://community.shopify.com/c/Shopify-APIs-SDKs/Storefront-Weburl-Checkout-Logged-In/m-p/575214#M38571

On web, the only way to accomplish this right now would be to use Multipass and its API to associate the customer accounts instead of using the mutation “customerCheckoutAssociatev2”. This will allow customers to be logged in and be directed to checkouts while remaining logged in. However this functionality is only available for Shopify Plus merchants right now.

But I can't find any documentation or examples to show me how to do this

[isamu]

Shopify/js-buy-sdk#561

[action-hong]

thanks but

how to passing the customer access token using the X-Shopify-Customer-Access-Token custom header in web broswer

[isamu]

In that issue, "web browsers cannot send custom headers on a page fetch unfortunately. Key is just part of the identifier for the checkout."

[action-hong]

so the only way is MULTIPASS ? ...

[isamu]

Yes, I think so.

[action-hong]

thanks ~

[isamu]

My pleasure.

[tetris-dev-web]

From the webhook you can get abandoned_checkout_url
abandoned_checkout_url=https://????.com/11111/checkouts/xxxx/recover?key=yyyy
xxxx is the token of checkout

The checkout ID using Storefront API is
base64_encode("gid://shopify/Checkout/xxxx?key=yyyy");