Integration
No support for hosted checkout
Please note that right now the only integration type supported for Australia is the Embedded Checkout v2 (we don’t support our hosted checkout yet).
Technical integration with Volt Gateway to support payments in Australia works as in every other country, but with some market specific requirements. This guide provides step-by-step instructions to efficient and successful integration.
Most of the guide is based on the standard documentation. On this page we try to highlight the differences specific to PayTo.
TL;DR
What you need to do to make your first successfull AUD transaction:
- Get your Fuzebox account and generate access credentials
- Authenticate
- Create checkout dropin and render it on your page
- Setup notifications to receive updates about payment status
- Optionally: manage “Pay” button outside of the checkout component
Get your Fuzebox account
The first step of the actual integration is creating a Fuzebox account and generating your access credentials.
To learn more, check our direct integration steps
Authenticate
Before making any API requests you need to authenticate with created access credentials.
To learn more, check our API authentication manual.
Request a payment
The basic flow in Australia requires to call /dropin endpoint using the POST method.
In the request, make sure to send the required parameters:
{
"currencyCode": "AUD",
"amount": "10000", // The amount of the transaction in 1/100 units (pence, cents etc)
"type": "OTHER", // or any other type supported in Australia, according to your business profile
"uniqueReference": "123456789", // Unique reference for the payment from the merchant, must contain only alphanumeric characters
"additionalDescription": "Purchase for new shoes at Shoes.com - brand ABC", //payment description allowing to pass some additional data. It is sent to PayTo platform, presented in shoppers bank as payment and payment agreement description.
"shopper": {
"reference": "user-13489", // Your unique reference for the shopper, can contain alphanumeric characters plus selected symbols as shown in the pattern
"firstName": "Joe",
"lastName": "Smith"
}
}
Request in API docs |
Try yourself with our Postman Collection. |
Initialise and configure the Drop-in component
Initialising and configuring the component
In order to initialise Volt checkout Drop-in component follow the integration as described in the Volt Embedded Checkout (v2) guide.
Render Volt Embedded Checkout
Render the component as described in the Volt Embedded Checkout (v2) guide.
Completing the payment
The shopper enters one of the two possible identifications to complete the payment
- BSB & Account Number
- PayID
Once the shopper clicks the “Pay” button, Volt will be handling the payment, and the frontend component will be pooling for the newest payment status.
Note: Please note that for payments in AUD we don’t support different countries and languages. During the component initialisation you can pass any value in language or country but they will not have an effect on the payment request.
Notifications
Volt Notifications works the same way for AUD payments as for EU, UK and Brasil flows.
You can integrate them according to the notification guide.
Additional configuration options
To gain more control on the “Pay” button placement use the following Pay button placement guide.
If your checkout page has a “Pay” button already, you may want to hide the “Pay” button rendered by our Drop-in component. It should not be possible to submit the payment until the user inputs the required account identification field (payId or BSB and account number). The drop-in component emits events informing about the current state of user input and controls “Pay” button activation.
Pay button visibility
For payments in AUD there is an additional parameter allowing you to control the “Pay” button visibility. As the whole process is conducted in the iFrame you will be informed when the Pay button should be hidden/deactivated as payment is processed. This is done using payButton.style.visibility attribute.
paymentComponent.on('change', function(event) {
payButton.disabled = !event.complete
payButton.style.visibility = event.processing ? "hidden" : "visible"
});Additional configuration options, allowing to customize the look-and-feel of the embedded checkout can be found in the optional configuration manual.
No colors customization
Keep in mind that as for now in Australia we don’t support any of the customization options regarding colors of the UI elements.