How to use

Simple use

<div id="switchere" style="min-height: 500px; max-width: 450px; width: 100%;">Loading...</div>
<script src="https://sandbox.switchere.com/js/sdk-builder.js"></script>
<script>
  window.switchereSdk.init({
    el: '#switchere',
    partnerKey: 'XXXXXXXXXXXXXXX',
    httpReturnSuccess: 'https://domain.tld/success',
    httpReturnFailed: 'https://domain.tld/failed',
  });
</script>

<div id="switchere" style="min-height: 500px; max-width: 450px; width: 100%;">Loading...</div>
<script src="https://switchere.com/js/sdk-builder.js"></script>
<script>
  window.switchereSdk.init({
    el: '#switchere',
    partnerKey: 'XXXXXXXXXXXXXXX',
    httpReturnSuccess: 'https://domain.tld/success',
    httpReturnFailed: 'https://domain.tld/failed',
  });
</script>

Merchant use

Compatible only with the crypto currencies:

<div id="switchere" style="min-height: 500px; max-width: 450px; width: 100%;">Loading...</div>
<script src="https://sandbox.switchere.com/js/sdk-builder.js"></script>
<script>
  window.switchereSdk.init({
    el: '#switchere',
    partnerKey: 'XXXXXXXXXXXXXXX',
    isMerchant: true,
    payoutAmount: '0.02',
    payoutCurrency: 'BTC',
    description: 'You are buying Tesla model X from Tesla.com',
    clientEmailDefault: '[email protected]',
    httpReturnSuccess: 'https://domain.tld/success',
    httpReturnFailed: 'https://domain.tld/failed',
  });
</script>

<div id="switchere" style="min-height: 500px; max-width: 450px; width: 100%;">Loading...</div>
<script src="https://switchere.com/js/sdk-builder.js"></script>
<script>
  window.switchereSdk.init({
    el: '#switchere',
    partnerKey: 'XXXXXXXXXXXXXXX',
    isMerchant: true,
    payoutAmount: '0.02',
    payoutCurrency: 'BTC',
    description: 'You are buying Tesla model X from Tesla.com',
    httpReturnSuccess: 'https://domain.tld/success',
    httpReturnFailed: 'https://domain.tld/failed',
  });
</script>

TIP

See detail merchant parameters.

With params

<div id="switchere" style="min-height: 500px; max-width: 450px; width: 100%;">Loading...</div>
<script src="https://sandbox.switchere.com/js/sdk-builder.js"></script>
<script>
  window.switchereSdk.init({
    el: '#switchere',
    partnerKey: 'XXXXXXXXXXXXXXX',
    partnerOrderId: 'xxxxx-xxxxx-xxxxx-xxxxx',
    httpReturnSuccess: 'https://domain.tld/success',
    httpReturnFailed: 'https://domain.tld/failed',
    payinCurrency: 'USD',
    payinGroup: 'card',
    payoutAmount: '15',
    payoutCurrency: 'XRP',
    payoutGroup: 'crypto',
    dstAddress: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxx',
    memo: '10',
  });
</script>

<div id="switchere" style="min-height: 500px; max-width: 450px; width: 100%;">Loading...</div>
<script src="https://switchere.com/js/sdk-builder.js"></script>
<script>
  window.switchereSdk.init({
    el: '#switchere',
    partnerKey: 'XXXXXXXXXXXXXXX',
    partnerOrderId: 'xxxxx-xxxxx-xxxxx-xxxxx',
    httpReturnSuccess: 'https://domain.tld/success',
    httpReturnFailed: 'https://domain.tld/failed',
    payinCurrency: 'USD',
    payinGroup: 'card',
    payoutAmount: '15',
    payoutCurrency: 'XRP',
    payoutGroup: 'crypto',
    dstAddress: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxx',
    memo: '10',
  });
</script>

NFT sale example

