iFrame Checkout - with DataDome Captcha Protection
iFrame Checkout includes the following features for public use:
DataDome Captcha Protection
Zip Code entry field present and input required
AVS Verification for Credit Card transactions ensures that the account is valid, the cvv2 is correct, and the zip code matches.
Workflow Basics
Step 1. Perform an API call to OmniFund to issue a NONCE token
Step 2. Assign & persist the NONCE token into your client implementation of your checkout process
Step 3. Customer proceeds through checkout, payment information is assigned to the issued NONCE token upon successful checkout
Step 4. Take the NONCE token and perform an API call to OmniFund to convert it into a chargeable SOURCE token
Step 5. Take the SOURCE token and perform an API call to OmniFund to post a transaction to our HTTP API
Testing Notes
Please be sure to perform any testing of this iFrame Checkout process from a valid HTTPS domain name pointed to where the client implementation is being loaded from. A valid HTTPS domain name is required to connect to this API.
Nonce Token
Request
POST "https://secure.gotobilling.com/api/v3/nonce"
Authorization: Basic xxxxxx
accept: application/json
content-type: application/json |
Response
{
"data": {
"nonce": "nonce_5c9c9dd0abdc4743b86fb04d615560bd"
}
} |
Client implementation
<script src="//secure.gotobilling.com/scripts/omnifund/v3"></script> |
Include the container div within your page's existing form. The ID can be given any name.
Initiate the checkout form, passing it the access token retrieved from the API and the container to place the payment fields in. Note, if you place the "omnifund.js" include within the body of your page, this snippet will need to be placed below it.
*IMPORTANT: Be sure to persist the issued nonce token from the server into the omnifund.setup() function below so that the same assigned nonce token remains available to this function if the page were to be reloaded. Persisting this token is important if DataDome Captcha protection is triggered, as your customer’s browser page will be RELOCATED to OmniFund for captcha validation BEFORE displaying the checkout form, and then your customer will be immediately RELOCATED BACK to your site upon a successful captcha completion, to the originating page on your server that the omnifund.setup() function was triggered on.
When the page loads the following form will be added to the container specified, depending on the payment type selected (by pressing the available “Credit Card” or “Bank Account” tabs):
If your customer has DataDome Captcha protection triggered, they will be immediately and automatically relocated to a special page that will allow the customer to complete the captcha validation. If captcha validation is NOT performed successfully, the customer will not be able to proceed. If captcha validation IS performed successfully, the customer will be immediately and automatically relocated back to your checkout page, which will display the checkout fields to the customer upon returning.
Once the user fills out the checkout form fields, and clicks submit the submitted information is then validated (if the user is paying with a credit card, that card information will have an AVS check run against the card to validate the provided account, cvv, and zip code), after completing validation, the payment information will be assigned to your generated NONCE token. If the following field is not already present in your form, it will be added with the nonce value so that you may capture it along with the other form data.
A summary of the payment account details will also be added to the form as hidden fields, depending on the payment account type selected by the customer
The form will then be submitted to your server.
Overriding Default Form Behavior
The default behavior is for OmniFund.js to submit the parent form after the payment account data has been successfully captured. However, this can be overridden by providing a call-back function during the "omnifund.setup()" call.
Style Customization
The default styling of the payment form can be updated to match the look and feel of your existing page. Almost any aspect of the form can be customized by including the 'style' option during the omnifund.setup() call.
The style object is formatted as follows:
Create a permanent payment source token
Once a nonce token has been obtained from the iFrame checkout form you can create a payment source token that can then be safely stored and used in subsequent transactions in place of the actual payment account details.
Request
Response