Front-end Widget – Getting started

There are two ways of using the payment widget on your site.

  • Front-end / manual configuration: set values in the HTML code of the widget.
  • Backend / programmatic configuration: obtain a token by making a payment request API call, set that token value in the widget’s code.

Using manual configuration

Available for these accounts:
personal Bitcoin wallets only.

A pure front-end solution. No backend code required.

  1. In your front-end:
    1. Load the payment widget,
    2. and set all widget properties manually.

Copy-paste the code into your web page templates. Upon page load, the TripleA-hosted script will load the widget with the provided settings.

<triplea-ecommerce-payment-v1
   api-id="HA1562734224ynqS"
   order-amount="0.5"
   order-currency="EUR"
   order-id="TripleA-ecommerce-pay-widget-example"
   payment-cancel-url="https://google.com/?q=Payment canceled"
   payment-complete-url="https://google.com/?q=Payment completed, order placed!"
   user-email="user@domain.net"
   product-name="My Teddy bear!"
>
</triplea-ecommerce-payment-v1>
<script src="https://cdn.triple-a.io/widgets/triplea-ecommerce-payment-v1/js/app.js">

Properties to configure

api-id
string
Your TripleA account ID. Get your account here.
order-amount
decimal number
The order amount to be paid (in the order’s original currency).
order-currency
string
The currency in which the order amount is expressed.
order-id
string
A unique identifier for an order.
payment-cancel-url
string
If provided, redirect the user to this URL when clicking “cancel” or when payment form expires.
payment-complete-url
string
If provided, redirect the user to this URL after successfully making a payment.
user-email
string
The user’s email, where a receipt (payment confirmation) will be sent after successful payment.
This assures the user their payment has beendetected not just by their bitcoin wallet but also by our system.
product-name
string
Optional product name to display (if there is just one product or item being paid for).

Using payment token configuration

Available for these accounts:
personal Bitcoin wallets,
TripleA local currency settlement accounts.

Simple backend development required.

  1. In your backend:
    1. Request a payment form token via API call.
  2. In your front-end:
    1. Load the payment widget,
    2. and set the payment form token property.

Before loading the page containing the payment button, request a payment form token from the TripleA API (view documentation):

POST https://moneyoverip.io/api/payment_form 

Copy-paste the code below into your web page templates. Upon page load, the TripleA-hosted script will load the widget with the provided token value.

<triplea-ecommerce-payment-v1
   form-token="iZM9nSs28LovYrJu8ovxTxH3"
>
</triplea-ecommerce-payment-v1>
<script src="https://cdn.triple-a.io/widgets/triplea-ecommerce-payment-v1/js/app.js"></script>