The Triple Play Pay Iframe

To include the iframe in your app, inject the following script:


								<script
								src="https://www.tripleplaypay.com/static/js/triple.js"></script>

View full triple.js script here.

Tools

Payment Link Generator

Access the Payment Link generator

Account required. This easy payment functionality utilizes your unique API key to auto-generate an iframe. It allows you to create payment and subscription pages to send or provide on the spot as invoices or bills.
At the bottom of the page, open the Developer Options to find a link to view and copy the code that is generated.

Iframe Demo

See a quick example of the iframe in action:

No account or API key required.

Initialize a Triple

To accept a Triple (a payment) through the iframe, build it into your page or have it open in a separate window utilizing:
containerSelector: '#example' or newWindow: true.

The JS below shows the minimum required code to display the functional iframe in your page once you have included the above script.

Configure your payment options: Any pay service (Google Pay, Apple Pay, etc...) will appear under the Credit Card section of the iframe when activated.

Button to trigger the payment process:

Clear irrelevant data:

Generate form again with new parameters:

Configuration

Custom pay button text:

Add surcharge to the amount, passed to the user:

Meta data: Add any custom fields to collect additional data.

Saved meta:

Collect full name:

Collect shipping address: Includes inputs for full name and address.

Collect billing address: Includes inputs for full name and address.

Collect ZIP: Available as optional or required.

Provide option to opt in to emails:

Collect email address: Available as false, optional, or required.

Collect phone number: Available as false, optional, or required.

Add a tip to the total amount:

Allow the customer to add their own tip: Using this option will override the tipValue parameter.

Forms

Display a form in the iframe:

Styles

Available button CSS customizations:

Available input field CSS customizations:
Note: Borders are enabled by default. To hide borders, use "borderLeftStyle":"hidden", addressing the respective border that you would like to hide.