question

Why are you calling the tokens endpoint? The point of using the iframe is that tokenization happens on the Clover side to reduce your PCI exposure.

Hello,

I am getting this exact same error testing my custom gateway script and HTML form, to implement the iframe integration to make a charge request, in the sandbox.

I'm using:

<script src="https://checkout.sandbox.dev.clover.com/sdk.js"></script>

I'm passing the correct Test Merchant public ecommerce token to clover.

These calls in my code are successful, as I can see in the console:

const clover = new Clover('XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX');
const elements = clover.elements();

My HTML form is working correctly, and I'm able to enter the card# and other info. I am using ad hoc Mastercard# 5137221111116668.

When I click submit, this JS code is called:

const form = document.getElementById('payment-form');
form.addEventListener('submit', function(event) {
   event.preventDefault();

   clover.createToken()
     .then(function(result) {
       if (result.errors) {
         Object.values(result.errors).forEach(function (value) {
               console.log(value);
         });
       } else {
         alert( result.token );
       }
     }).catch(function(data){
       console.log(data);
     });
 });

Note that createToken is also called in this way by the WooCommerce Clover plugin that I am using as an example. (Function cloverChargeToken in /public/js/woo-clv-custom.js.)

WooCommerce Clover plugin:

Clover Payments plugin uses an iframe to collect card information. An associated JavaScript directly communicates with a Clover server to [tokenize] the card details. Clover iframe-based tokenizer is updated with any future API changes, so your app requires less maintenance.

It is createToken that downstream makes a request to https://token-sandbox.dev.clover.com/v1/tokens, which is throwing the CORS error. I don't think there's anything I can do on my end to resolve this, but I'm open to suggestions.

I then have other code that I haven't hooked up yet, which will add the token to the hidden form item:

hiddenInput.setAttribute('name', 'cloverToken');

I don't know what else I can do now, except try the live environment instead of sandbox.

Any help much appreciated.

I just tried the same test with the live merchant token and live environment, and got the same result.

Would it help to use Node.js, Express.js, and then...

app.use((req,res,next)=>{
    res.setHeader('Access-Control-Allow-Origin','*');
    res.setHeader('Access-Control-Allow-Methods','GET,POST,PUT,PATCH,DELETE');
    res.setHeader('Access-Control-Allow-Headers','Content-Type','Authorization');
    next(); 
})

Thanks. The work I'm doing is time critical, so thanks for the answer on a Sunday.

I just turned off recaptcha at Ecommerce API Tokens in the Test Merchant and retested in the sandbox. I got the same result, "Cross-Origin Request Blocked" on your internal code POST to https://token-sandbox.dev.clover.com/v1/tokens.

The WooCommerce Clover plugin is using the same iframe method, and also calling clover.createToken, so can you tell me for sure that your Clover plugin for WordPress is currently working? If so, there must be some code in the WordPress/WooCommerce environment that is dealing with the CORS headers. The plugin has some very negative reviews.

The WooCommerce plugin has this function in /src/StoreApi/Authentication.php:

public function send_cors_headers( $value, $result, $request ) {
•••
    // Send standard CORS headers.
    $server = rest_get_server();
    $server->send_header( 'Access-Control-Allow-Methods', 'OPTIONS, GET, POST, PUT, PATCH, DELETE' );
    $server->send_header( 'Access-Control-Allow-Credentials', 'true' );
    $server->send_header( 'Vary', 'Origin', false );
•••

This gets called when the store API Authentication is initialized, and appears to be related to WordPress REST API.

If anyone knows how to set these CORS headers properly, so I can add that to my HTML/javascript code for the iframe, please help. (UPDATE: Looking more at .htaccess now)

Aside from that, I will also attempt to test this in the live environment, without recaptcha set.

Yeah, the Gareth code doesn't work as is, so I modified it so it does work. If you read my post above, you'll see I'm much farther along than you imagine. Things are working, but my Firefox console is reporting the error I indicated, related to CORS.

I pretty much have to assume that there's got to be some way to set the CORS headers from my end, for example in .htaccess, but so far what I've tried is not working. My server is running Apache 2 and CentOS 7.

Again, here is the error, which happens when your code attempts to get a resource from https://token-sandbox.dev.clover.com/v1/tokens...

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://token-sandbox.dev.clover.com/v1/tokens
(Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 401.

I can see the code in your SDK that is calling this, which is in account-address-element_18.entry.js, in function, proceedWithTokenization():

const e = await (await fetch(this.baseTokenizationUrl, {
                method: "POST",
                body: JSON.stringify(y),
                headers: {
                    Accept: "*/*",
                    "Content-Type": "application/json",
                    apikey: this.apiKey,
                    "X-Clover-Client-Type": "HOSTED_IFRAME"
                }
            })).json();
            d = {
                card: e.card,
                token: e.id
            }

And here is the code in the same file that sets the baseTokenizationUrl:

function getTokenizationUrl(e) {
    if (isDev(e)) {
        const t = e.indexOf("//") + "//".length,
            n = e.indexOf("checkout.") + "checkout.".length;
        return `${e.substring(0,t)}token-${e.substring(n)}/v1/tokens`
    }
return "https://token.clover.com/v1/tokens"
}

I've searched the forum and googled... the only reference to this particular problem is this thread.

So, this is what I'm currently seeing for the sandbox. I will also try turning off recaptcha for the live merchant, and retest w/ live merchant ecommerce token and live environment. I'm guessing it will be the same result.

Thanks for taking a look at this.

You are going down the wrong path and not making much sense. The token call is made from within the iframe on a page Clover controls, so you worrying about or trying to do something with CORs headers makes no sense. I am guessing you are using the wrong token when you are initializing the SDK. You should be using the PAKMS or public key. Here is a working example which basically proves there is no CORs issue on Clover's end. However, I am not sure if the token comes from a developer app making a call to retrieve the PAKMS or an e-commerce merchant token.

https://codepen.io/davidmarginian/pen/JjXLRwM

Note, you cannot make the charge request from the front-end or you will get a CORs error. That call MUST be made from the server.

FYI, I just logged into my developer account, create a merchant ecommerce token, plugged the public key into the working example I posted above (https://codepen.io/davidmarginian/pen/JjXLRwM) and it worked. So, everything is working fine, not sure what you are doing wrong.

Thanks for that. I think it is the same code as Gareth's. I brought the code over to my server, and it works.

The difference is not the code... the difference is David's public key works, mine doesn't work. (And both are using https://checkout.sandbox.dev.clover.com/sdk.js)

Here's the thing... in my developer account, Test Merchant, Ecommerce API keys, I am definitely using the correct public key (IFRAME). So, what's going on?

I think I might know...

Last night when I was testing, I noticed there are two different developer account logins, one is at https://www.clover.com/global-developer-home, and the other at https://www.clover.com/developer-home.

When I first started this development a few days ago, I used https://www.clover.com/developer-home. Then last night, reading the Clover documentation, I realized I should be using https://www.clover.com/global-developer-home, so I started using it. But then something went wrong and when I attempted to log into global-developer-home, it would immediately kick me out back to the login page without a message. So I went back to using developer-home.

What should I do now?

bryanvargas or anyone else, what is you assessment of all this? Why doesn't my Test Merchant ecommerce API public token work, whereas the same for other developer accounts does work? Do you concur that this code we are using in the thread here, which is successful, should also work for the production environment? Meaning, using the production SDK and the public token from the live merchant account? I tried this with my test code here and I'm getting a CORS error, same as with the sandbox. What's wrong with my tokens?

Thanks for your input.