Summary
The Open Payment Element object abstracts generating a hosted checkout form to be executed on the OpenPath platform via various processors. There are three stages to the widget, which are instantiating the widget with an order information (amount, currency, order ID, etc.), attaching the widget to be loaded in an IFrame in some HTML Element, and then using a response string from the processor to carry on further web logic. A general example of its usage is as follows.
<head>
…
<script src="https://asset.openpath.io/js/openpath/op-payment.1.0.0.js"></script>
…
</head>
<body>
…
<div id="widget-box" style="width:400px;height:300px;"></div>
…
</body>
<script>
…
let widget = new Op.PaymentWidget('abcdefgh12342dxq', {
orderId: 'ACED-141402',
total: 99.99,
currency: 'USD',
paymentType: 'sale',
disableCreditCard: false,
enableECheck: true,
billingAddress: {
address1: '200 Test Drive',
city: 'Los Angeles',
state: 'CA',
country: 'US',
},
shippingAddress: {
address1: '200 Test Drive',
city: 'Los Angeles',
state: 'CA',
country: 'US',
},
lineItems: [{
productCode: 'MAD-11',
description: 'a scarf',
amount: 99.99,
quantity: 1
}],
css: [
{
type: 'style',
cssText: '.op-cc-number{border-bottom:none;}',
},{
type: 'link',
href: 'https://example.com/path/to/file.css'
}]
});
widget.attach('#widget-box')
.then (function (response) {
doSomethingWithResponse(response);
});
</script>
Inclusion
The element comes in a library called op-payment.1.0.0.js. When including this library, the Op property is reserved on the window to access the Open Payment Element class. This library also requires the jQuery library to be loaded beforehand. Lastly, the domain that is loading the payment widget needs to be registered on the merchant’s Site Validation settings in OpenPath’s client.
Constructor
Op.PaymentWidget(string apiLoginId, object order)
Creates a new Open Payment Element using the API login ID to find which configurations to use to process a transaction with information passed via the order object
Instance Methods
attach(string selectorQuery) : Promise
Loads the Open Payment Element's form IFrame into the element selected via the selectorQuery string. After a payment is processed successfully for the customer, the returned promise will execute its resolve function passing it the response string from the merchant’s processor. Else, if there is an error with configuration, the reject function will be called with error
Order Configuration
When instantiating the Open Payment Element, an order must be passed to the constructor to provide required information on the payment that the customer will attempt. Moreover, CSS can be passed to include in the hosted payment widget.
order: {
orderId: string, // required
total: number, // required
currency: string, // ISO-4217 3 letter currency code
paymentType: string, // ‘sale’ or ‘auth’
enableECheck: bool, // false or true
disableCreditCard: bool, // false or true
billingAddress: address,
shippingAddress: address,
lineItems: Array[lineItems],
css: Array[css]
}
address: {
address1: string,
address2: string,
city: string,
state: string,
zip: string,
country: string
}
lineItems: {
productCode: string,
description: string,
amount: number,
quantity: number
}
css: {
type: string, // ‘style’ or ‘link’
cssText: string, // css string
href: string, // a link to a hosted css stylesheet
}
Comments
0 comments
Please sign in to leave a comment.