website logo
⌘K
Welcome! 👋
Tensile API Reference
Shopify
Shopify Merchant Installation Guide
Shopify Refunds Guide
Shopify Promo JS library
BigCommerce
BigCommerce Merchant Installation Guide
BigCommerce Troubleshooting
BigCommerce User Guide
WooCommerce
WooCommerce Merchant Installation Guide
WooCommerce Refunds Guide
SDK for Custom Integrations
Custom eCommerce Stores
Add SDK to React App
Donations for Non-Profits
Docs powered by archbee 
11min

Custom eCommerce Stores

This integration guide is meant for custom-built eCommerce sites. If your site is hosted on an eCommerce platform not listed in our menu, please contact us to request an integration. For any support questions in general, please contact us at support@tensilepayments.com

1. Link to Tensile's JavaScript SDK

To install the Tensile Payments SDK, place the following <script> tag within the <head> of your desired HTML page, e.g. your checkout html page:

<script src="https://cdn.tensilepayments.com/tensile.js"></script>

To test the sandbox version of the SDK, load the following script instead:

<script src="https://cdn.tensilepayments.com/tensile-sandbox.js"></script>

This loads the Tensile SDK and assigns it to a global variable called tensile

2. Add a container div for the Tensile button

In the <body> of your HTML, add a container <div> where you'll want to render the Tensile checkout button:

<div id="tensile-button-container"></div>

You don't have to use "tensile-button-container" as your ID, but whatever ID you use must also be used in the next step.

3. Instantiate the Tensile button

In the <body> of your HTML, somewhere after the container <div> you just added, add the following <script> tag and logic to configure the button:

HTML
|

Your page should now render this button:

Tensile checkout button
Tensile checkout button

4. Set up your backend endpoint

Create an endpoint on your backend server that your frontend can hit to create a payment entry with Tensile. In this example we set up an express server and endpoint to forward the POST request to Tensile's /payments endpoint.

JS
|

Make sure you protect your client ID and secret! They're your API credentials to authenticate with Tensile, so if they're compromised, you'll need to register a new application with us. As shown in the example above, we recommend saving your credentials as environment variables that get injected at runtime.

5. Test the integration!

If all goes well, clicking on the Tensile button should render our checkout experience!

Tensile checkout experience
Tensile checkout experience

If you chose to set up the sandbox SDK and wish to link a bank account to a customer profile on the Link a Bank page, you can use the following credentials for any bank:

  • username: user_good
  • password: pass_good
Updated 10 Mar 2022
Did this page help you?
Yes
No
UP NEXT
Add SDK to React App
Docs powered by archbee 
TABLE OF CONTENTS
1. Link to Tensile's JavaScript SDK
2. Add a container div for the Tensile button
3. Instantiate the Tensile button
4. Set up your backend endpoint
5. Test the integration!