question

jkuhn avatar image
jkuhn asked David Marginian Deactivated 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 'https://token-sandbox.dev.clover.com/v1/tokens' from origin 'https://checkout.sandbox.dev.clover.com' 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. https://docs.clover.com/clover-platform/docs/using-the-clover-hosted-iframe

PaymentsAPI Token
2 comments
10 |2000
Toggle Comment visibility. Current Visibility: Viewable by all users

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

David Marginian avatar image David Marginian ♦♦ commented ·

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

0 Likes 0 ·
jkuhn avatar image jkuhn commented ·

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. www.foodtruck.pub

0 Likes 0 ·

2 Answers

David Marginian avatar image
David Marginian Deactivated answered

The solution to this was to use the PAKMS key for the v1/tokens call as described in the documentation - https://docs.clover.com/clover-platform/docs/using-the-clover-hosted-iframe.

10 |2000
Toggle Comment visibility. Current Visibility: Viewable by all users

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 - https://codepen.io/gareth-dsouza/pen/RwPjBXJ

12 comments
10 |2000
Toggle Comment visibility. Current Visibility: Viewable by all users

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

jkuhn avatar image jkuhn commented ·

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 ·
gd213 avatar image gd213 ♦♦ jkuhn commented ·

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.
https://docs.clover.com/clover-platform/docs/using-the-clover-hosted-iframe#section-configuring-the-sdk

1 Like 1 ·
jkuhn avatar image jkuhn commented ·

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: "https://scl-sandbox.dev.clover.com/v1/charges?access_token=<masked>&amount=948&currency=USD&capture=true&description=Food%20Truck%20Pub%20order%20for%20customer%20John%20Kuhn&externalReferenceId=FT0000002168&source=clv_1TSTSEQ3qN1X89o3a3LotuxH"

Response:

StatusCode: Forbidden

403 Forbidden

code:processing_error

messsage:Invalid permissions for expandable fields.

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

A charge is a POST, not a GET - https://docs.clover.com/clover-platform/docs/ecommerce-accepting-payments.

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

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?

https://scl-sandbox.dev.clover.com/v1/charges?access_token=%3Cmasked%3E&amount=948&currency=USD&capture=true&description=Food%20Truck%20Pub%20order%20for%20customer%20John%20Kuhn&externalReferenceId=FT0000002168&source=clv_1TSTSEQ3qN1X89o3a3LotuxH


clover example curl request:

curl --request POST \
  --url https://scl.clover.com/v1/charges \
  --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