Carbon

Documentation

Welcome to Carbon's docs!

Get Started    

HTML Script & Custom URLs

HTML Script Overview

Apart from the 'environment' field and 'apikey' field, the only field a partner would likely change is the 'tokens' field (if enabled), which should be a comma-delimited list of tokens as a string (with no spaces). By default all tokens we support will be included. Check out this for the list of tokens we can support at the moment. We are aggressively expanding our crypto selection so stay tuned frequently for more crypto you may want to add to your integration!

Check out this section for more information on how to obtain an api key for our sandbox and production environments. Only 'sandbox' widgets are automatically authorized. To obtain production access check out this.

Reach out to gavin @ carbon.money & yara @ carbon.money if you would like to discuss enabling more custom widget functionality or have any more questions.

Service Inclusion

Note that the widget includes fiat > crypto and crypto > fiat functionality but not crypto <> crypto or our stablecoin on/off ramps just yet.

Custom URLs

Input Parameters

For the widget, you can add a few customized features including the types of cryptocurrencies you want to accept, the fiat currencies, and a button modal with custom text.

You have two methods of passing props.

1: You can setup your own widget from scratch using the steps below
2: (Easier and faster to setup) You can generate an iFrame using our url at https://buy.carbon.money. You can pass in parameters through the URL and add tokens and features easily. More on iFrame setup is available here.

Widget Size

Right now our current widget is at width 420px and height 550px. Some other sizes have not always worked for partners.

Example URL setup

https://buy.carbon.money/?tokens=trx,btt&homeScreenMessage=Play%20Tron%20Games&useModal=true&modalOpenText=Buy%20TRX

Input Parameters

Parameter
Access
Description

clientName

required & can append to URL

By default this will be Carbon Fiber. You can change this to whatever you like. The main place it will appear is when different wallets or providers connect to the user, upon which they will see clientName is asking to connect to your account.

environment

required

You must choose an environment for what you want your widget to show.

tokens

optional & can append to URL

By default, you'll see all the tokens we have available. However you can narrow the list by adding a comma separated string of different coins you want to list. For example, if I want to show just ethereum and tron, I will use eth,trx.

withdrawalTokens

optional & can append to URL

By default, we support TRX, EOS, ETH. However, you can narrow the list by adding a comma separated string of coins you want listed. For example, if I want to just show ethereum and tron, I will use 'eth,trx'.

homeScreenMessage

optional & can append to URL

By default, when the widget loads, you'll see a loading text of The API for fiat < > crypto. You can change this to something more pertinent for your users.

receiveAddress

optional & can append to URL, however, note that param is different when used in URL

In some cases (for example wallets or exchanges), you may already have a way of authenticating and/or registered addresses internally. You can pass in a variable or a constant for a deposit address in this optional object parameter. The address will autofill.

For URL params, options include receiveAddress + coin (first letter capitalized). For example: receiveAddressEth, receiveAddressEos, receiveAddressCusdeth.

useModal

optional & can append to URL

Be default this is false, but if you want to display the widget through a button/modal, you can set this to true.

modalOpenText

optional (required is useModal is true) & can append to URL

modalOpenText sets the text that shows on the button when you are using a button/modal setup.

apiKey

required & can append to URL

you need a valid API key to use the widget.

targetContainerId

required

the widget needs a DOM element to fill in this the widget - targetContainerId sets the ID of the div to target.

darkTheme

optional (Boolean) can append to URL

Defaults to false.

Determines color theme, whether dark or light. Set to true or false

showSell

optional (Boolean) can append to URL

Defaults to true.

Determines whether or not to show 'Sell' as an option in widget.

currencies

optional (String) can append to URL

Default currency to display amounts in. Defaults to usd.

All supported country currencies available.

Ex: currencies: 'eur'

Note

The below code is meant to be an example. If you copy/paste the below code and try to open it from your Finder, some functionality may not work as parts of our code check for either localhost or a whitelisted url. If you want to play around with our widget as quickly as possible, you can use node's http-server global module or python's http.server/SimpleHTTPServer to run an index.html file with the below code (substituting in your sandbox/production API key of course) on your localhost! Check this stack overflow question for more information: https://stackoverflow.com/questions/38497334/how-to-run-html-file-on-localhost

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <title>Carbon Fiber</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div
      class="carbonfiber"
      id="carbonfiber"
      style='display:flex;justify-content: center;align-items: center; height: 100%'
    >
    </div>
    <script type="text/javascript" src="https://d2xxy1rwbjzckp.cloudfront.net/carbonFiber.js.min.gz"></script>
    <script>
    	CarbonWidget.default.carbonFiber.render({
        clientName: "Carbon Fiber",
        environment: "production",
        tokens: "eth,eos,trx,btc,btt",
        homeScreenMessage: "Buy and Sell Any Crypto",
        receiveAddress: {
          eth: '', 
          eos: '', 
          trx: '', 
          btt: '',
          btc: '',
          bnb: '',
          dai: ''
        },
        // useModal: true,
        // modalOpenText: 'Pass in text',
        apiKey: "8d761842-86d9-4e6e-ba21-dd9b9fg7ffda", // production
        targetContainerId: 'carbonfiber',
      });
    </script>
  </body>
</html>
  

Customizing Widget Confirmation Screen

We currently let you modify the widget confirmation screen by changing the button text and the redirect url.

default widget confirmation screen template

default widget confirmation screen template

Change Confirmation Button Text

POST

Now, you can customize the confirmation screen on the widget by changing the url of the button as well as the text! If you need to redirect users to a site, this is a perfect opportunity.

Pro Tip: You can get your current widgetText by just doing a GET call instead of a POST with no data passed in.

// Super JWT header required

let url = `${ROOT}/v1/users/widgetText`;

let headers = {
  headers: {
    Authorization: `Bearer ${jwtToken}`
  }
}

let data = {
  widgetText: "Go back to app"
}

axios.post(url, data, header).then(result => console.log).catch(err => console.log);
{
   message: "successfully updated widgetText to Go back to app"
}

If you change the confirmation button's text, you may also want to change the URL the confirmation button is pointing to.

Again, you can do a GET to retrieve the current URL or POST to change the URL.

Change Confirmation Button URL

POST
// Super JWT header required

let url = `${ROOT}/v1/users/widgetButtonURL`;

let headers = {
  headers: {
    Authorization: `Bearer ${jwtToken}`
  }
}

let data = {
  widgetButtonURL: "https://app.com/cool_redirect"
}

axios.post(url, data, header).then(result => console.log).catch(err => console.log);
{
   message: "successfully updated widgetButtonURL to https://app.com/cool_redirect"
}

What's Next

iFrame/Webview

HTML Script & Custom URLs


Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.