Automatic Payments - Web-button
When the merchant wants to obtain the authorization to execute recurring payments on a consumer by displaying a QrCode or by letting the consumer type the mobile phone number on a screen.
The interface to display the QrCode or the mobile phone number field is handled by the Web Button that is an embeddable JavaScript that loads the Satispay Payment option on your client.
The consumer can scan the Dynamic Code or type the mobile phone number and confirm the authorization.
Web-button vs Web-redirect
The Web-button is more suited for integration into websites that are mostly used on desktop computers.
The Web-redirect is more suited for integration into websites that are mostly used on mobile devices as it automatically manages the switch between the mobile-browser and the Satispay app.
APIs required for this flow
- Create authorization
- Get authorization
- Create payment (PRE_AUTHORIZED flow)
When creating an authorization token for the Web-button the
callback_urlis 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
},
userClosed: function() {
// executed when the consumer clicks on the X on the top right
}
})
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
},
userClosed: function() {
// executed when the consumer clicks on the X on the top right
}
})
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.
Try the UX
Updated 10 days ago