1. Integrate our payment method list (through its AJAX library)
Integrate the Orchestration Platform's AJAX library into your payment page as described in AJAX Library Integration. The placeholder for the Orchestration Platform's methods (the
div) should go directly below (or above) your existing method list. Adjust the CSS in a way that the the Orchestration Platform 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 the Orchestration Platform methods, not your legacy button (see step 4 how you can spare this and extend your own button instead).
2. Integrate the Orchestration Platform's LIST request
In order to initialize the Orchestration Platform'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 the Orchestration Platform'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 the Orchestration Platform's AJAX library:
deselectDynamicMethods() - This will remove any existing selection in the Orchestration Platform list. Also it will hide the Orchestration Platform'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 Orchestration Platform 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. The Orchestration Platform's AJAX library will automatically show the Orchestration Platformbutton, 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 the Orchestration Platform submit to OPG.