Vella Checkout

Embed VellaPay Widget into your website using our inline JavaScript integration.

Vella Inline is the easiest way to collect payments on your website: Import our lightweight JavaScript library on your checkout page, then call the VellaCheckoutSDK() function when the customer clicks on your payment button. We'll handle the payment and return callbacks to you when it's done.

First, you include the Vella Inline library with a script tag:

<script src="https://checkout.vella.finance/widget/sdk.js" type="module" ></script>

Next, is the payment button. This is the button the customer clicks after they've reviewed their order and are ready to pay you. You'll attach an onClick event handler to this button that calls initiatePayment(), a custom JS function you're going to write.

<button type="button" onclick="initiatePayment()" > Pay </button>

Finally, in the initiatePayment() function, you call the VellaCheckoutSDK() function with some custom parameters:

function initiatePayment() {
  var key = ""; // your vella API test/live key
  const config = {
    email: '[email protected]', // string - customer email
    name: "Tade Ogidan", // string - customer name
    amount: 100.00, //float - amount to pay
    currency: "NGN", // supported fiat NGNT,USDT,USDC
    merchant_id: "", // string - merchant id
    reference: "", // string - your transaction reference
    custom_meta: [], // custom meta data,
    source: '', // domain or location name widget is being called from 
  };
  const vellaSDK = VellaCheckoutSDK.init(key, config);
  vellaSDK.onSuccess(response => {
    console.log("data", response)
  })
  vellaSDK.onError(error => {
    console.log("error", error)
  });
  vellaSDK.onClose(() => {
    console.log("widget closed")
  });
})
}

🚧

Always verify the transaction

You should always verify the payment on your server afterwards, even if you used a callback.

curl --location -g --request GET 'https://sandbox.vella.finance/api/v1/checkout/transaction/{reference}/verify' \
--header 'Authorization: Bearer vk_test_T7P3WBujxcEGJbyM25vxOuq4Q4vCMBgQpXXXXxxx'

Updated 7 months ago