<div id="switchere" style="min-height: 500px; max-width: 450px; width: 100%;">Loading...</div>
<script src="https://sandbox.switchere.com/js/sdk-builder.js"></script>
<script>
  window.switchereSdk.init({
    el: '#switchere',
    partnerKey: 'XXXXXXXXXXXXXXX',
    partnerOrderId: 'xxxxx-xxxxx-xxxxx-xxxxx',
    httpReturnSuccess: 'https://domain.tld/success',
    httpReturnFailed: 'https://domain.tld/failed',
    payinCurrency: 'EUR',
    payoutCurrency: 'MATIC',
    payoutAmount: 42,
    payoutGroup: 'nft',
    dstAddress: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxx',
    hidePayout: true,
    hideCoupon: true,
    hideFeeDetails: true,
    hideWeAccept: true,
    productDetails: {
        external_contract_address: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxx',
        items: [{
            token_id: 'XXX',
            sequence: 'X',
            img: 'https://some-storage-domain.tld/token-XXX.jpeg',
            name: 'Token name',
        }]
    }
  });
</script>

<div id="switchere" style="min-height: 500px; max-width: 450px; width: 100%;">Loading...</div>
<script src="https://switchere.com/js/sdk-builder.js"></script>
<script>
  window.switchereSdk.init({
    el: '#switchere',
    partnerKey: 'XXXXXXXXXXXXXXX',
    partnerOrderId: 'xxxxx-xxxxx-xxxxx-xxxxx',
    httpReturnSuccess: 'https://domain.tld/success',
    httpReturnFailed: 'https://domain.tld/failed',
    payinCurrency: 'EUR',
    payoutCurrency: 'MATIC',
    payoutAmount: 42,
    payoutGroup: 'nft',
    dstAddress: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxx',
    hidePayout: true,
    hideCoupon: true,
    hideFeeDetails: true,
    hideWeAccept: true,
    productDetails: {
        external_contract_address: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxx',
        items: [{
            token_id: 'XXX',
            sequence: 'X',
            img: 'https://some-storage-domain.tld/token-XXX.jpeg',
            name: 'Token name',
        }]
    }
  });
</script>

Show close button

<div id="switchere" style="min-height: 500px; max-width: 450px; width: 100%;">Loading...</div>
<script src="https://sandbox.switchere.com/js/sdk-builder.js"></script>
<script>
  window.switchereSdk.init({
    el: '#switchere',
    partnerKey: 'XXXXXXXXXXXXXXX',
    partnerOrderId: 'xxxxx-xxxxx-xxxxx-xxxx',
    closeButton : true,
    closeButtonCallback: function( data ) {
      const { status } = data; // 'success' or 'failed';

      if (status = 'success') {
        // do something on success
      }

      if (status = 'failed') {
        // do something on failed
      }
    },
  });
</script>

<div id="switchere" style="min-height: 500px; max-width: 450px; width: 100%;">Loading...</div>
<script src="https://switchere.com/js/sdk-builder.js"></script>
<script>
  window.switchereSdk.init({
    el: '#switchere',
    partnerKey: 'XXXXXXXXXXXXXXX',
    partnerOrderId: 'xxxxx-xxxxx-xxxxx-xxxx',
    closeButton : true,
    closeButtonCallback: function( data ) {
      const { status } = data; // 'success' or 'failed';

      if (status = 'success') {
        // do something on success
      }

      if (status = 'failed') {
        // do something on failed
      }
    },
  });
</script>

Open widget in modal

<button onClick="openSwitchereWidget()">
  Click to open widget
</button>

<script src="https://sandbox.switchere.com/js/sdk-builder.js"></script>

<script>
  window.openSwitchereWidget = function() {
    window.switchereSdk.init({
      // ...
      mode : 'modal',
    });
  };
</script>

<button onClick="openSwitchereWidget()">
  Click to open widget
</button>

<script src="https://switchere.com/js/sdk-builder.js"></script>

<script>
  window.openSwitchereWidget = function() {
    window.switchereSdk.init({
      // ...
      mode : 'modal',
    });
  };
</script>

Debug

For enable debug set the flag window.switchereSdk.debug to true:

<script src="https://sandbox.switchere.com/js/sdk-builder.js"></script>
<div id="switchere" style="min-height: 500px; max-width: 450px; width: 100%;">Loading...</div>
<script>
    window.switchereSdk.debug = true;
    window.switchereSdk.init(/* ... */);
</script>

<script src="https://switchere.com/js/sdk-builder.js"></script>
<div id="switchere" style="min-height: 500px; max-width: 450px; width: 100%;">Loading...</div>
<script>
    window.switchereSdk.debug = true;
    window.switchereSdk.init(/* ... */);
</script>

TIP

Also see all parameters.