Payment Button with fized custom field

could i add/preload some custom field in the payment button form?
For example, in your html code you pass the field data-uid=…
I wish add one of my custom field with a fixed value that can´t be changed by the customer.

1 Like

Hi @hbroker

Please have a look at the Blockonomics checkouts: Blockchain API | Bitcoin API - Blockonomics

This api endpoint allows you to add custom data to your payment button, such as user_id, before displaying the button to the user. eg.

curl -H 'Authorization: Bearer 2cDNOlCN985d7Rx3atSDOlmMeYaxzho2uPmHheIw4eU' -d'{"parent_uid": "f7570454529a11e7", "extra_data":"user_id-19120"}' https://www.blockonomics.co/api/create_temp_product

This api endpoint will return a temp product uid like this f7570454529a11e7-1ee5f340, which you can set to a payment button. eg.

<a href="" class="blockoPayBtn" data-toggle="modal" data-uid=f7570454529a11e7-1ee5f340><img width=160 src="https://www.blockonomics.co/img/pay_with_bitcoin_medium.png"></a>

Please let me know if you have any further questions regarding setting up the payment buttons with extra data.

Kind regards

1 Like

Hi @hbroker,

You can consider using the Blockonomics payment widget, which easily replaces the payment button, and will give you control over the display of the checkout form. You can pass your custom data directly to the payment widget or from an input as shown below.

<input type="email" id="email" placeholder="Email Address"/>
<input type="text" id="custom" value="My Custom Field1 Value" readonly />
<button id="pay">Pay with Bitcoin</button>
<div id="bitcoinpay"></div>

<script src="https://blockonomics.co/js/pay_widget.js"></script> 
<script>
  function pay() {
    var email = document.getElementById('email').value;
    var custom = document.getElementById('custom').value;
    Blockonomics.widget({
      msg_area: 'bitcoinpay',
      uid: '<widget_uid>',
      email: email,
      custom_one: custom
    });
  }

  document.getElementById('pay').onclick = function() { pay() };
</script>

Using the payment widget allows you to achieve your desired behavior of adding a readonly custom field to the checkout form.

Please note the readonly input cannot be changed by your customers, however, more advanced users could still change this value.

Hello, I am adding a payment widget to my react app but the script tag does not read the Blockonomics widget. Here is a screenshot of it. I would also like to customize the widget so that the customer can add any amount of bitcoin. Is that possible?
Screenshot from 2023-03-06 20-57-20

I have silenced es-lint as per Blockonomics guidelines for adding a payment widget in react but I get this error. I have added the script tag to the payment widget too
Screenshot from 2023-03-06 21-09-37

Hi,
You can silence this warning by adding the following on top of Blockonomics.widget

// eslint-disable-next-line no-undef

You can follow the article here:

Regards.

This worked /*eslint disable-next-line no-undef*/.
Thank you

1 Like

Payment Button with fized custom field - #2 by darren to my reufrujevic750@gmail.com