webMethods API Portal tutorial
To configure WorldPay payment gateway plugin using which, an API Administrator can charge one or more API Consumer by obtaining the credit or debit card informations.
Note: API Portal will not store any sensitive informations which the consumer user provided during the registration.Support From
API Portal 10.4
Intended Audience
User having "API Administrator" role
Step 1: Creating WorldPay account
Create an account with worldpay using https://online.worldpay.com/signup . You will have two key, service key (starts with T_S_*) and client key (starts with T_C_*).
Step 2: Configuring WorldPay plugin for validating and saving the card
When onboarding user provides card information, API Portal needs to do following things,
- Validate the card information against worldpay server
- Obtain the token and save in the API Portal. Using this token, user can be charged later.
To acheive this, API Portal requires service key which you have obtained in Step 1. You can configure the service key by using the following steps,
- Login to Portal
- Go to Adminstration page from the main menu.
- In the left side, select Configuration -> Plugin Configuration
- Enable the payment plugin configuration, by selecting the checkbox
- Select "WorldPay" as Payment gateway type
- Enter the service key which you have obtained during step 1
- Click Save
Step 3: Configuring plugin to render in the registration page
In this step, you will be doing configuration to render the worldpay plugin in the registration page of API Portal.
3.1: Create a modification set
Plugin are configured from UI using the modification set. To create the modification set,
- Go to Administration Page
- In the left side, Select Customization
- Click "Create" button, provide a value in the name field, (lets say, "worldpay_modset") and template as "apiportal"
3.2: Add the html placeholder for plugin
Once the modfication set is created, we need to modify registration html. To the modify the registration form,
- Click the Edit icon in the modification set, which you have created in (3.1).
- Select the "Pages" section in the second level navigation
- Select the page, "Sign-up Form" in the list of pages displayed
- In the html content displayed add the following content in the place where you want to display the plugin
<div id="payment-section-wrapper">
<h5>Credit or debit card</h5>
<div id="payment-section"></div>
<input type="hidden" data-portal-registration-field data-portal-registration-field-name="payment-token" id="payment-token">
</div>
- At the end of the html content add the following css,
#payment-section {display: inline-block;}iframe#_iframe_holder {width: 435px !important;}3.3: Add the JavaScript for executing the plugin
At the end of step 3.2 we have define where the plugin to be loaded and rendered. Now we have to define the plugin for execution when the registration form is rendered.
As part of this release API Portal 10.4, life cycle method for plugin is defined using which Administrator can add his own custom plugin in the registration page.In order to execute the plugin, add the following plugin definition in the JavaScript secition of the page.
PORTAL_CONFIG_SETTINGS.JSCRIPT_URLS = ["https://cdn.worldpay.com/v1/worldpay.js"];
PORTAL_CONFIG_SETTINGS.REGISTER_PLUGINS = [];
var plugin = new Object();
plugin.type = "payment";
plugin.name = "worldpay";
plugin.selector = "payment-section";
plugin.errorElement = "payment-section-wrapper";
plugin.tokenField = "payment-token";
plugin.render = function() {
Worldpay.useTemplateForm({
'clientKey':'T_C_<xxxxx>',
'paymentSection':'payment-section',
'saveButton':false,
'display':'inline',
'reusable':true,
'callback': function(obj) {
$("#payment-token").val(obj.token);
executed(plugin.name);
}
});
}
plugin.execute = function() {
Worldpay.submitTemplateForm();
},
plugin.validate = function(data) {
var value = $("#payment-token").val();
var isvalid = value === undefined ? false : value.length > 1;
return isvalid;
};
plugin.onSubmitComplete = function(data) {
};
PORTAL_CONFIG_SETTINGS.REGISTER_PLUGINS.push(plugin);
Note: Replace the key T_C_<xxxxxxxxx> with the client key obtained during step 1
3.4: Activation of modification set.
From the above steps, we have configures where to render and how to execute the plugin in the registration form. To see the changes, we need to activate the modification set where we have defined this plugin. To activate, click the activate icon of the modification set in the views section of Adminstration page.
Output:
When the above configuration is done, open the registration form. The form will have additional field to collect the card information from the end user.
