jkuhn avatar image
jkuhn asked David Marginian answered

CORS Error using new HTML Embedded Form

I am implementing the brand new HTML Embedded Payment form. I have it almost working but am now getting a CORS error when I submit the button on the payment form. Access to fetch at '' from origin '' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled. Any suggestions? I have followed the instructions here and am using the MerchantID given back to me during OAuth.

PaymentsAPI Token
10 |2000

Up to 2 attachments (including images) can be used with a maximum of 512.0 KiB each and 1.0 MiB total.

I pinged the ecomm team, may not be able to get you an answer until early next week.

0 Likes 0 ·

Thank you. I tried adding a header on my side to see if it had any effect and it did not. I think this is on your side within the iframe when your script tries to call out to another domain on your side. Access-Control-Allow-Origin.
I have a hosted service with over 400 food trucks signed up and right now they can only use Square to process payments and I know probably 50% of them would like to use clover.

0 Likes 0 ·
David Marginian avatar image
David Marginian answered

The solution to this was to use the PAKMS key for the v1/tokens call as described in the documentation -

10 |2000

Up to 2 attachments (including images) can be used with a maximum of 512.0 KiB each and 1.0 MiB total.

gd213 avatar image
gd213 answered jkuhn commented

Seems like the OPTIONS and POST calls are working. Tried to reproduce it here -

10 |2000

Up to 2 attachments (including images) can be used with a maximum of 512.0 KiB each and 1.0 MiB total.

OK thank you I will check it out. Can you tell me if a PAKMS key is required? I was trying to use either an access token or merchantID that was retrieved during OAuth.

0 Likes 0 ·

Yes, the Public Access Key Management System (PAKMS) key is needed to call v1/tokens and is what the server checks to validate that request. Initializing the Clover SDK component with the pakms key will ensure that its passed on subsequent requests to the server from the iframe.

More info on the PAKMS key generation and usage can be found here.

1 Like 1 ·

I'm not sure if it's related or not. However, after I implemented the PAKMS key and passed it into the embedded clover form when instantiating a new Clover(MyAPIKeyHere) object, the CORS error mysteriously went away. Thanks for your help. I am happy to post this elsewhere, however now I'm onto the next issue. When taking the embedded HTML token response that Clover returns after a credit card is entered and submitted, I take that token and pass it in as the source parameter to make a "Charge" call. Below is my full request and the clover error being returned. I am using my OAuth access_token value. I don't think it's an issue posting this since this is in the Sandbox. I seem to either get back a Forbidden or Unauthorized for each call that I do.

Request: "<masked>&amount=948&currency=USD&capture=true&description=Food%20Truck%20Pub%20order%20for%20customer%20John%20Kuhn&externalReferenceId=FT0000002168&source=clv_1TSTSEQ3qN1X89o3a3LotuxH"


StatusCode: Forbidden

403 Forbidden


messsage:Invalid permissions for expandable fields.

0 Likes 0 ·
jkuhn avatar image jkuhn David Marginian ♦♦ ·

Yes, that is what I am doing. Even in your example on this page you sent, it is still listed as a request. Do you see anything wrong with the url I previously submitted?

clover example curl request:

curl --request POST \
  --url \
  --header 'accept: application/json' \
  --header 'authorization: Bearer {auth_token}' \
  --header 'content-type: application/json' \
  --data '{"amount":1800,"currency":"usd","source":"{token}"}'
0 Likes 0 ·
Show more comments

Welcome to the
Clover Developer Community