Pre-authorization - Web-button

When the consumer either scan a Dynamic Code displayed as QrCode or type the mobile number to complete the pre-authorization. Both options are handled by the Web Button that is an embeddable JavaScript that loads the Satispay Payment option on your client

APIs required for this flow

🚧

Create authorization

When creating an authorization token for the Web-button the callback_url is required.

Sequence diagram

Web-button

Once the authorization token has been created, the Web-button can be initialised.

Standard

<script
  src="https://online.satispay.com/web-button.js"
  data-pre-auth-token-id="8f27fbbc-ff4b-45eb-98d0-1cadb3a0afaa"
></script>
<script
  src="https://staging.online.satispay.com/web-button.js"
  data-pre-auth-token-id="8f27fbbc-ff4b-45eb-98d0-1cadb3a0afaa"
></script>

Advanced

The advanced version of the Web-button allows UX customisation of the authorization button.

<script src="https://online.satispay.com/web-button.js"></script>

<img src="https://online.satispay.com/images/en-pay-red.svg" alt="Pay with Satispay" id="pay-with-satispay" style="height: 50px; cursor: pointer;" />

<script>
var satispay = SatispayWebButton.configure({
  preAuthTokenId: '8f27fbbc-ff4b-45eb-98d0-1cadb3a0afaa',
  completed: function() {
    // executed on pre auth token success or failure
  }
})

document.getElementById('pay-with-satispay').addEventListener('click', function(e) {
  e.preventDefault()
  satispay.open()
})
</script>
<script src="https://staging.online.satispay.com/web-button.js"></script>

<img src="https://staging.online.satispay.com/images/en-pay-red.svg" alt="Pay with Satispay" id="pay-with-satispay" style="height: 50px; cursor: pointer;" />

<script>
var satispay = SatispayWebButton.configure({
  preAuthTokenId: '8f27fbbc-ff4b-45eb-98d0-1cadb3a0afaa',
  completed: function() {
    // executed on pre auth token success or failure
  }
})

document.getElementById('pay-with-satispay').addEventListener('click', function(e) {
  e.preventDefault()
  satispay.open()
})
</script>

SatispayWebButton.configure() can be used to create an instance of web button. Once done then call open() or close() functions in response to any event. The preAuthTokenId parameter must be passed to configure() function.

🚧

The script must be loaded directly from https://online.satispay.com/web-button.js. Using a local copy is unsupported, and may result in errors.