Coinbase custom pay button not working

StackOverflow https://stackoverflow.com/questions/21445594

Question

I would like to make my own custom Coinbase payment button and have the following code which is just a copy paste of "Using Your Own Button And Custom Javascript Events" example.

<!doctype html>
<html>
  <head>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  </head>

  <body>

    <a href='#' class='my-custom-link'>Show Me The Modal!</a>

    <div class="coinbase-button" data-code="4d4b84bbad4508b64b61d372ea394dad" data-button-style="none"></div><script src="https://coinbase.com/assets/button.js" type="text/javascript"></script>

    <script type="text/javascript">
      $(document).ready(function() {
        $('.my-custom-link').click(function(){
          $(document).trigger('coinbase_show_modal', '4d4b84bbad4508b64b61d372ea394dad');
          return false;
        });

        $(document).on('coinbase_payment_complete', function(event, code){
          console.log("Payment completed for button "+code);
          window.location = "/confirmation.html";
        });
      });
    </script>
  </body>
</html>

However it does not work. Any ideas why?

'Show Me The Modal!' link is displayed. The $('.my-custom-link').click() function is called. Using Google Chrome I can see that an iframe is loaded with what I assume is the modal dialog code containing payment instructions. However nothing happens when I click on the 'Show Me The Modal!' link.

Was it helpful?

Solution 2

The code isn't working because coinbase.com blocks custom buttons from working after triggering them with custom scripts too much

Ask a friend to test your code, it should work for other people.

I'm having the same issue. Deleting browser cookies, cache, flash cookies, changing IP doesn't work. I guess the only solutions are:

  1. wait for the ban from coinbase.com to expire
  2. contact support about it
  3. don't do anything, it's working, but not for you

Update:
A working solution/hack that I found was using the default button, hiding it with opacity: 0; and putting it on top of your custom button. That way you can make it look like the user is clicking the custom button, when in fact, he's clicking the hidden default button (which works).

Here's a demo: http://jsfiddle.net/uaMdX/show
Code demo: http://jsfiddle.net/uaMdX/ 

<a href='#' class='my-custom-link'>Show Me The Modal!</a>

<div class="coinbase-button" data-code="4d4b84bbad4508b64b61d372ea394dad" data-button-style="small"></div>

<script src="https://coinbase.com/assets/button.js"></script>

<style>
#coinbase_button_iframe_4d4b84bbad4508b64b61d372ea394dad {
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    width: 140px!important;
    height: 18px!important;
    margin-left: 7px;
    margin-top: 10px;
    /*
    debugging_code: uncomment_to_show_the_button;
    opacity: 0.5;
    outline: 1px solid red;
    */
}

</style>

*If your needs are more specific you should use jQuery to dynamically add the styles/position the iframe for the hidden button.

OTHER TIPS

I think I have solved it. I tried it out with your code and it does not work as you said. I took the time to modify it a little bit and it works now. http://pastie.org/8687468 Please let me know if what I fixed was intended.

Try creating another page, and put only what coinbase gives you. If that works then it is probably a Issue on your side. If not, let me know.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top