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.
To include the sandbox iframe in your app, inject the following script:
<script src="https://www.tripleplaypay.com/static/js/sandbox.js"></script>
View full sandbox.js script here.

Tools

Payment Link Generator (Account Required)
Access the Payment Link generator

Account required. This easy payment functionality utilizes your unique public 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 start an instance of 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.

Options

Below are available options for the iFrame:

Apple Pay Configuration

By default, the Triple Play Pay iFrame automatically renders Apple Pay as long as the Apple Pay payment option is enabled in your account. However, if you plan to host our iFrame on a domain other than tripleplaypay.com, Apple Pay requires that you verify your custom domain in order to process payments. If you do not verify your domain, customers browsing your custom domain will not be able to complete the Apple Pay checkout.

Below are the steps to have your domain(s) verified for Apple Pay:

  1. Register your merchants and sub-merchants in TPP.
    Make sure each domain or subdomain is accounted for with the TPP team.
  2. Visit the link for our domain association file.
    Download the Apple domain association file
  3. Save the file locally.
    On Windows, press Ctrl + S, on Mac, press Command + S.
  4. Remove any .txt extension if present.
    Ensure the file name is apple-developer-merchantid-domain-association without .txt at the end.
  5. Host the file in the same path pattern at every domain and subdomain.
    Create (if necessary) a .well-known folder at the root of your domain and place the file there. For example, your hosted file path should look like:
    https://example.com/.well-known/apple-developer-merchantid-domain-association
    https://subdomain.example.com/.well-known/apple-developer-merchantid-domain-association
  6. Send us a list of all domains and subdomains that will be processing payments.
    This includes any domains where you embed our payment iFrame.
  7. TPP verifies your domains.
    We will complete the domain verification on our side so Apple Pay can be enabled for each of your custom domains. Once verified, you can seamlessly process Apple Pay transactions on your site.