Coinbase Sameorigin

Question

My coinbase payment button won't show. I'm getting this error message from coinbase:

Refused to display 'https://coinbase.com/transactions' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'

Their customer service sucks, I've been waiting 2 days for a fix for this.

I've tried in htaccess

Header set Access-Control-Allow-Origin "%{HTTP_ORIGIN}e" env=HTTP_ORIGIN

<ifModule mod_headers.c>
Header always set Access-Control-Allow-Origin: "*"
Header always set Access-Control-Allow-Methods  "POST, GET, PUT, DELETE, OPTIONS"
Header always set Access-Control-Allow-Headers "X-    Requested-With"
</ifModule>

none of this is working...

how do I fix this?

The iframe is just how their buttons work. If I use their demo buttons it works fine. When I change the data-code on the demo button to my data code, it throws that error.

Answer 1

Coinbase will not allow you to put the transactions page as an iframe. If you log into your account and go here (https://coinbase.com/merchant_tools), you can create a payment button that will allow you to accept button.

Answer 2

Im posting this here because.

I was using this react component: https://github.com/coinbase/react-coinbase-commerce

My Charge looked like:

const myNewChargeObj = {
  addresses:
   { bitcoincash: 'qpkwp5s5tr3thjxlejq4qfvkclavx7ur2cce4la6m6',
     bitcoin: '16FZj5WK6Dj7i4mgnaryLnGfy5XRr56fug',
     ethereum: '0xeb7638d57fadb724e97fd4f4b80ed0fb24b8e9d0',
     litecoin: 'Lh8AtZD8Zzy32gZvZAGyBtnBvFCbQ12hf8' },
  code: '9D8FQUP7',
  created_at: '2019-01-10T08:18:53Z',
  description: 'test-desc',
  expires_at: '2019-01-10T09:18:53Z',
  hosted_url: 'https://commerce.coinbase.com/charges/9C7ETZP6',
  id: '27e32b69-563a-40f1-b1c8-ad947dab190c',
  metadata: {},
  name: 'test-purchas-name',
  payments: [],
  pricing:
   { local: { amount: '1337.00', currency: 'USD' },
     ethereum: { amount: '9.820773000', currency: 'ETH' },
     bitcoin: { amount: '0.35138115', currency: 'BTC' },
     bitcoincash: { amount: '9.38838565', currency: 'BCH' },
     litecoin: { amount: '37.66727708', currency: 'LTC' } },
  pricing_type: 'fixed_price',
  resource: 'charge',
  timeline: [ { status: 'NEW', time: '2019-01-10T08:18:53Z' } ]
}

Reading the documentation made me feel like I should instantiate my React component like:

...
<CoinbaseCommerceButton checkoutId={'27e32b69-563a-40f1-b1c8-ad947dab190c'}/>
...

This resulted in the client experiencing the error the OP mentions:

Refused to display 'https://commerce.coinbase.com/embed/charges/27e32b69-563a-40f1-b1c8-ad947dab190c?origin=http%3A%2F%2Flocalhost%3A8080&version=1.3.1&buttonId=9dc5056f-6980-4e66-bd7a-920e9aa3c469&cacheDisabled=undefined' in a frame because it set 'X-Frame-Options' to 'deny'

Turns out, I needed to instantiate the component like:

...
<CoinbaseCommerceButton checkoutId={'9D8FQUP7'}/>
...

And then it works!

Happy Hacking.