Guides
Start typing to search…

Initialize

Open Elements Library

In order to use the Open Elements, you must first make sure you have included the JavaScript library on all the forms that will be rendering the Elements. We recommend that you place this code in the <head> section of your HTML. Please see the example below:

<head>
  
  {/* your code before the js library */}
  
  {/* OpenPath Open Elements JavaScript Library */}
  <script src="https://elements.openpath.io/open-element.4.0.0.js" defer></script>
  
  {/* your code after the js library */}
  
</head>

Initialize the Open Payment Element

Once the script is loaded you have to first initialize the Open Elements. In order to initialize the Open Elements, you will need to have acquired the Public Key and validated the domain in the Quick Start 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:

let oe = new openElements('PUBLIC_KEY', {
	orderId: 'ORDER_ID',
	total: TRANSACTION_TOAL,
});

Additional Initialization Attributes

Besides the required Public Key, Order ID and Amount, there are several other of attributes that can be initialized such as Country codes for localization, Level 3 data such as Cart Items and more. The following is all the additional attributes you can set at Initialization.

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',  
	...  
});

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: '[email protected]',  
		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,  
		},  
	],  
	...  
});

Updated 4 months ago