Payment Integration
Overview
Payment API Onboarding Process
1.
2.
3.
Integration
Integration Overview
1.
a. Test:
https://api.quickstream.support.qvalent.com/rest/v1/quickstream-api-1.0.min.js
b. Production: https://quickstream.westpac.com.au/docs/quickstreamapi/v1/quickstream-api-js/
2.
3.
4.
5.
Example Flow (Make Payment)
Example Flow (Setup Direct Debit)
Detailed Steps
Step 1 - Host Example Page
<html>
<body>
<!-- this form will POST a single use token to your server -->
<form id="payment-form" action="/process-payment" method="post">
<div data-quickstream-api="creditCardContainer"></div>
<input id="make-payment-submit" type="submit" disabled="true"/>
</form>
<script src="https://api.quickstream.westpac.com.au/rest/v1/quickstream-api-1.0.min.js">
</script>
<script type="text/javascript">
var submit = document.getElementById('make-payment-submit');
QuickstreamAPI.init({
publishableApiKey: "{publishableAPIKey}"
});
var trustedFrame;
var options = {
config: {
supplierBusinessCode: "{supplierBusinessCode}"
}
};
QuickstreamAPI.creditCards.createTrustedFrame(options, function(errors, data){
trustedFrame = data.trustedFrame;
if(errors){
submit.disabled = true;
} else {
submit.disabled = false;
}
});
var form = document.getElementById("payment-form");
form.addEventListener("submit", function(event){
event.preventDefault();
trustedFrame.submitForm(function(errors, data){
if(!errors){
QuickstreamAPI.creditCards.appendTokenToForm(form, data.singleUseToken.singleUseTokenId);
form.submit();
}
});
});
</script>
</body>
</html>The URL shown in the snippet above is for the Production environment. To use QuickStream-API.js in the Support environment replace this URL with https://api.quickstream.support.qvalent.com/rest/v1/quickstream-api-1.0.min.js.
Step 2 - Set your Publishable API Key & Supplier Business Code
1.
2.
3.
Step 3 - Test the page
| Field | Value |
|---|---|
| Cardholder name | Token tutorial |
| Credit card number | 4242 4242 4242 4242 |
| Expiry Date | 12/2028 (this can be any future date) |
| CVN | 123 |
Step 4 - Take payment or register a payment method
1.
2.
3.
Additional Tips
1.
4.
Modified at 2024-04-23 21:42:15