Add the following to your page's head tag:

<script src="https://unpkg.com/@anypayinc/widget/anypay.min.js"></script>

Then, whenever you want to trigger an anypay invoice widget, just call:

anypay.collectPayment({
  accountId: '1177',
  amount: 0.01
})
.once('loaded', () => {
  console.log('Anypay iFrame loaded');
})
.once('canceled', () => {
  // This will only fire if the server marks
  // the invoice with status: 'canceled'
  console.log('Invoice was canceld');
})
.once('underpaid', () => {
  console.log('Invoice underpaid');
})
.once('overpaid', () => {
  console.log('Invoice overpaid');
  setTimeout(() => {
    anypay.close();
  }, 2000);
})
.once('expired', () => {
  console.log('Invoice expired');
})
.once('paid', () => {
  console.log('Invoice paid');
  setTimeout(() => {
    anypay.close();
  }, 2000);
})

Using Platform Semantics

anypay.newPayment([{ currency: 'BSV', to: [{ address: '', amount: 0.01, currency: 'USD' }, { address: '', amount: 0.05, currency: 'USD' }, { address: '', amount: 10.15, currency: 'USD' }] }]) .once('loaded', () => { console.log('Anypay iFrame loaded'); }) .once('canceled', () => { // This will only fire if the server marks // the invoice with status: 'canceled' console.log('Invoice was canceld'); }) .once('underpaid', () => { console.log('Invoice underpaid'); }) .once('overpaid', () => { console.log('Invoice overpaid'); setTimeout(() => { anypay.close(); }, 2000); }) .once('expired', () => { console.log('Invoice expired'); }) .once('paid', () => { console.log('Invoice paid'); setTimeout(() => { anypay.close(); }, 2000); }) .once('closed', () => { console.log('Anypay iFrame closed'); })

You can also add the following options to the widget:

anypay.collectPayment({
  moneyButton: false,
  relayX: false,
  qrCode: false,

  accountId: '1177',
  amount: 0.01
});

Then to minimize the anypay.js and anypay.css files, bump the versions and publish to unpkg.com, first run:

npm install

Then run:

./build