Custom metadata not working for Payment Button

gafernandez87 commented 2 years ago

Hey everyone! Let me start saying that I know this issue does not belong to react-coinbase-commerce integration, but I couldn't find any other place to ask my questions or contact support, so I was hoping if you guys can somehow answer my question or at least point me in the right direction.

Thank you!

The issue

We are adding a Payment Commerce Button in our website following this guide: https://docs.cloud.coinbase.com/commerce/docs/add-payment-button We embedded the html <a> and <script> and everything works just fine.

The issue comes when we want to send some custom metadata (a user id) so when get a callback call in our backend, we can identify what user was doing the transaction.

According to the guide, we can add a data-custom attribute to the <a>, but when we get our backend call, metadata is always empty.

We tried 2 approaches, sending data-custom as an attribute (the site is build in Angular) and also I saw in this repo that react sends the metadata as a queryParam, so we also did that, but no luck

<a class="donate-with-crypto btn btn-sm btn-primary" [attr.data-custom]="customUserId"
    href="https://commerce.coinbase.com/checkout/XXXXXXXXXXX?custom={{customUserId}}"
    target="_blank">
      <span>Add funds with Coinbase</span>
    </a>

    <script src="https://commerce.coinbase.com/v1/checkout.js?version=201807"></script>

Again, I would love to post this question in the right repo, but I couldn't find it, so any help would be much appreciated

RumenTech commented 2 years ago

@gafernandez87 Did you figure out the exact format of custom metadata? Coinbase sends metadata: {} in object format as part of webhook notification.

EHBradford commented 2 years ago

I am having this exact same problem. Meta-data was working properly on my website about 4 weeks ago during the initial coding stages.

We had to delay the implementation a few weeks and it appears what we coded 4 weeks ago no longer works. Or rather I do not remember there being an issue with parsing the returned data from CBC (CB Commerce) at that prior date.

Based on what I am seeing CBC is sending an altered form of the custom metadata from how I originally parsed it.

It appears this is now the form of the JSON data (I omit a vast majority for brevity) sent from CBC:

{"attempt_number":1,                                                                                                                                                                        
"event":{"api_version":"2018-03-22" 
              ,"data":{"metadata":{"custom":"id:***,price:***,units:***"}  
                           }
              }
}

Once you extract your metadata it is left to you to parse it.

Thus, my advice, check what is actually inside metadata. My original parsing algorithm detected the metadata as being missing/corrupted which lead me here.

Chris-Abboud commented 1 year ago

For those who are defining metadata in their checkout, but it is not showing, make sure that you are using a CHARGE, and not a checkout!!!

Coinbase handles charges and checkouts slightly differently.

Chris-Abboud commented 1 year ago

Has anyone figured out how to send the metadata?

I set the data-custom prop to the button, but the event sent to my server has no metadata
<a 
  id="buy-with-crypto" 
  class="buy-with-crypto" 
  href="https://commerce.coinbase.com/checkout/ff4204b8-49f6-49ef-a869-6f370a0dbb79" 
  data-custom="epfO28QRjyNxfRm25ef5fwp9X0j1" 
  rel="noopener noreferrer" 
  target="_blank"
>
  <span>Donate with Crypto</span>
</a>

You are attempting to use the checkout with Metadata, from my understanding, only Charges work with metadata. If you changed the type of transaction to a charge, I believe you should be able to pass in Metadata.

coinbase / react-coinbase-commerce

Custom metadata not working for Payment Button #94

The issue