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 
6min

Add SDK to React App

If your site is built with React and you're trying to install the Tensile JS SDK, there are multiple ways to add the SDK to your application. To explore these methods, you can check out the links below.

  • https://betterprogramming.pub/4-ways-of-adding-external-js-files-in-reactjs-823f85de3668
  • https://stackoverflow.com/questions/34424845/adding-script-tag-to-react-jsx

Otherwise, we recommend the following method.

1. Add the CDN link to your static index.html page

The CDN link for the Tensile SDK needs to be placed in the static index.html file of your React App. This can usually be found in the "public" folder. Paste the script inside the head tag. Here is a "Create React App" example where the CDN link is placed in the <script> tag at the bottom of the <head> tag.

HTML
|



2. Access the Tensile library in your React component(s)

Now that the SDK has been imported via the CDN link, you can access the Tensile library via the window object. Add a <div> container tag to your rendered html (e.g. see id="tensile-button-container"). This will be the root element that the button will append to.

Using either the componentDidMount or useEffect lifecycle methods, you can instantiate the Tensile Button and provide it with your own function for dynamically fetching your order information and submitting it to your backend to create a payment.

Once a response returns, the modal will open up in your application so checkout can be processed!

JS
|



Note, if you're getting an error while trying to hit our POST /payments endpoint from your backend server, please double check your request details such as API credentials, request body details, etc. If you're getting an unauthorized or CORS error, we may need to whitelist your domain to allow you to call our gateway.

Updated 04 Mar 2022
Did this page help you?
Yes
No
UP NEXT
Donations for Non-Profits
Docs powered by archbee 
TABLE OF CONTENTS
1. Add the CDN link to your static index.html page
2. Access the Tensile library in your React component(s)