1. Integrate optile's payment method list (through its AJAX library)
Integrate optile's AJAX library into your payment page as described in AJAX Library Integration. The placeholder for optile's methods (the
div) should go directly below (or above) your existing method list. Adjust the CSS in a way that the optile method list appears in the same visual style as your legacy list. Hide the radio buttons, add borders, add highlight styling for selected entries using CSS selectors, adjust sizes or whatever else is necessary. In the initialization call to the library add the
deselectLegacyMethods function (see step 3.2). The
payButton ID identifies the button that should be used for optile methods, not your legacy button (see step 4 how you can spare this and extend your own button instead).
2. Integrate optile's LIST request
In order to initialize optile's payment method list your system first needs to make an (authenticated) LIST request from your server-side to the OPG. This should happen when the user navigates to the payment page. As
integration parameter you can use
The resulting LIST ID should then be used to initialize the AJAX library on the payment page. The library will in turn fetch the payment methods available through optile's logic and the corresponding resources, and will render the list into the placeholder from step 1.
3. Combine the lists
Currently we have two lists which both can have one payment method selected. Now we need some logic that makes sure that in total only one method can be selected. This means when the user selects a method in one list, any potential selection in the other list has to be removed.
Let's look at the two cases:
3.1. If the user selects any method from the legacy list make your system call this function in optile's AJAX library:
deselectDynamicMethods() - This will remove any existing selection in the optile list. Also it will hide optile's submit button, if it was given in the initialization. Make sure you show your legacy button in this case.
3.2. If the user selects any method from the optile list, the AJAX library will detect this and invoke the
deselectLegacyMethods callback function that you indicated in the init call. You should implement this function in a way that is deselects all methods in your legacy list and, if applicable, hides your legacy button. optile's AJAX library will automatically show the optile button, if it was given in the init call.
4. The submit button
As a result, a click on the currently visible button will either trigger your existing logic, or it will be an optile submit to OPG.