Developer docs
/
Rebilly Instruments
/
Examples
/
Add a consent check
Last updated
These docs are intended for a developer audience.Dismiss

These docs are intended for a developer audience.

Add a consent check

This topic describes how to add a consent check to a payment form using the Rebilly Instruments JavaScript library.

Important

This topic assumes that you have already completed one of the Get started guides, and are looking to customize or extend the functionality.

Image of the rendered consent check with two check boxes. The first one has multiple lines and displays dynamic data, the second on is shorter with two external links.

Consent checks can be displayed at the bottom of the payment instrument form or at the bottom of the confirmation step. All consent checks are required for the customer to proceed.

Control where the check is displayed

To display the consent check, you must include the feature flag where it will be displayed, along with the internationalization (i18n) markdown the consent check will display.

Feature flag

To display a consent check, you must include the showConsentCheck feature flag. This configuration is an array of strings.

Select from the following display options:

  • To display the consent check at the bottom of the payment instrument form, provide the form attribute.
  • To display the consent check at the bottom of the confirmation step, provide the confirmation attribute.
  • To display the consent check at the bottom of the confirmation step, provide form and confirmation attributes.

Example: Enabled feature

import RebillyInstruments from '@rebilly/instruments';

RebillyInstruments.mount({
  features: {
    showConsentCheck: ['form', 'confirmation'],
  },
});

Internationalization (i18n)

You must provide translations for all the languages you want to support in the consent check. At least one property must be provided in i18n[locale].concentCheck. Additional properties render as multiple checks.

Example: English consent check

import RebillyInstruments from '@rebilly/instruments';

RebillyInstruments.mount({
  i18n: {
    en: {
      consentCheck: {
        agreeToTOS: 'I agree to the Terms of Service and the Privacy Policy',
      },
    },
  },
  features: {
    showConsentCheck: ['confirmation'],
  },
});

Rich formatting

This section describes how to format the consent check using markdown and interpolation.

Use standard markdown notation to display a link.

Example: Adding an external link

import RebillyInstruments from '@rebilly/instruments';

RebillyInstruments.mount({
  i18n: {
    en: {
      consentCheck: {
        agreeToTOS: 'I agree to the [terms of service](https://www.example.com/tos) and the [privacy policy](https://www.example.com/privacy)',
      },
    },
  },
  features: {
    showConsentCheck: ['confirmation'],
  },
});

Multiline

Use string literals to add multiple lines or provide multiple keys for separated checks.

Example: One check while multiple lines

import RebillyInstruments from '@rebilly/instruments';

const agreeToTOS = `
I agree to subscribe. I acknowledge that I will be charged a recurring fee. I understand that I can cancel my subscription at any time before the next billing cycle to avoid future charges.

By subscribing, I have read and understood the [terms of service](https://www.example.com/tos) and [Privacy Policy](https://www.example.com/privacy).
`;

RebillyInstruments.mount({
  i18n: {
    en: {
      consentCheck: {
        agreeToTOS,
      },
    },
  },
  features: {
    showConsentCheck: ['confirmation'],
  },
});

Example: Multiple checks on seperate lines

import RebillyInstruments from '@rebilly/instruments';

const consentToSubscription = 'I agree to subscribe. I acknowledge that I will be charged a recurring fee. I understand that I can cancel my subscription at any time before the next billing cycle to avoid future charges.';

const agreeToTOS = 'By subscribing, I have read and understood the [terms of service](https://www.example.com/tos) and [Privacy Policy](https://www.example.com/privacy).';

RebillyInstruments.mount({
  i18n: {
    en: {
      consentCheck: {
        consentToSubscription,
        agreeToTOS,
      },
    },
  },
  features: {
    showConsentCheck: ['confirmation'],
  },
});

Interpolation

Use interpolation to provide dynamic data from the Rebilly API. The available data is dependent on which purchase data is provided. To display the data, use standard JavaScript dot notation between curly braces. Example: {someObject.notation}.

  • If you provide a customer authentication JWT, the customer's details will be under account. Example: {account.address.firstName}, see all data available from the API StorefrontGetAccount.

  • If you provide an invoice ID, the invoice details will be under invoice. Example: {invoice.createdTime}, see all data available from the API StorefrontGetInvoice.

  • If you provide a transaction ID, the transaction details will be under transaction. Example: {transaction.type}, see all data available from the API StorefrontGetTransaction.

  • The website details will be under website. Example: {website.name}, see all data available form the API StorefrontGetWebsite.

  • The amount and currency of the purchase will be under amountAndCurrency. Example: {amountAndCurrency.amount}, amount and currency are the only data available.

Example: Adding API data

import RebillyInstruments from '@rebilly/instruments';

const consentToSubscription = `I {account.address.fristName} {account.address.lastName} agree to subscribe to {invoice.items[0].description}.`;

const agreeToTOS = 'By subscribing, I have read and understood the [terms of service](https://www.example.com/tos) and [Privacy Policy](https://www.example.com/privacy).';

RebillyInstruments.mount({
  jwt: 'jwt-here',
  invoiceId: 'invoice-id-here',
  i18n: {
    en: {
      consentCheck: {
        consentToSubscription,
        agreeToTOS,
      },
    },
  },
  features: {
    showConsentCheck: ['confirmation'],
  },
});

Formatting

This section describe formatting functions that help make the displayed data easier to read. Provide the function in between two percent signs. Example: %currency()%.

currency

Syntax

%currency(amount, currency)%

Parameters

  • amount any number as a string. Example '4.99'.
  • currency any three letter currency code as defined by ISO 4217.

Example

%currency('4.99', 'GBP')%

Result: £4.99

date

Syntax

%date(date, format)%

Parameters

Example

%date('December 17, 1995 03:24:00', 'EEEE MMM do, QQQ YYYY')%

Result: Sunday Dec 17th, Q4 1995

Combining formatting and interpolation

To provide interpolation data, use the same interpolation syntax but within the formatting function arugments.

Invoice created %date({invoice.createdTime}, 'EEEE MMM do YYYY')% for %currency({invoice.amount}, {invoice.currency})%

Result: Invoice created Friday Sept 6th 2024 for $99.99

Example

Example of using both formatting and interpolation.

import RebillyInstruments from '@rebilly/instruments';

const consentToSubscription = `I {account.address.fristName} {account.address.lastName} agree to subscribe to {invoice.items[0].description}.

I acknowledge that my next auto payment will be on %date({invoice.autopayScheduledTime}, 'EEEE MMM do YYYY')%. 

I understand that I can cancel my subscription at any time before that  time to avoid future charges.`;

const agreeToTOS = 'By subscribing, I have read and understood the [Terms of Service](https://www.example.com/tos) and [Privacy Policy](https://www.example.com/privacy).';

RebillyInstruments.mount({
  jwt: 'jwt-here',
  invoiceId: 'invoice-id-here',
  i18n: {
    en: {
      consentCheck: {
        consentToSubscription,
        agreeToTOS,
      },
    },
  },
  features: {
    showConsentCheck: ['confirmation'],
  },
});
Previous page
Next page