Setting it up

To setup a SoftPoint iframe, you need to add our iframe script and an "iframeContent" div, which contains the iframe with all the fields specified in the configuration of the iframe. Note that this "iframeContent" only contains the input fields, so you can design the iframe header, footer, and container as you like.

Setup

Add a <script> block to the <head> block of your webpage.

<head>
...
<script src="[iframe_url]/api/softpoint-pay?location_id=[location_id]&session_key=[$accessToken] "></script>
</head>

Code Example:

<div id="containerIframe" style="padding: 24px 1rem !important;" class="justify-
content-center mt-5 mb-5 col-md-3">
...
<form>
<div id="iframeContent"></div>
<div style="padding-left: 1rem !important; padding-right: 1rem !important;
padding-bottom: 1rem !important;">
<button id="btnSubmit" class="btn btn-primary btn-block free-button">
Custom Submit
</button>
</div>
</form>
...
</div>

Initializing iframe

This section provides detailed information on how to embed an iframe within your webpage and pass parameters dynamically to the content inside the iframe. You can use this to customize the content displayed based on the parameters you send.

❗️
NOTE: AVS (Address Verification Service) is enabled by default. To use it, set the corresponding parameter to 1 as outlined in the table below. If you wish to disable AVS, set the parameter to 0. However, please be aware that you'll also need to coordinate with your payment processor to ensure AVS is disabled on their end.

Parameter	Description	Value
`location_id`	Location id provided by SoftPoint
`timestamp`	Current Unix timestamp -> used for auto-reload	Unix timestamp
`process_type`	Action to be processed [tokenize, authorize, sale]. Note: tokenize will only tokenize the card, no amount will be processed.	[tokenize, authorize, sale]
`include-cardholder`	Turn cardholder field on/off	0 or 1 - default = 0
`include-street`	Turn street field on/off. Required for US and CAN unless disabled at MID level (contact support to make it optional).	0 or 1 - default = 1
`include-street2`	Turn street 2 field on/off	0 or 1 - default = 0
`include-zip`	Turn zip field on/off. Required for US and CAN unless disabled at MID level (contact support to make it optional).	0 or 1 - default = 1
`include-city`	Turn city field on/off. Required for US and CAN unless disabled at MID level (contact support to make it optional).	0 or 1 - default = 1
`include-state`	Turn state field on/off. Required for US and CAN unless disabled at MID level (contact support to make it optional).	0 or 1 - default = 1
`include-country`	Turn country field on/off. Required for US and CAN unless disabled at MID level (contact support to make it optional).	0 or 1 - default = 1
`include-email`	Turn email field on/off	0 or 1 - default = 0
`country_iso`	ISO 3166-1 Alpha-2 code. Required for US and CAN unless disabled at MID level (contact support to make it optional).	default = US
`currency_iso`	ISO 4217 alphabetic code. Ex: USD	USD
`session_id`	Used for fingerprint (optional)	string
`payment_methods`	Array used to display specific payment methods	["credit_card", "google_pay", "apple_pay"]
`phone_number`	Phone number of the user	string
`default_cardholder_name`	Cardholder name of the user	string
`default_email`	Email of the user	string
`default_street`	Street of the user	string
`default_street_2`	Street 2 of the user	string
`client_url`	The url of your website. Required for Apple Pay	string
`credit-card-only`	Accept only credit cards. Debit card will be declined.	0 or 1 - default = 0
`validate-address`	Verify that ZIP is valid and belongs to US.	0 or 1 - default = 0

Example:

const conf = {
"location_id": [location_id],
"access_token": "[your access token]",
"process_type": 'tokenize',//when process_type is Tokenize, amount will be
ignored
"timestamp": Math.floor(Date.now() / 1000),
"include-cardholder": 1,
"include-street": 1,
"include-street2": 1,
"include-zip": 1,
"country_iso": "US",
"currency_iso": "USD",
“client_url”: “https://your-store.com
}
initPaymentForm('iframeContent', conf);

Submit Action

When the submit button is pressed, call submitPayment javascript function sending the following parameters:

Parameter	Description	Value
amount	Amount of order or shopping cart to be charged	ex. 20.10
orderid	Unique order id
user_id	Unique user id	ex. 5000
location_id	Location id provided by SoftPoint	Ex: 1000000
domain	Domain URL
access_token	Access token in "Generate Access Token"
store-card	Store card for later use. Enabled when process_type is tokenize.	0 or 1 - default = 0
phone_number	The user phone number	Ex: 7513200000
email	The user email
order	The order in array format
market_country_iso	ISO 3166-1 Alpha-2 code	Ex: US, default is country_iso
items	An array of items
id	Unique item ID	Ex: 1000
productSKU	Product SKU
name	Item name	Ex: Credit
quantity	Quantity	Ex: 1
price	Item price	Ex: 10.00
price_currency_iso	ISO 4217 alphabetic code	Ex: USD, default is currency_iso
tax	Tax amount	Ex: 1.00
tax_currency_iso	ISO 4217 alphabetic code	Ex: USD, default is currency_iso
tax_type	Tax type [Exempt, Inclusive, Exclusive]
discounts	Array of discounts
id	Unique discount ID	Ex: 5000
discountCode	Discount code
discountProgram	Discount program
name	Discount name	Ex: disc
amount	Discount amount	Ex: 5.00
amount_currency_iso	ISO 4217 alphabetic code	Ex: USD, default is currency_iso

Example:

const form = document.querySelector('form');
form.addEventListener('submit', (event) => {
event.preventDefault();
//Prepare settings
let amount = 10;
const paymentDetails = {
"location_id": [location_id],
"access_token": "[your access token]",
"amount": amount,
"domain": "https://www.domain.com/",
"store-card": 1,
"user_id": "5000",
"order": {
"items": [{
"id": "1000",
"productSKU": "productSKU",
"name": "Credit",
"quantity": 1,
"price": 10.00,
"tax": 1.00,
"phone_number": "[optional]"
}]
}
}
submitPayment(paymentDetails);
});

And the last step is to add the response functions:

function onApprovedCallback(e) {
console.log('onApprovedCallback called', e);
}
function onDeclinedCallback(e) {
console.log('onDeclinedCallback called', e);
}