CoinForBarter Inline

Learn how to integrate CoinForBarter in your website using CoinForBarter Inline JavaScript integration flow.

You can embed CoinForBarter on your page using our CoinForBarterCheckout() JavaScript function. The function responds to your request following your request configurations. If you specify a redirectUrl in your request, the function will redirect your users to the provided redirect URL when they complete the payment.

We will append the transaction reference and status to the URL this, transactionRef=ref&transactionId=11379&status=success. With this, you can verify the final state of the transaction by calling our Transaction verification endpoint with the provided transactionId in the URL.

Sample Inline Redirect Implementation

Here is a simple verification Response


<form>
  <script src="https://checkout.coinforbarter.com/v1/script.js"></script>
  <button type="button" onClick="makePayment()">Pay Now</button>
</form>
<script>
  function makePayment() {
    CoinForBarterCheckout({
       // Account public key 
      publicKey: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
      // Transaction reference id 
      txRef: "RX1",
      // Amount to charge
      amount: 10,
      // Currency amount was set in 
      currency: "BTC",
      // Currencies to accept
      // Add more currencies to accept in above format or remote all currencies to accept all
      currencies: ["USDT", "BTC"],
      // Information to save on payment - optional
      meta: {
        consumer_id: 23,
        consumer_mac: "92a3-912ba-1192a",
      },
      // Email of customer to charge 
      customer: "cornelius@gmail.com",
      //  Customer phone number - optional 
      customerPhoneNumber: "08102909304",
      //  Customer full name - optional
      customerFullName: "Coin Developers",
      // Url to redirect user to after payment ends 
      redirectUrl: "http://example.com",
      // Customize the payment screen - optional
      customizations: {
        title: "My store",
        description: "Payment for items in cart",
        logo: "https://assets.piedpiper.com/logo.png",
      },
      // Payment plan id to add this user to a payment plan you created - optional
      paymentPlan: "jhf2627623"
    });
  }
</script>

Sample Inline Callback Implementation

Alternatively, if you specify a callback function in your request payload when your customer completes the payment, we will call the function and pass the payment details to you.


<form>
  <script src="https://checkout.coinforbarter.com/v1/script.js"></script>
  <button type="button" onClick="makePayment()">Pay Now</button>
</form>
<script>
  function makePayment() {
    CoinForBarterCheckout({
       // Account public key 
      publicKey: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
      // Transaction reference id 
      txRef: "RX1",
      // Amount to charge
      amount: 10,
      // Currency amount was set in 
      currency: "BTC",
      // Currencies to accept
      // Add more currencies to accept in above format or remote all currencies to accept all
      currencies: ["USDT", "BTC"],
      // Information to save on payment - optional
      meta: {
        consumer_id: 23,
        consumer_mac: "92a3-912ba-1192a",
      },
      // Email of customer to charge 
      customer: "cornelius@gmail.com",
      //  Customer phone number - optional 
      customerPhoneNumber: "08102909304",
      //  Customer full name - optional
      customerFullName: "Coin Developers",
      // Callback function if payment is successful
      onSuccess: function (data) {
        console.log(data);
      },
      // Callback function if payment was not successful or not completed
      onError: function (data) {
        console.log(data);
      },
      // Customize the payment screen - optional
      customizations: {
        title: "My store",
        description: "Payment for items in cart",
        logo: "https://assets.piedpiper.com/logo.png",
      },
      // Payment plan id to add this user to a payment plan you created - optional
      paymentPlan: "jhf2627623"
    });
  }
</script>

Callback Response

Here is what a callback response looks like when the transaction is successfully completed.


{
    status: 'success,
    transactionId: '2151557',
    txRef: 'RX1,
    amount: 40000, // amount value of currency customer payed with
    currency: 'USDT', // currency customer payed with
    customer: {
        email:'example@gmail.com',
        fullName:'John Doe'
    },
    baseCurrency: 'BTC', // currency amount was set in
    baseAmount: 1, // amount set for the payment
}

With this response, you can perform other activities like Transaction verification

Callback Or Redirect?

It is worthy to note that If you provide both redirectUrl and callback in your request, the callback will be ignored and the customer will be redirected to the provided redirect URL. i.e redirectUrl takes precedence over callback function when both are available.

Webhook Response

For your webhook notification, below is the transaction notification format:


{
    "type":"transaction-successful",
    "data": {
        "id": "60d45df8d64c3a0b74d1ea3a",
        "status": "in progress",
        "description": "Payment from Kale41@hotmail.com",
        "txRef": "hrgyuur743784",
        "paymentRef": "hrgyuur743784",
        "baseAmount": 0.01,
        "baseCurrency": "BTC",
        "currencies": [],
        "transactionFees": 0,
        "totalDue": 0,
        "customer": "Kale41@hotmail.com",
        "customerDetails": {
            "email": "Kale41@hotmail.com"
        },
        "addressSentFrom": [],
        "transactionTimeLog": [
            {
                "time": "2021-06-24T10:27:04.477Z",
                "type": "event",
                "event": "Started transaction"
            },
            {
                "time": "2021-06-24T10:27:04.477Z",
                "type": "event",
                "event": "Locked currency"
            }
        ],
        "amountReceived":0,
        "isCurrencyLocked": true,
        "createdAt": "2021-06-24T10:27:04.483Z"
    },
}

Join Developers Channel on Slack

Join our developers channel to stay up to date on latest news and features. Find answers to your problems and network with other developers. Join Developers Channel.