TAAP Button Integration Guide

Overview

The TAAP Button can easily be integrated with minimal configuration. This guide provides technical documentation for developers integrating the TAAP Button.

How to Get Started

1. Integrate the TAAP Button (See examples below)
2. You will need a gateway that is supported by TAAP
   • Email support@taapit.com for a list of supported gateways
3. Receive your TAAP Merchant ID
4. Start accepting payments with TAAP

Examples

Sandbox

The sandbox environment allows you to test the TAAP button integration without processing real transactions. This environment is designed to mimic the production environment as closely as possible, providing a safe space to ensure your integration works correctly before going live.

To use the sandbox environment, simply use the sandbox TAAP button script provided in the example below:

<script 
        src="https://dashboard.taapit.com/taapit-button.js"
></script>

Production (Live)

Basic Example

<script 
  src="https://dashboard.taapit.com/taapit-button.js?tmid=73b959db-0415-11f0-aa0d-0242ac120008" 
  data-amount="1256"
></script>

Alternate Button Location

<script 
  src="https://dashboard.taapit.com/taapit-button.js?tmid=73b959db-0415-11f0-aa0d-0242ac120008" 
  data-amount="1256"
  data-button-target="alt-taap-div"
></script>

Custom Button Class Name

<script 
  src="https://dashboard.taapit.com/taapit-button.js?tmid=73b959db-0415-11f0-aa0d-0242ac120008" 
  data-amount="1256"
  data-button-target="alt-taap-div"
  data-button-class-name="custom-taap-button"
></script>

Required Merchant Information

• TAAP Merchant ID: A UUID received from TAAP upon registration.

TAAP Button Script Integration

Include the following script tag in your HTML to generate the TAAP button:

<script 
  src="https://dashboard.taapit.com/taapit-button.js?tmid={TAAP Merchant ID}" 
  data-amount="{amount of transaction in cents}" 
  data-button-target="{id of the div where the button will be placed}"
></script>

Parameter Descriptions

Required Parameters:

• tmid – The TAAP Merchant ID
• data-amount – The transaction amount in cents.

Optional Parameters:

• data-button-target – ID of the div for button placement. Defaults to 'taap'.
• data-button-class-name – Name of the PaymentButton object. Defaults to 'myPaymentButton'.

Note: The target div MUST exist on the page or the button will not render.

Button Behavior

• Mobile Devices: Opens the TAAP App or prompts installation.
• Non-Mobile Devices: Displays a QR code to open the TAAP App via mobile.
• Includes a link to send the TAAP link to another person via phone number.

Event Listeners

The button generates several JavaScript events to monitor payment progress:

• payment_requested – Triggered when the user opens the TAAP App.
• card_tapped – Triggered when the user taps their card to the app.
• gateway_response – Triggered upon receiving a gateway response.
• timeout – Triggered when no card is tapped within 30 seconds.

Event Listener Example

document.addEventListener('DOMContentLoaded', function() {
  window.customButton.on('payment_requested', (data) => {
    console.log('event data', data);
    // your code
  });
  window.customButton.on('card_tapped', (data) => {
    console.log('event data', data);
    // your code
  });
  window.customButton.on('timeout', (data) => {
    console.log('event data', data);
    // your code
  });
  window.customButton.on('gateway_response', (data) => {
    console.log('event data', data);
    // your code
  });
});