coinbase.pug – Cryptocurrencies payment processor

View source code on Github

---

Coinbase allows customized easy payments processing with some cryptocurrencies like Bitcoin (BTC), Ethereum (ETH), Bitcoin Cash (BCH) and Litecoin (LTC).

In order to use all mixins explained in this page, you need to follow next steps:

1. Go to Coinbase Commerce page, sign up and/or sign in.
2. Go to Dashboard. At left-bottom corner of your screen must be a button with the text Accept payments, click it.
3. You can select between sell a product or accept donations. This option will change the process of payment.
4. Customize your product or organization for donations and Coinbase will show you some code for embed it in your page. Search in the code the line href="https://coinbase.commerce.com... and copy the identificator located after checkout/. This one must look like 05bc9951-75aa-4c8a-b0f4-aadc0f9ad3e7. Use this identification to pass it at first parameter of +coinbase and +coinbase-default mixins.
5. Go to Settings section and add the index url of your documentation to whitelisted domains list.

---

Coinbase Commerce script

mixin coinbase-script()
  script(src="https://commerce.coinbase.com/v1/checkout.js")&attributes(attributes)

+coinbase-script()

All coinbase commerce mixins doesn’t includes by default the necessary script that make works these payment implementations. You can include where you want with this mixin.

Usage

Input

+coinbase-script()

Output

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

---

Custom links

mixin coinbase(id, span_text, include_script=false)
  a(href=`https://commerce.coinbase.com/checkout/${id}`)&attributes(attributes)
    span #{span_text}
  - if (include_script)
    script(src="https://commerce.coinbase.com/v1/checkout.js")

+coinbase(id, span_text, include_script=false)

Insert a link to your product/organization without any style.

Arguments:

• id (string) – Your product indentificator, as explained above.
• span_text (string) – Text of the link.
• include_script (bool, string) – Interaction with coinbase commerce only is possible including a script. You can pass include_script=true to include it after the link, but maybe you prefer include inside in your head scripts section (see +coinbase-script() mixin above). As default, "false".

Usage

Input

+coinbase("05bc9951-75aa-4c8a-b0f4-aadc0f9ad3e7", "Siglo25 donations")

Output

<a href="https://commerce.coinbase.com/checkout/05bc9951-75aa-4c8a-b0f4-aadc0f9ad3e7"><span>Siglo25 donations</span></a>

Render

Siglo25 donations

---

Without mixins

Input

a(href=`https://commerce.coinbase.com/checkout/05bc9951-75aa-4c8a-b0f4-aadc0f9ad3e7`) My basic link

Output

<a href="https://commerce.coinbase.com/checkout/05bc9951-75aa-4c8a-b0f4-aadc0f9ad3e7">My basic link</a>

Render

My basic link

---

Default links

mixin coinbase-default(id, span_text, include_script=false)
  a.donate-with-crypto(href=`https://commerce.coinbase.com/checkout/${id}`)&attributes(attributes)
    span #{span_text}
  - if (include_script)
    script(src="https://commerce.coinbase.com/v1/checkout.js")

+coinbase-default(id, span_text, include_script=false)

Insert a link that will be styled like a button with Coinbase colors palette.

Arguments:

• id (string) – Your product indentificator, as explained above.
• span_text (string) – Text of the button.
• include_script (bool, string) – Interaction with coinbase commerce only is possible including a script. You can pass include_script=true to include it after the link, but maybe you prefer include inside in your head scripts section (see +coinbase-script() mixin above). As default, "false".

Usage

Input

+coinbase-default("05bc9951-75aa-4c8a-b0f4-aadc0f9ad3e7", "Siglo25 donations", include_script="true")

Output

<a class="donate-with-crypto" href="https://commerce.coinbase.com/checkout/05bc9951-75aa-4c8a-b0f4-aadc0f9ad3e7">
  <span>Siglo25 donations</span>
</a>
<script src="https://commerce.coinbase.com/v1/checkout.js">

Render

Siglo25 donations