▶️Buy Button SDK

(see end of document for sdk-v2 )

Add the SDK

  • You can add it in a script tag.

<script src="https://admin.lyzi.fr/assets/buy-button/sdk.js" defer></script>

now you can access the SDK through window.lyziBuyButton

  • angular project load in angular.json file

"architect": { "build": { .... "scripts": [ "src/assets/buy-button/sdk.js" ], },

then load using “declare var lyziBuyButton: any;” in your component

Using the SDK

  • init Before using availables methods, you should init the SDK at first or, some methods will not work properly.

window.lyziBuyButton.init({ …config }, elementSelector) available config

variable

type

default value

required

note

env

enum string

local

no

available value: ‘local’, ‘develop’, ‘staging’, ‘production’

buttonId

string

undefined

yes

buttonName

string

null

no

orderRef

string

null

no

currency

string

eur

no

base currency

price

string

null

no

buttonAppUrl

string

http://localhost:4200/buy-button/landing

no

don’t include any params on this var

callbackUrl

string

null

no

page redirect after payment succeed

goods

Object

undefined

yes

object refer to https://api-dev.lyzi.fr/docs/#api-Conversions-Request_conversion

example:

<script>

window.lyziBuyButton.init({

buttonId: '640539aba7ab8755cace1edf',

orderRef: 'CURRENTORDER-FP-2023',

price: 0.1,

buttonName: 'overided button',

callbackUrl: 'https://webhook.site/19cab1dd-f578-4e17-a937-1af14434ad66',

env: 'local',

goods: {

goodsName: 'yolo good',

goodsCategory: '1000',

goodsType: '01'

}

}, document.getElementById('test-lyzi'));

</script>

  • generating html code snippet window.lyziBuyButton.generateSnippet({ …config })

variable

type

default value

required

note

type

string

default

no

available value: ‘default’

display

string

popup

no

available value: ‘popup’

return value

{ modalSnippet: (HTML Tag)(DEPRECATED), modalJsSnippet: (HTML Tag), buttonSnippet: (HTML Tag),

cssHrefSnippet: (HTML Tag) }

  • get the transaction code

window.lyziBuyButton.getTransactionCode()

MISC

  • Overriding stored button data Every button that is stored in db can be overridden by the url query params. you shouldn’t override the button id, if you override it then the button will not work.

variable

type

default value

required

note

itemRef

string

button stored db data

no

orderRef

string

button stored db data

no

price

number

button stored db data

no

currency

string

button stored db data

no

currency code. e.g: eur,btc,xmr, etc…

Sample

curl --location --request GET 'https://api-dev.lyzi.fr/api/confirm_conversion/status/order/62790783694dec2196f0bbda~820'

Implementation sample

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

</head>

<body>

<script src="http://localhost:4200/assets/buy-button/sdk.js"></script>

<a id="test-lyzi">Payer</a>

<script>

window.lyziBuyButton.init({

buttonId: '640539aba7ab8755cace1edf',

orderRef: 'CURRENTORDER-FP-2022101001',

price: 0.1,

callbackUrl: 'https://webhook.site/1f17c789-f035-4d72-8f9e-2cf2908d5a2e',

env: 'local',

goods: {

goodsName: 'yolo good',

goodsCategory: '1000',

goodsType: '01'

}

}, document.getElementById('test-lyzi'));

</script>

</body>

</html>

if you want to separate return, cancel and callback url functionality, now it possible by our sdk-v2. here is code implementation sample 

  <script src=""></script>
  <!-- <script src=""></script> -->
  <a id="test-lyzi">Payer</a>
  <script>
    window.lyziBuyButton.init(
      {
        buttonId: "64ac6818dd98b2001d1a02cc", //dev
        // buttonId: "65310584a8ea92001d8ba40c", //staging
        orderRef: "CURRENTORDER-FP-2023",
        price: 0.1,
        callbackUrl: '',
        returnUrl: '',
        cancelUrl: '',
        env: "dev",
        goods: {
          goodsName: "Gigabyte RX 570",
          goodsCategory: "1000",
          goodsType: "01",
        },
      },
      document.getElementById("test-lyzi")
    );
  </script>

if you pass of those 3 url params,

  • we will send webhook to callbackUrl by post method

  • redirect to cancelUrl if user cancel the payment

  • redirect to returnUrl after payment succeed

but if you still prefer use only callbackUrl, you’ll also get all those 3 above in your callbackUrl

Last updated