Summary
Merchants can utilize the Open Payment Element to design a secure payment user interface without ever seeing or accessing the customer's credit card information. This lets the merchant to remain compliant with online payment requirements such as PCI compliance.
Set during the startup of the Payment Element, the Open Payment Element can accept credit cards and/or eCheck once it has been configured.
Credit Card
The credit card fields accept all domestic and international credit card payment networks in addition to Visa, American Express, and Master Card, as illustrated in the sample below.
eCheck
Depending on the specified check or check providers in OpenPath, the eCheck option permits you to process ACH, eChecks, and Print checks.
disableCreditCard: false,
2enableECheck: true
Branding & Style
When the Open Payment Element is initialized, it will extract all the styling from the page that is calling it and match it as closely as possible. This includes colors, fonts, fields, and any other normal HTML element formatting. If more formatting is required, you can also inject direct CSS styles or URLs to CSS style sheets into the element to take complete creative control.
Code Example
css: [
{
type: 'style',
cssText: '.op-cc-number { border-bottom: none; }',
},
{
type: 'link',
href: 'https://example.com/path/to/file.css'
}
]
Security
Open Payment Element's current implementation allows serverless initiation, which eliminates the need for server-to-server backend calls. This enables for "codeless" implementations for the majority of websites, with the potential to incorporate more complicated data sets as needed.
To aid the serverless implementation, we have merged domain and fingerprinting technologies to confirm, first, that you are permitted to generate this payment element and, second, that your fingerprint matches the allowed domain's initial request.
Getting Started
In getting started we are assuming you already have an OpenPath account to attach the Open Payment Element to. If you do not currently have an OpenPath account, signup for a free account at:
OpenPath - Create FREE Account → https://client.openpath.io/create-account
Connecting to an OpenPath Site
The first step in setting up your Open Payment Element is choosing an OpenPath site to connect the Element to. You can find you Sites by logging in to your Enterprise OpenPath account and navigating to Sites in the left menu.
Get the Public Key
First you will need to take record of the API Login ID which is the Public Key you will need to use when initializing your Open Payment Element which can be found under the Settings tab in your Site.
Validate you Domain
Second you will need to validate the domain you will be initializing from to do the final authorization and fingerprinting of the request. To do this navigate to your Validation tab in your Site, from the Source, make sure to select Widget and type the domain that will be initializing the Open Payment Element in the domain and click the + and then the Save.
Render the Element
One you’ve completed the validation steps you can now render your element on any page under that domain. The following is the simplest implementation of the element, which we will then build on in the following steps.
JavaScript Reference
Create a reference to the Open Payment Element JavaScript in the <HEAD> of your <HTML> document. Please note you can directly reference the version you are using, such as op-payment.1.0.0.js which will ensure breaking change updates will not affect your implementation. If you would like to always use the current version, you can also reference op-payment-current.js.
Code Example
<head>
…
<script src="https://asset.openpath.io/js/openpath/op-payment.1.0.0.js"></script>
…
</head>
Create an Element to Attach
Next you have to have an element on your page that we can attach the Open Payment Element to, this can be any element with any ID or Class which can be attached to after initialization. In the example below we’ve created a div with an ID of op-payment-element.
Code Example
<div id="op-payment-element" style="width:400px;height:300px;"></div>
Initialize the Open Payment Element
Once the script is loaded and there is an element to attach to, we can now initialize the Element. In order to initialize the Element, we will need to have acquired the Public Key and validated the domain in the previous steps for this to work correctly.
In the example below we are going to initiate the using the minimum requirements which are Public Key, Order ID and Total.
Code Example
let openElement = new Op.PaymentWidget('PUBLIC_KEY', {
orderId: 'ORDER_ID',
total: TRANSACTION_TOAL,
});
Attach the Element
Now we attach and render the Open Payment Element with this final call.
openElement.attach('#op-payment-element').then(
function (response) {
// an approval promise that was create and you can do something with
}
);
As we can see from the above the JavaScript will create a promise, the promise is that if the transaction is approved, we will return the success results; however, if the transaction is declined, we will return the reason it was declined to the customer and allow them to try again with updated or new information.
Approved Response
{
responseId {integer}
responseCode {integer}
responseText {string}
paymentTransactionId {string}
orderId {string}
paymentToken {string}
successful {boolean}
}
Handle the Response Promise
If the transaction is successfully processed, then the Approved Response Promise will fire and return some details of the transaction. You can use these values to reference the transaction in the OpenPath back office, issue Captures and Refunds or use the Payment Token to bill subsequent transactions for Trials or Subscriptions.
responseId : Response ID - A unique id about this response in the OpenPath system.
responseCode : Response Code - The standard mapped response from the payment gateway or processor.
responseText : Response Text - Human readable response text based on the Response Code.
paymentTransactionId : Payment Transaction ID - The transaction ID returned from the payment gateway or processor.
orderId : Order ID - The original Order ID supplied to OpenPath by the Merchant for this order.
paymentToken : Payment Token - A secured payment token that securely represents the payment method used that can be used to charge the customer again at a later time.
successful : Successful - Indicates if this transaction was successful or not.
Optional Actions After Payment
In order to take actions after the payment such as Capturing, Refunding or Rebilling you can either login to the OpenPath back office to perform these actions on the transactions or you can call the OpenPath Transaction API to perform these actions server side.
For more information on how to access the API, please refer to the following documentation:
Documentation - NMI Emulation – OpenPath, Inc. (zendesk.com)
Postman Examples - Emulation API Documentation (openpath.io)
Taking it Further
In the above steps, we took the steps for minimal functionality; however, for the best performance it is recommended you send the maximum data through the Element.
Additional Payment Methods
In order to accept more than Credit Cards and start accepting eChecks, you need to enable this through the element. You have the ability to enable eChecks or Disable Credit Cards during the construction of the Element as follows. The default behavior if no set is to show Credit Card payment method only.
let openElement = new Op.PaymentWidget('PUBLIC_KEY', {
...
disableCreditCard: false,
enableECheck: true,
...
});
Setting the Currency
By default, the Open Payment Element will process all payments as USD, if you want to process the payment in a different currency you can change it by applying the correct three letter ISO 4217 currency code during the initialization. For more information on the ISO codes, check the link below:
ISO - ISO 4217 — Currency codes
let openElement = new Op.PaymentWidget('PUBLIC_KEY', {
...
currency: 'USD',
...
});
Processing a Sale or Authorization
By default, the OpenPath Payment Element will process all payments as a Sale, which is both an Authorization and Capture at the same time; however, if you want to do an Authorization only, you can change that by setting the Payment Type attribute during initialization. Usable payment types: SALE AUTH
let openElement = new Op.PaymentWidget('PUBLIC_KEY', {
...
paymentType: 'AUTH',
...
});
Adding Customer Information
During initialization you can also pass details about the customer using the customer object and customer attributes as follows.
let openElement = new Op.PaymentWidget('PUBLIC_KEY', {
...
customer: {
firstName: 'Jane'
lastName: 'Doe',
company: 'Northwind Inc',
email: 'armstrong@example.com',
phone: '5551231234',
},
...
});
Adding Shipping and Billing Information
You can add both either or both shipping information and billing information using the address attributes and the billing address object and shipping address object as follows.
let openElement = new Op.PaymentWidget('PUBLIC_KEY', {
...
billingAddress: {
address1: '200 Test Drive',
city: 'Los Angeles',
state: 'CA',
country: 'US',
postalCode: '123456'
},
shippingAddress: {
address1: '200 Test Drive',
city: 'Los Angeles',
state: 'CA',
country: 'US',
postalCode: '123456'
},
...
});
Adding Product Information
Finally on the information you can add to the Open Payment Element to be passed to the OpenPath platform is the products the customer is purchasing through the Line Items List as follows.
let openElement = new Op.PaymentWidget('PUBLIC_KEY', {
...
lineItems: [
{
productCode: 'SKU-100',
description: 'Cool Widget',
amount: 99.99,
quantity: 1
},
{
productCode: 'SKU-200',
description: 'Cooler Widget',
amount: 129.99,
quantity: 1
},
],
...
});
Customizing the Look and Feel
If you want to take the Open Payment Widget to another level by changing how it looks and feels you can also apply your own CSS stylings to the element as well by-passing custom styles or links to custom style sheets as follows.
let openElement = new Op.PaymentWidget('PUBLIC_KEY', {
...
css: [
{
type: 'style',
cssText: '.op-cc-number{border-bottom:none;}',
},
{
type: 'link',
href: 'https://example.com/path/to/file.css'
}
]
...
});
Developers Documentation
For further review please find the following link from our development team:
Comments
0 comments
Please sign in to leave a comment.