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://sandbox.gotobilling.com/api/v3/nonce"
Authorization: Basic xxxxxx
accept: application/json
content-type: application/json

Response

{
    "data": {
        "nonce": "nonce_5c9c9dd0abdc4743b86fb04d615560bd"
    }
}

Client implementation

<script src="//sandbox.gotobilling.com/scripts/omnifund/v3"></script>

Include the container div within your page's existing form. The ID can be given any name.

<form>
    <div id="checkout-container"></div>
	<input type="submit" value="submit" />
</form>

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.

omnifund.setup('NONCE-TOKEN-FROM-SERVER', {
    type: 'dropin',
    container: 'dropin-container',
});

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.  

<input type="hidden" name="omnifund_nonce" value="nonce_5c9c9dd0abdc4743b86fb04d615560bd">

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

<input type="hidden" name="omnifund_nonce_details[type]" value="card">
<input type="hidden" name="omnifund_nonce_details[network]" value="visa">  <!-- Possible values: visa|mastercard|amex|discover|jcb -->
<input type="hidden" name="omnifund_nonce_details[number]" value="4111xxxxxxxx1111">  <!-- Masked account Number -->
<input type="hidden" name="omnifund_nonce_details[expiration]" value="1225">  <!-- Expiration of the card -->
<input type="hidden" name="omnifund_nonce_details[name]" value="Test Card">  <!-- Name on card -->
<input type="hidden" name="omnifund_nonce_details[zip]" value="33611">  <!-- Zip code for the card -->

<input type="hidden" name="omnifund_nonce_details[type]" value="bank">
<input type="hidden" name="omnifund_nonce_details[routing]" value="123123123">  <!-- Bank routing number -->
<input type="hidden" name="omnifund_nonce_details[number]" value="XX-2233">  <!-- Last 4 digits of account number -->
<input type="hidden" name="omnifund_nonce_details[savings]" value="false">  <!-- Whether or not this is a savings account -->

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.

omnifund.setup('NONCE-TOKEN-FROM-SERVER', {
    type: 'dropin',
    container: 'dropin-container',
}, function(response){
    // example card response object:
    // {
    //    "type": "card",
	//	  "network": "visa",
	//	  "number": "411111xxxx1111",
	//	  "expiration": "1225",
	//	  "name": "Test Card",
	//	  "address": {
	//		  "street": null,
	//		  "suite": null,
	//		  "city": null,
	//		  "state": null,
	//		  "zip": "33611"
	//	  }
    // }
    
    // example bank response object:
    // {
    //    type: 'bank',
    //    routing: '123123123',
    //    number: 'xx-2234',
    //    savings: false,
    // }
});

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.  

    omnifund.setup('NONCE-TOKEN-FROM-SERVER', {
        type: 'dropin',
        container: 'dropin-container',
        style: {
            '#omnifund-dropin': {
                'background-color': '#f1f1f1'
            },
            '#omnifund-dropin input': {
                'background-color': '#000'
            }
        }
    });

The style object is formatted as follows:

style: {
	// each element decleration must specifiy 
	// the '#omnifund-dropin' container
	'#omnifund-dropin page-element': {
    	'property1': 'value',
		'property2': 'value'
	},
    '#omnifund-dropin anotherpage-element': {
        'property1': 'value',
    }
}

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

POST "https://sandbox.gotobilling.com/api/v3/sources"
Authorization: Basic xxxxxx
accept: application/json
content-type: application/json

{
  "source": "nonce_636ab58d377649ff81ce6616ff688818"
}

Response

{
    "id": "source_6a1a2ec2d6ef48b1a3fb707e0b9ca8c0",
    "object": "card",
    "network": "visa",
    "last4": "1111",
    "zip": "33611",
    "expiration": "1225",
    "address": {
        "zipCode": "33611"
    },
    "createdAt": "2023-04-05",
    "updatedAt": "2023-04-05"
}