Payment Button multiple request to /charges

Commerce API
1

Hey everyone!
I am working on an Angular Website where we just added the Coinbase Payment Button following this guide: Payment Button Callbacks | Coinbase Cloud

After getting everything working fine, I notice that every X seconds (between 2 and 5) our website makes a request to this URL https://api.commerce.coinbase.com/charges/BLRRWPCW (the code after /charges/ changes everytime we refresh the page).
I don’t think this behavior is expected and also it’s causing generating multiple charges for our users without they even touching the button.

The URL we are using is the following: Coinbase Commerce (if our checkout id is needed, I can share it privately)

Thanks in advance,
Gaston

2

Hello @gastonf87! Thank you for taking interest in using Coinbase services.

With regards to your concern, to ensure that we are on the same page, please confirm if our assumptions below are correct:

  1. Every 2 to 5 seconds, the request is pushing a request to this URL (https://api.commerce.coinbase.com/charges/BLRRWPCW).
  2. The charge ID on where the request made on the URL you have mentioned was changing every after the website was refreshed.
  3. Also that the charges endpoint is generating multiple charges even though the button hasn’t been used by the users.

Otherwise, please elaborate your concern.

Additionally, we will be needing some details to further investigate your concern:

  • Please provide us your code snippet when you embed Payment Button Callbacks to your website.
  • Please provide a screen record that demonstrates your concern.

Once you send us the information requested above, we’ll work to quickly address this issue. We appreciate your patience and understanding.

2 Likes
3

Hey, thank you for looking into this.
Let me answer your questions:

  1. Every 2 to 5 seconds, the request is pushing a request to this URL (https://api.commerce.coinbase.com/charges/BLRRWPCW).

Correct!

  1. The charge ID on where the request made on the URL you have mentioned was changing every after the website was refreshed.

Yes, and it actually makes sense. I think the first time we load the button it generates the charge ID and then something starts executing a setTimeout using that ID

  1. Also that the charges endpoint is generating multiple charges even though the button hasn’t been used by the users.

I think It’s generating only one charge. I will ask the Backend team if they are getting multiple “charge:created” or only one.

It’s an angular app, so I need to dynamically load the script. I am doing something very similar to this: javascript - How to load external scripts dynamically in Angular? - Stack Overflow

My Code:
JS

private loadScript() {
    let script = this.renderer.createElement('script');
    script.type = 'text/javascript';
    script.src = 'https://commerce.coinbase.com/v1/checkout.js?version=201807';
    this.renderer.appendChild(this.document.getElementById('coinbaseDIV'), script);
  }

HTML

<div id="coinbaseDIV">
        <A
          class="donate-with-crypto btn btn-sm btn-primary" 
          [attr.data-custom]="betOpenlyUser"
          href="https://commerce.coinbase.com/checkout/XXXXXX-XXXX-XXXXXX?custom={{betOpenlyUser}}"
          target="_blank"
        >
        <span>Add Funds With Coinbase</span>
      </A>
      <br>
      <span class="info" (click)="toggleModal(false)">
        What To Do After Deposit?
      </span>
    </div>
  • Please provide a screen record that demonstrates your concern.
    Sure. In the video I am uploading it took like 10 seconds to start sending requests again, but sometime it takes less time.

Video: https://youtu.be/a3GbLas5PGs

Hope this helps!

1 Like
4

Hello @gastonf87! Thank you for the information you have provided and for itemizing the questions and answers. The team is looking into this and we will get back to you once we have any updates. Have a great day!

2 Likes
5

Hello @gastonf87! Thank you for patiently waiting while we check this with our team. With regard to your concern as to why the charge ID was changing after the website was refreshed, actually it is not creating a new charge or anything. The repeated requests are simply the charge page polling for changes to the charge.

And since checkouts “stamp out” new charges kind of like a template, going directly to the checkout page will create a new charge unless it sees in localstorage that the user has already created a charge for this checkout. If localstorage is cleared or a new browser is opened, it will always create a new charge when navigating to a checkout.

We hope this helps and welcome to the community!

2 Likes
6

Hey @Lioness! Thank you for your response!
Cool, I get it now!
My only remaining question would be, why the requests start automatically after loading the button. As you can see in the video I uploaded, as soon as I open the page including Coinbase Button, it starts making request to /charges which causes an actual charge:created in our backend and it leads to an unexpected flow in our website.

If you can help me understand why that happens and how to avoid it, we all set!

7

Hi @gastonf87! Apologies for the delayed response. The request you are pointing out was not creating new charges, because:

  • Those are GET requests and not a POST request.
  • The charge code is the same each time, meaning it’s requesting the same charge (not creating a new one).

Also, to further investigate the Webhook events and to see if you’re being triggered frequently, please log a support ticket using our Contact Us form. Please include the link of this forum so that the team will be aware that it’s you. Additionally, please use the email address associated with your Commerce account. Thank you and have a nice day!

1 Like