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)

Instance Methods

attach(string selectorQuery) : Promise

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
}