Frontend library PaywithTerra

Frontend library for making Terra payments and pre-validating transactions before it is sent to the backend.

This page explains how to enable and customize PaywithTerra library on your webpage.

Using from CDN

1. Add styles before the closing </head> tag:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/paywithterra/frontend@0.0.x/dist/css/app.css">

The library styles are scoped, so they will not affect your website styles.

2. Load the JavaScript library before the closing </body> tag:

<script async src="https://cdn.jsdelivr.net/gh/paywithterra/frontend@0.0.x/dist/js/app.js"></script>

Events and methods

// When the library is loaded and ready to use:
[window] "payWithTerra-ready"
// When the payment app is closed (destroyed) and can be started again:
[window] "payWithTerra-destroy-app"

// Open the payment window:
window.payWithTerra.start({
  showTestnetWarning: false,
  networkName: "testnet", // "mainnet" or "testnet"
  //chainId: "phoenix-1", // "pisco-1" or "phoenix-1" (optional, instead of networkName)
  merchantAddress: "terra14wvwnyjgsljobxdzjGo6pkQazrhtlp4zMwu6tb",
  merchantEndpoint: "http://yourwebsite.com/payment-callback",
  memo: "Order-1",
  total: 0.01, // Amount in domestic currency (for display only)
  currency: "USD", // Domestic currency (for display only)
  denom: "ibc/B3504E092456BA618CC28AC671A71FB08C6CA0FD0BE7C8A5B5A3E2DD933CC9E4",
  amount: 10000, // Amount in denom (for transaction create)
  finderTxUrl: "https://finder.terra.money/pisco-1/tx/",

  onClose: (hash = null) => {
      console.log("onClose", hash);
  },
  onSuccess: (hash) => {
      console.log("onSuccess", hash);
  }
})

// Close the payment app:
window.payWithTerra.close()

Server Response (as expected)

// JSON
{
    "closeUrl": string
    "redirectUrl": string (optional)
}

GitHub