Private App Credit Card Vaulting Not Implemented

New Member
4 0 0

Hi All,

 

I'm developing a private app using the js-buy SDK and the frontend api. I'm able to complete the entire checkout flow up until the payment vaulting step.

https://help.shopify.com/en/api/storefront-api/guides/checkout-guide#shopify-card-vault

 

I always receive a 501 NOT IMPLEMENTED error whenever I send a request to that endpoint.

 

How can I successfully create a payment session for a credit card? Is this allowed for private apps? Does my private app have to be a sales channel before I can use this? I'm thoroughly confused.

 

----

 

The store in use is a development store

0 Likes
Shopify Staff
Shopify Staff
1369 56 202

Hey @almax120.

 

Strange, could you provide an X-Request-Id response header value? This will show me in logs what might have happened.

 

Cheers.

0 Likes
New Member
4 0 0

Hi @Alex ,

 

I'm attempting to reproduce the issue (running the same code as before) and i'm running into a new issue. Requests through the shopify-buy js module always return a 403 so im not able to even reproduce.

 

I ran a test, attempting to get store information through the sdk and still gets a 403: 

 
access-control-allow-origin: *
cf-ray: 502b2f3caf468014-SAN
content-encoding: gzip
content-language: en
content-security-policy: frame-ancestors 'none'; report-uri /csp-report?source%5Baction%5D=query&source%5Bapp%5D=Shopify&source%5Bcontroller%5D=api%2Fgraphql&source%5Bsection%5D=api&source%5Buuid%5D=ea81e573-ebde-47bf-9e7d-3920c1646833
content-type: text/html
date: Wed, 07 Aug 2019 18:06:27 GMT
expect-ct: max-age=604800, report-uri="https://report-uri.cloudflare.com/cdn-cgi/beacon/expect-ct"
server: cloudflare
status: 403
strict-transport-security: max-age=7889238
vary: Accept-Encoding
x-content-type-options: nosniff
x-dc: gcp-us-central1,gcp-us-central1
x-download-options: noopen
x-frame-options: DENY
x-permitted-cross-domain-policies: none
x-request-id: ea81e573-ebde-47bf-9e7d-3920c1646833
x-shardid: 108
x-shopid: 7396196461
x-shopify-stage: production
x-sorting-hat-podid: 108
x-sorting-hat-shopid: 7396196461
x-xss-protection: 1; mode=block; report=/xss-report?source%5Baction%5D=query&source%5Bapp%5D=Shopify&source%5Bcontroller%5D=api%2Fgraphql&source%5Bsection%5D=api&source%5Buuid%5D=ea81e573-ebde-47bf-9e7d-3920c1646833
The message in the payload says: message"an unknown error has occured."
 
 
This one was my fault, wrong store domain. Sorry, standby for the reproduction
0 Likes
New Member
4 0 0

@Alex 

It seems there is no x-request-id for this endpoint

 

Screen Shot 2019-08-07 at 12.00.15 PM.png

 

This is the code used to make the request:

export const getPaymentSessionIDForPaymentCard = ({ number, firstName, lastName, month, year, verificationValue }) => {
  const data = {
    amount: '20.00',
    unique_token: '98765432',
    credit_card: {
      number,
      first_name: firstName,
      last_name: lastName,
      month,
      year,
      verification_value: verificationValue
    }
  }
  return axios.post('https://elb.deposit.shopifycs.com/sessions', data).then(res => res.id)
}
0 Likes
Shopify Staff
Shopify Staff
1369 56 202

It looks like your request method is OPTIONS, is this being done deliberately? Vaulting credit cards is done with a POST request.

 

Cheers.

0 Likes
New Member
4 0 0

@Alex The OPTIONS is sent by the browser to check for CORS. The API should set a "Access-Control-Allow-Origin" header. Sending this request from nodejs (not browser) it works, but that also means now that I have to be PCI compliant since my server is the one receiving credit card info and passing it on to the vault.

 

All in all, i have a feeling that my end goal cant be accomplished but the docs deceivingly tell me that it can be accomplished. The goal is the following:

Allow customers to checkout from my custom storefront (not hosted on shopify) without leaving the custom storefront. No redirect.

 

 

0 Likes