Bumper API Documentation
  • BUMPER API Documentation
  • Reference
    • Payment Solutions
      • PayByLink
        • PayLater
          • Start Payment
            • Example Request
          • Products
          • Status
          • Update
            • Example Request
          • Cancel
            • Example Request
        • PayNow
          • Start Payment
            • Example Request
          • Status
          • Update
            • Example Request
          • Refund
            • Example Request
      • PayInStore
        • Start Payment
          • Example Request
        • Status
        • Update
          • Example Request
        • Cancel
          • Example Request
        • Refund
          • Example Request
  • Webhooks
  • Authentication
  • Redirect Flow
  • Redirection
  • Tracking & Impressions
  • Test Environment
  • Best Practice
  • Calculator iFrame
  • FAQ
  • Changelog
Powered by GitBook
On this page
  • Implementation
  • BUMPER Parameters

Calculator iFrame

An iframe (inline frame) is an HTML element that allows you to embed another website or application within your webpage. This document provides guidance on integrating an iframe provided by Bumper, ensuring proper security and compliance.

Implementation

1. Adding the iFrame

To add an iframe to your webpage, follow these steps:

  1. Open your HTML file in a text editor or an integrated development environment (IDE).

  2. Locate the section of your webpage where you want the iframe to appear.

  3. Copy and paste the following iframe code inside the <body> tag:

Example Code:

<iframe
    width="100%"
    height="600"
    style="border:none;"
    title="Bumper Calculator"
    src="https://www.bumper.co/gb/thirdparty/calculator?defaultAmount=300&firstRepaymentAvailable=true&preApprovedButtonLink=&products=%7B%22products%22%3A%5B%7B%22deposit%22%3Afalse%2C%22deposit_percentage%22%3A%22%22%2C%22id%22%3A94.13936357912868%2C%22instalments%22%3A3%2C%22max%22%3A%223000%22%2C%22min%22%3A%2260%22%7D%2C%7B%22deposit%22%3Afalse%2C%22deposit_percentage%22%3A%22%22%2C%22id%22%3A83.92947152638605%2C%22instalments%22%3A6%2C%22max%22%3A%223000%22%2C%22min%22%3A%2260%22%7D%2C%7B%22deposit%22%3Afalse%2C%22deposit_percentage%22%3A%22%22%2C%22id%22%3A10.210993699885563%2C%22instalments%22%3A9%2C%22max%22%3A%223000%22%2C%22min%22%3A%2260%22%7D%5D%7D&amountPlacement=right&supplier=Bumper">
</iframe>

The above is example code and should not be used in a live environment. Please contact Bumper for the correct iFrame HTML specific to your integration.

  1. Save your HTML file and open it in a web browser to confirm that the iframe loads correctly.

2. Content Security Policy (CSP)

To allow embedding of the Bumper iframe, update your site's CSP settings to permit the Bumper domain.

Example CSP Header:

Content-Security-Policy: frame-src 'self' https://www.bumper.co;

If using a meta tag in HTML:

<meta http-equiv="Content-Security-Policy" content="frame-src 'self' https://www.bumper.co;">

BUMPER Parameters

Parameter
Description

defaultAmount

Sets the default transaction amount for the calculator.

firstRepaymentAvailable

Indicates if the first repayment option is available.

products

Specifies the products included in the calculation.

  • deposit: Whether a deposit is required (true/false).

  • deposit_percentage: Percentage of deposit required (if any).

  • id: Unique identifier for the product.

  • instalments: Number of instalments for repayment.

  • max: Maximum amount for the product.

  • min: Minimum amount for the product.

amountPlacement

Defines the placement of the amount, options are right or left

supplier

Identifies the supplier, typically set to Bumper. This parameters also control the theme shown.

BUMPER will provide these fields fully configured; the information above is for reference only.

PreviousBest PracticeNextFAQ

Last updated 20 days ago