Step-by-Step Guide
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 paymentNetworks
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 SELECTIVE_NATIVE
or DISPLAY_NATIVE
.
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
If you go with the two button option you have a very clear separation of the submit flows. Make sure both buttons look exactly the same and hide the correct one on page load. Detect when the user selects a legacy method, show your legacy button and invoke optile's JavaScript function from 3.1. which will also hide the optile button. Your callback function from 3.2. should in turn hide your legacy button while optile's AJAX library will show the optile button, if given in the init call.
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.