alovak/index.html

## index.html
<html>
<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Demo Page</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://js.verifypayments.dev/sdk.js"></script>
  <script src="main.js"></script>
</head>
<body>
    <p>Hello!</p>
    <button id='opener'>Open</button>
    <p>Result:</p>
    <div id="result"></div>
</body>
</html>

## main.js
// put your API keys here
// this API key should be only on server and never on client side
const secretKey = 'sk_test_xxxxx';

const publicKey = 'pk_test_xxxxx';

// this code should be implmeneted on server side
// it's here only for demo purposes
// the goal of this code is to create a session
fetch('https://api.verifypayments.com/sessions', {
  method: "POST",
  headers: {
    "Authorization": `Bearer ${secretKey}`,
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    amount: 1000,
    currency: 'BHD',
    description: 'Test transfer'
  }), // body data type must match "Content-Type" header
})
  .then((response) => response.json())
  .then((json) => {
    // code from here is what should be on client side
    const { id } = json
    const payment = new VerifyPayments(
      {
        sessionId: id,
        publicKey: publicKey,
        onComplete: (result) => {
          const resEl = document.getElementById('result');
          // Result:
          // {
          //   "object": "transfer",
          //     "id": "tr_S34LUorCXAF8",
          //     "amount": 100,
          //     "currency": "AED",
          //     "description": "Test transfer",
          //     "status": "succeeded",
          //     "session_id": "ses_2zAaGdOEnOWF",
          //     "bank_id": "test_bank",
          //     "source_id": "ba_TJlUHpqeKskj",
          //     "created_at": "2018-12-09T13:13:33.090Z",
          //     "updated_at": "2018-12-09T13:13:33.122Z",
          //     "reference_id": "TRANSFERe2fb8f4d2aece9b5f35dc24d40c95d60"
          // }
          resEl.innerText = JSON.stringify(result);
          console.log(result);
        },
        onClose: () => console.log('onClose called')
      })

    const button = document.getElementById('opener');
    button.addEventListener('click', payment.show);
  });
	<html>
	<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>Demo Page</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<script src="https://js.verifypayments.dev/sdk.js"></script>
	<script src="main.js"></script>
	</head>
	<body>
	<p>Hello!</p>
	<button id='opener'>Open</button>
	<p>Result:</p>
	<div id="result"></div>
	</body>
	</html>
	// put your API keys here
	// this API key should be only on server and never on client side
	const secretKey = 'sk_test_xxxxx';

	const publicKey = 'pk_test_xxxxx';

	// this code should be implmeneted on server side
	// it's here only for demo purposes
	// the goal of this code is to create a session
	fetch('https://api.verifypayments.com/sessions', {
	method: "POST",
	headers: {
	"Authorization": `Bearer ${secretKey}`,
	'Content-Type': 'application/json'
	},
	body: JSON.stringify({
	amount: 1000,
	currency: 'BHD',
	description: 'Test transfer'
	}), // body data type must match "Content-Type" header
	})
	.then((response) => response.json())
	.then((json) => {
	// code from here is what should be on client side
	const { id } = json
	const payment = new VerifyPayments(
	{
	sessionId: id,
	publicKey: publicKey,
	onComplete: (result) => {
	const resEl = document.getElementById('result');
	// Result:
	// {
	// "object": "transfer",
	// "id": "tr_S34LUorCXAF8",
	// "amount": 100,
	// "currency": "AED",
	// "description": "Test transfer",
	// "status": "succeeded",
	// "session_id": "ses_2zAaGdOEnOWF",
	// "bank_id": "test_bank",
	// "source_id": "ba_TJlUHpqeKskj",
	// "created_at": "2018-12-09T13:13:33.090Z",
	// "updated_at": "2018-12-09T13:13:33.122Z",
	// "reference_id": "TRANSFERe2fb8f4d2aece9b5f35dc24d40c95d60"
	// }
	resEl.innerText = JSON.stringify(result);
	console.log(result);
	},
	onClose: () => console.log('onClose called')
	})

	const button = document.getElementById('opener');
	button.addEventListener('click', payment.show);
	});