webMethods API Portal tutorial
Objective
To configure stripe 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.Supported From:
API Portal 10.4
Intended Audience
API Administrator of API Portal
Step 1: Creating Stripe Account
Register with Stripe using the link, https://dashboard.stripe.com/register. You will have two keys, publishable key(typically, starts with 'pk_key') and secret key(typically, starts with 'sk_key').
Step 2: Configuring stripe 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 stripe server
- Create customer object in your stripe account using the card information provided.
To acheive this, API Portal requires secret key which you have obtained in Step 1. You can configure the secret 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 "Stripe" as Payment gateway type
- Enter the secret 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 stripe 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, "stripe_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">
<div id="payment-section"></div>
<input type="hidden" data-portal-registration-field data-portal-registration-field-name="payment-token" id="payment-token">
<div id="card-errors"></div>
</div>
- At the end of the html content add the following css,
<style>
#payment-section {
display: inline-block;
width: 80%;
padding: 12px 10px;
border: 1px solid #CCC;
}
#card-errors {
color: #fa0a0a;
}
</style>
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://js.stripe.com/v3/"];
PORTAL_CONFIG_SETTINGS.REGISTER_PLUGINS = [];
var stripe, elements, card;
var plugin = new Object();
plugin.type = "payment";
plugin.name = "stripe";
plugin.selector = "payment-section";
plugin.errorElement = "payment-section-wrapper";
plugin.tokenField = "payment-token";
plugin.render = function() {
stripe = Stripe('pk_test_<xxxxx>');
elements = stripe.elements();
var style = {
};
// Create an instance of the card Element.
card = elements.create('card', {style: style});
// Add an instance of the card Element into the `card-element` <div>.
card.mount('#payment-section');
card.addEventListener('change', function(event) {
var displayError = document.getElementById('card-errors');
if (event.error) {
displayError.textContent = event.error.message;
} else {
displayError.textContent = '';
}
});
}
plugin.execute = function() {
stripe.createToken(card).then(function(result) {
if (result.error) {
// Inform the customer that there was an error.
var errorElement = document.getElementById('card-errors');
errorElement.textContent = result.error.message;
} else {
// Send the token to your server.
$("#payment-token").val(result.token.id);
executed(plugin.name);
}
});
},
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);
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, now open the registration form. The form will have additional field to collect the card information from the end user.
