Last updated

FramePay configuration reference

This topic describes the reference along with the complete list of properties that are supported in the configuration object.

To initialize or update FramePay, use the configuration object to call Framepay.initialize(configuration) or Framepay.update(configuration).

A configuration property is updatable when it can be updated after FramePay is initialized using Framepay.update().

For an overview of all configuration options, go to the example at the end of this page.

OptionScope
publishableKeyAll payment methods.
organizationIdAll payment methods.
websiteIdPayment card, PayPal, Plaid, Apple Pay, Google Pay™, Klarna.
localeAll payment methods.
methodsPayment card, PayPal, Plaid, Apple Pay, Google Pay™, Klarna.
transactionDataPayment card, PayPal, Plaid, Apple Pay, Google Pay™, Klarna.
iconPayment card and bank account payment methods.
displayPayment card and bank account payment methods.
colorPayment card and bank account payment methods.
placeholdersPayment card and bank account payment methods.
i18nPayment card.
paypalPayPal.
applePayApple Pay.
googlePayGoogle Pay™.
kountAccountIdBlueSnap payment gateways.
stylePayment card and bank account payment methods.
classesPayment card and bank account payment methods.

publishableKey

This property is required to authenticate your API requests from FramePay. To create a new Rebilly publishable API key, go to Create API key.

RequiredTrue
UpdatableFalse
TypeString
    Framepay.initialize({
        publishableKey: 'pk_sandbox_Lvl5rm8lLrtAV6iSL3CIdYLAburumF4Ld8b1KDs',
    });
    Framepay.on('ready', () => {
        const card = Framepay.card.mount('#mounting-point');
    });

organizationId

Use this property to specify the organization identifier to be used in API requests. If not specified, the default organization will be used.

RequiredFalse
UpdatableFalse
TypeString
Framepay.initialize({
  publishableKey: 'pk_sandbox_Lvl5rm8lLrtAV6iSL3CIdYLAburumF4Ld8b1KDs',
  organizationId: 'your-company-organization-id',
});
Framepay.on('ready', () => {
    const card = Framepay.card.mount('#mounting-point');
});

websiteId

Use this property to specify the website identifier used for Ready To Pay API requests. Required if using automatic method configuration with methods: 'auto'.

RequiredFalse
UpdatableFalse
TypeString
Framepay.initialize({
  publishableKey: 'pk_sandbox_Lvl5rm8lLrtAV6iSL3CIdYLAburumF4Ld8b1KDs',
  organizationId: 'your-company-organization-id',
  websiteId: 'your-rebilly-website-id',
  transactionData: {
    currency: 'USD',
    amount: 10,
  },
});
Framepay.on('ready', () => {
    const card = Framepay.paypal.mount('#mounting-point');
});

locale

Use this property to specify the language used in the elements and messages that FramePay injects in your checkout form. This option accepts strings in the RFC-5646 format.

If you do not provide any value, FramePay will try to detect and use the client's locale. If that not possible, it will use en-US locale as the default fallback value.

RequiredFalse
UpdatableTrue
TypeString
  1. JavaScript
  2. HTML
  3. CSS
(function () {
  Framepay.initialize({
    publishableKey: 'pk_sandbox_Lvl5rm8lLrtAV6iSL3CIdYLAburumF4Ld8b1KDs',
    locale: 'es-ES',
  });
  Framepay.on('ready', () => {
    var card = Framepay.card.mount('#mounting-point');
  });
})();

methods

This property is applicable for: payment card, PayPal, Plaid, Apple Pay, Google Pay™, and Klarna. Support for other payment methods is not yet added.

RequiredFalse
UpdatableTrue
TypeArray | string
Default value'auto'
Supported values'auto' OR an array of payment methods matching the structure returned by ReadyToPay.

Automatic payment method details

When methods is auto (default) FramePay uses information from the Ready To Pay API operation to automatically configure your payment methods.

websiteId and transactionData are required when using automatically configured payment methods.

Example:

Framepay.initialize({
  publishableKey: 'pk_sandbox_Lvl5rm8lLrtAV6iSL3CIdYLAburumF4Ld8b1KDs',
  organizationId: 'your-company-organization-id',
  websiteId: 'your-rebilly-website-id',
  transactionData: {
    currency: 'USD',
    amount: 10,
  },
});

Manual payment method details

To configure payment method details manually, pass an array of payment method objects matching the structure returned by ReadyToPay.

Example:

Framepay.initialize({
  publishableKey: 'pk_sandbox_Lvl5rm8lLrtAV6iSL3CIdYLAburumF4Ld8b1KDs',
  organizationId: 'your-company-organization-id',
  transactionData: {
      currency: 'USD',
  },
  methods: [
    {
      method: 'paypal',
      feature: {
        billingAgreementToken: 'BA-1234',
        paypalMerchantId: 'ABCDEF',
      },
    },
  ]
});

transactionData

This property is required when methods: 'auto'.

This property contains information about the transaction which is required to mount payment methods. The required properties change based on automatic or manual payment methods configuration and the payment method type.

Property Type Required for
currencystringauto methods, PayPal, Plaid, Apple Pay, Google Pay™, Klarna
amountnumberauto methods, PayPal, Plaid, Apple Pay, Google Pay™, Klarna
labelstringApple Pay, Google Pay™
requestShippingbooleanOptional, works with Apple Pay, Google Pay™
shippingOptionsobjectApple Pay, Google Pay™
lineItems{ label: string, amount: number|string, }[],Optional, works with Apple Pay, Google Pay™

Example:

// Automatically configuring payment methods
Framepay.initialize({
  publishableKey: 'pk_sandbox_Lvl5rm8lLrtAV6iSL3CIdYLAburumF4Ld8b1KDs',
  organizationId: 'your-company-organization-id',
  websiteId: 'your-rebilly-website-id',
  transactionData: {
    currency: 'USD',
    amount: 10,
    requestShipping: true,
    shippingOptions: {
        defaultSelectedOptionId: 'free-shipping',
        options: [
            {
                id: 'free-shipping',
                label: 'Free shipping',
                description: 'Arrives in 5 to 7 days',
                amount: 0,
            },
            {
                id: 'express-shipping',
                label: 'Express shipping',
                description: 'Arrives in 1 to 2 days',
                amount: 5,
            },
        ]
    },
    lineItems: [
        {
            label: 'Shipping',
            amount: '0.00',
        },
        {
            label: 'Coupon',
            amount: '-2.00',
        },
        {
            label: 'Tax',
            amount: '10.99',
        }
    ]
  },
});

// Manually configuring payment methods
Framepay.initialize({
  publishableKey: 'pk_sandbox_Lvl5rm8lLrtAV6iSL3CIdYLAburumF4Ld8b1KDs',
  organizationId: 'your-company-organization-id',
  websiteId: 'your-rebilly-website-id',
  methods: [
    {
      method: 'paypal',
      feature: {
        billingAgreementToken: 'BA-1234',
        paypalMerchantId: 'ABCDEF',
      },
    },
  ]
  transactionData: {
    // Currency is always required for PayPal
    currency: 'USD',
  },
});

Icon

Use this object to control the color and visibility of the icon in the payment card and bank account elements.

RequiredFalse
UpdatableTrue
TypeObject

Warning: The card icon is hidden in the combined card mode on mobile devices.

Framepay.initialize({
    icon: {
        display: true,
        color: '#000000'
    }
})

Display

Use this property to control the visibility of the icon in the payment card and bank account fields.

RequiredFalse
UpdatableTrue
TypeBoolean
Default valuetrue (render icon)
Supported valuestrue, false
  1. JavaScript
  2. HTML
  3. CSS
(function () {
  Framepay.initialize({
    publishableKey: 'pk_sandbox_Lvl5rm8lLrtAV6iSL3CIdYLAburumF4Ld8b1KDs',
    icon: {
      display: false,
    },
  });
  Framepay.on('ready', () => {
    var card = Framepay.card.mount('#mounting-point');
  });
})();

Color

Use this property to control the color of the icon in the payment card and bank account fields.

RequiredFalse
UpdatableTrue
TypeString
Default value"#A1B2C1"
Supported valuesString colors in formats like: "red", "#A1B2C1", "rgb(0,0,0)", "rgba(0,0,0,0.5)".

Payment card example

  1. JavaScript
  2. HTML
  3. CSS
(function () {
  Framepay.initialize({
    publishableKey: 'pk_sandbox_Lvl5rm8lLrtAV6iSL3CIdYLAburumF4Ld8b1KDs',
    icon: {
        color: 'rgba(0,0,0,0.1)',
      },
    });
    Framepay.on('ready', () => {
      var card = Framepay.card.mount('#mount-point');
    });
})();

IBAN element example

  1. JavaScript
  2. HTML
  3. CSS
(function () {
  Framepay.initialize({
    publishableKey: 'pk_sandbox_Lvl5rm8lLrtAV6iSL3CIdYLAburumF4Ld8b1KDs',
    icon: {
      // Supported names like 'red', rgb, hex
      color: 'rgb(200,197,31)',
    },
  });
  Framepay.on('ready', () => {
    var iban = Framepay.iban.mount('#mount-point');
  });
})();

placeholders

Use this property to customize the input placeholders that FramePay injects into your checkout form.

RequiredFalse
UpdatableTrue
TypeObject

payment card placeholders

You can specify placeholders for each 3 different payment card inputs.

placeholders is an object with this default format:

placeholders: {
  card: {
    number: 'string',
    expiration: 'string',
    cvv: 'string',
  },
},

Example:

  1. JavaScript
  2. HTML
  3. CSS
(function () {
  Framepay.initialize({
    publishableKey: 'pk_sandbox_Lvl5rm8lLrtAV6iSL3CIdYLAburumF4Ld8b1KDs',
    placeholders: {
      card: {
        number: 'Number',
        expiration: 'Exp',
        cvv: '***',
      },
    },
  });
  Framepay.on('ready', () => {
    var card = Framepay.card.mount('#mount-point');
  });
})();

custom expiration placeholder

Instead of using the default expiration placeholder:

placeholders: {
  card: {
    ...
    expiration: 'string',
    ...
  },
},

You can split the expiration placeholder in 3 strings.

Example:

Framepay.initialize({
  publishableKey: 'pk_sandbox_Lvl5rm8lLrtAV6iSL3CIdYLAburumF4Ld8b1KDs',
  placeholders: {
    card: {
      expirationSeparator: '-',
      expirationMonth: 'M.',
      expirationYear: 'Y.',
    },
  },
});

Bank account placeholders

You can define placeholders for each of the 5 different BBAN or IBAN inputs.

placeholders is an object with this default format:

placeholders: {
  bban: {
    bicPlaceholder: 'string',
    bankNamePlaceholder: 'string',
    accountNumber: 'string',
    routingNumber: 'string',
    type: {
      savings: 'string',
      checking: 'string',
      other: 'string'
    }
  },
},

Example with IBAN:

  1. JavaScript
  2. HTML
  3. CSS
(function () {
Framepay.initialize({
  publishableKey: 'pk_sandbox_Lvl5rm8lLrtAV6iSL3CIdYLAburumF4Ld8b1KDs',
  placeholders: {
    bban: {
      bicPlaceholder:'BIC ****',
      bankNamePlaceholder:'Bank Name ****',
      accountNumber: 'Account Number ****',
      routingNumber: 'Routing Number ****',
      type: {
        savings: 'Type 1 Savings',
        checking: 'Type 2 Checking',
        other: 'Type 3 Other'
      }
    }
  }
});
Framepay.on('ready', function () {
  Framepay.bban.mount('#mount-point-bic', 'bic');
  Framepay.bban.mount('#mount-point-bank-name', 'bankName');
  Framepay.bban.mount('#mount-point-0', 'accountType');
  Framepay.bban.mount('#mount-point-1', 'accountNumber');
  Framepay.bban.mount('#mount-point-2', 'routingNumber');
});
})();

Example with BBAN:

  1. JavaScript
  2. HTML
  3. CSS
(function () {
Framepay.initialize({
  publishableKey: 'pk_sandbox_Lvl5rm8lLrtAV6iSL3CIdYLAburumF4Ld8b1KDs',
  placeholders: {
    iban: {
        accountNumber: 'IBAN NUMBER ***'
    }
  }
});
Framepay.on('ready', function () {
  var iban = Framepay.iban.mount('#mount-point');
  });
})();

Placeholders and locale

Customized placeholders only apply to the current configured locale.

For example, if the configured locale is 'es-ES', the Spanish placeholders will be overriden but, the placeholders of non-Spanish locales will not be overriden.

Example:

(function () {
  Framepay.initialize({
    publishableKey: 'pk_sandbox_Lvl5rm8lLrtAV6iSL3CIdYLAburumF4Ld8b1KDs',
    placeholders: {
      card: {
        expiration: 'CAD.'
      }
    },
    locale: 'es-ES'
  });
  Framepay.on('ready', function () {
    var card = Framepay.card.mount('#mount-point');
  });
  document.getElementById('btn-update-1').addEventListener('click', function (e) {
    Framepay.update({
      locale: 'en-US'
    });
  });
  document.getElementById('btn-restore-1').addEventListener('click', function (e) {
    Framepay.update({
      locale: 'es-ES'
    });
  });
})();

In this example, the configured locale is es-ES and the customized placeholder is card.expiration.

If you click Update locale to en-US, the English card.expiration placeholder will not be customized. If you click Update locale to es-ES, the Spanish card.expiration placeholder will be customized.

i18n

Use this configuration object to customize the displayed and returned error messages.

UpdatableFalse
RequiredFalse
TypeObject
Framepay.initialize({
  i18n: {
    // Open developer tools, check the value of `navigator.language` in the console.
    // `en` should match with `navigator.language` exactly.
    // In another word, if the value is `en-US`, then use `en-US` instead of `en`.
    en: {
      validations: {
        // Below are the default validation message, customize them yourself

        // card
        [Framepay.errorCodes.invalidCardNumber]: `Invalid card number.`,
        [Framepay.errorCodes.invalidExpirationYearInPast]: `Your card is expired.`,
        [Framepay.errorCodes.invalidExpirationYearInFuture]: `Your card's expiration is too far in the future.`,
        [Framepay.errorCodes.invalidExpirationMonth]: `Your card's expiration month is invalid.`,
        [Framepay.errorCodes.incompleteCvv]: `Invalid CVV code.`,
        [Framepay.errorCodes.invalidExpiration]: `Invalid expiration date.`,
        [Framepay.errorCodes.invalidPaymentCard]: `Invalid card information.`,

        // bban
        [Framepay.errorCodes.incompleteRoutingNumber]: `Invalid bank routing number.`,
        [Framepay.errorCodes.incompleteAccountNumber]: `Invalid bank account number.`,
        [Framepay.errorCodes.invalidBbanAccount]: `Invalid bank account information.`,
        [Framepay.errorCodes.invalidLengthRoutingNumber]: `Your bank routing number must be 5 digits long`,
        [Framepay.errorCodes.invalidLengthAccountNumber]: `Your bank account number must less than or equal to 12 digits long`,
        [Framepay.errorCodes.invalidMaxLengthAccountNumber]: `Your bank account number must not be 16 digits long`,

        // iban
        [Framepay.errorCodes.invalidIBANNumber]: `Invalid IBAN number.`,
        [Framepay.errorCodes.invalidIBANCountry]: `Your IBAN should start with a two-letter country code.`,
        [Framepay.errorCodes.unsupportedIBANCountry]: `Your IBAN country is not supported.`,
        [Framepay.errorCodes.incompleteIBANNumber]: `Your IBAN number is incomplete.`,
      }
    },
  }
});

Validations i18n

Payment card in combined mode

To see the details of the change events in the following example, open your browser's console.

  1. JavaScript
  2. HTML
  3. CSS
(function () {
  Framepay.initialize({
    publishableKey: 'pk_sandbox_Lvl5rm8lLrtAV6iSL3CIdYLAburumF4Ld8b1KDs',
    i18n: {
      en: {
        validations: {
          [Framepay.errorCodes.invalidPaymentCard]: 'Please check your Payment Card',
          [Framepay.errorCodes.invalidCardNumber]: 'Please check Card Number field',
          [Framepay.errorCodes.invalidExpiration]: 'Please check Expiration field',
          [Framepay.errorCodes.incompleteCvv]: 'Please check CVV field',
        },
      },
    },
  });
    Framepay.on('ready', () => {
      var card = Framepay.card.mount('#mount-point');

      card.on('change', (data) => {
        console.log('change event data', data);
        document.getElementById('error').innerText = data.valid ? '' : data.error.message;
      });
    });


    document.getElementById('btn-update-1')
      .addEventListener('click', () => {
        alert('Soon');
        Framepay.update({
          i18n: {
            en: undefined,
          },
        });
      });
})();

Payment card in separated mode

To see the details of the change events in the following example, open your browser's console.

  1. JavaScript
  2. HTML
  3. CSS
(function () {
  Framepay.initialize({
    publishableKey: 'pk_sandbox_Lvl5rm8lLrtAV6iSL3CIdYLAburumF4Ld8b1KDs',
    i18n: {
      en: {
        validations: {
          [Framepay.errorCodes.invalidCardNumber]: 'Please check Card Number field',
          [Framepay.errorCodes.incompleteExpiration]: 'Please check Expiration field',
          [Framepay.errorCodes.incompleteCvv]: 'Please check CVV field',
        },
      },
    },
  });

  Framepay.on('ready', () => {
    var [number, expiration, cvv] = [
      Framepay.card.mount('#mount-point-1', 'cardNumber'),
      Framepay.card.mount('#mount-point-2', 'cardExpiration'),
      Framepay.card.mount('#mount-point-3', 'cardCvv'),
    ];

    number.on('change', (data) => {
      console.log('change event data', data);
      document.getElementById('error').innerText = data.valid ? '' : data.error.message;
    });
    expiration.on('change', (data) => {
      console.log('change event data', data);
      document.getElementById('error').innerText = data.valid ? '' : data.error.message;
    });
    cvv.on('change', (data) => {
      console.log('change event data', data);
      document.getElementById('error').innerText = data.valid ? '' : data.error.message;
    });
  });

  document.getElementById('btn-update-1')
    .addEventListener('click', () => {
        alert('Soon');
        Framepay.update({i18n: {en: undefined}});
    });
})();

expiration

Use this option to customize the payment card expiration render type. The expiration field supports 2 render types.

  • text (simple input type text)
  • dropdown (styled dropdowns and native select on mobile)
UpdatableFalse
RequiredFalse
TypeString
Default value"text"
Supported values"text", "dropdown"

Expiration dropdown in combined mode

  1. JavaScript
  2. HTML
  3. CSS
(function () {
  Framepay.initialize({
    publishableKey: 'pk_sandbox_Lvl5rm8lLrtAV6iSL3CIdYLAburumF4Ld8b1KDs',
    card: {
    expiration: {
        type: 'dropdown'
    }
    }
  });
  Framepay.on('ready', function () {
    var card = Framepay.card.mount('#mount-point');
  }); // the expiration type is non-updatable property
  // document.getElementById('btn-update-1')
  //     .addEventListener('click', (e) => {
  //         Framepay.update({card: {expiration: {type: 'text'}}});
  //     });
})();

Expiration dropdown in separated mode

  1. JavaScript
  2. HTML
  3. CSS
(function () {
Framepay.initialize({
  publishableKey: 'pk_sandbox_Lvl5rm8lLrtAV6iSL3CIdYLAburumF4Ld8b1KDs',
  card: {
  expiration: {
      type: 'dropdown'
  }
  }
});
Framepay.on('ready', function () {
    Framepay.card.mount('#mount-point-1', 'cardNumber');
    Framepay.card.mount('#mount-point-2', 'cardExpiration');
    Framepay.card.mount('#mount-point-3', 'cardCvv');
}); // the expiration type is non-updatable property
// document.getElementById('btn-update-1')
//     .addEventListener('click', (e) => {
//         Framepay.update({card: {expiration: {type: 'text'}}});
//     });
})();

cvv

Use this option to customize the payment card cvv render type. The cvv field supports 2 render types.

  • "text" (simple input type text)
  • "password" (input type password)
UpdatableTrue
RequiredFalse
TypeString
Default value"text"
Supported values"text", "password"
  1. JavaScript
  2. HTML
  3. CSS
(function () {
Framepay.initialize({
  publishableKey: 'pk_sandbox_Lvl5rm8lLrtAV6iSL3CIdYLAburumF4Ld8b1KDs',
  card: {
  cvv: {
      type: 'password'
  }
  }
});
Framepay.on('ready', function () {
    var card = Framepay.card.mount('#mount-point');
});
document.getElementById('btn-update-1').addEventListener('click', function (e) {
  Framepay.update({
  card: {
    cvv: {
    type: 'text'
    }
  }
  });
});
})();

style

Use this option to override the default FramePay styles.

RequiredFalse
UpdatableTrue
TypeObject

To customize the look of the rendered elements, use these keys:

  • base: state applied to the elements regardless of validation state.
  • focus: state applied when an element has been focused by the user clicking or tabbing through the fields.
  • valid: validation state applied when the input data is correct or complete after each user interaction.
  • invalid: validation state applied when the input data is incorrect or incomplete after each user interaction.

Example:

Framepay.initialize({
    publishableKey: 'pk_sandbox_Lvl5rm8lLrtAV6iSL3CIdYLAburumF4Ld8b1KDs',
    style: {
        base: {
            color: 'blue',
            ':focus': {
                color: 'lightblue',
            },
        },
        valid: {
            color: 'green',
        },
        invalid: {
            color: 'yellow',
        },
    },
});

Additionally, for the account type element in the bank account payment method setup, you can use a nested buttons object:

  • buttons: another set of base, focus and active states to define the look of the account type buttons.

Common States

The base, focus, valid and invalid states can define these CSS properties: color, fontFamily, fontSize, fontStyle, fontVariant, fontStretch, fontWeight, fontFeatureSettings, fontKerning, webkitFontSmoothing, mozOsxFontSmoothing, letterSpacing, lineHeight, textDecoration, textShadow, textTransform, textAlign, textRendering,

The following pseudo-classes and pseudo-elements can also be styled with the above properties, as a nested object.

  • :hover
  • :focus
  • :disabled
  • :webkitAutofill (Only webkitTextFillColor and fontSize properties are available)
  • ::placeholder (Includes wordSpacing and opacity properties)
  • ::selection (Only color, background and textShadow properties are available)

Buttons

The base, focus and active button states are compatible with these CSS properties:

color, fontFamily, fontSize, fontStyle, fontVariant, fontStretch, fontWeight, fontFeatureSettings, fontKerning, webkitFontSmoothing, mozOsxFontSmoothing, background, borderColor, borderWidth, borderStyle, borderRadius, lineHeight, textTransform

The hover selector can be added for base and active states as a nested object containing the above properties.

  • :hover

Example:

  1. JavaScript
  2. HTML
  3. CSS
(function () {
  Framepay.initialize({
    publishableKey: 'pk_sandbox_Lvl5rm8lLrtAV6iSL3CIdYLAburumF4Ld8b1KDs',
    style: {
      buttons: {
        base: {
          background: 'lightblue',
          ':hover': {
              background: 'yellow',
          },
        },
        active: {
          background: 'green',
          ':hover': {
              background: 'orange',
          },
        },
      },
    },
  });
  Framepay.on('ready', () => {
    var [
        accountType,
    ] = [
        Framepay.bban.mount('#mount-point-1', 'bbanType'),
    ];
  });
})();

classes

Use this object to define custom class names for the fields that are injected into your checkout form.

RequiredFalse
TypeObject

If you modify the default classes, framepay.css will no longer apply any styles to the fields.

You can define the following properties:

Class Description
baseThe class shared by all the element containers. This is considered the default state. Default value: rebilly-framepay
focusThe class applied when an element is focused after a user interaction. Default value: rebilly-framepay-focus
validThe class applied when an element becomes valid through validation. Default value: rebilly-framepay-valid
invalidThe class applied when an element becomes invalid through validation. Default value: rebilly-framepay-invalid
webkitAutofillThe class applied when an element value is autofill by the browser (Only in Chrome and Safari). Default value: rebilly-framepay-webkit-autofill
buttonsThe class applied to the element container for buttons. Only applicable to the bank account type field. Default value: rebilly-framepay-buttons
secondaryThe class applied to the element container for additional elements, like hidden dropdowns, see card expiration dropdown. Default value: rebilly-framepay-secondary
dropdownThe secondary element type dropdown, the element will have 2 classes secondary and dropdown, see card expiration dropdown. Default value: rebilly-framepay-dropdown
groupThe class applied to the parent node which contains 2 and more rebilly elements, see card expiration dropdown. Default value: rebilly-framepay-group

Example:

  1. JavaScript
  2. HTML
  3. CSS
(function () {
  Framepay.initialize({
    publishableKey: 'pk_sandbox_Lvl5rm8lLrtAV6iSL3CIdYLAburumF4Ld8b1KDs',
    classes: {
      base: 'custom-base',
      focus: 'custom-focus',
      valid: 'custom-valid',
      invalid: 'custom-invalid',
    },
  });
  Framepay.on('ready', () => {
    var card = Framepay.card.mount('#mounting-point');
  });
})();

paypal

This property contains configuration values that change the appearance of the PayPal button. For a complete example, see Set up PayPal.

RequiredFalse
UpdatableTrue
TypeObject

For more information, see the PayPal Buttons style guide.

Framepay.initialize({
    publishableKey: 'pk_sandbox_Lvl5rm8lLrtAV6iSL3CIdYLAburumF4Ld8b1KDs',
    organizationId: 'your-company-organization-id',
    websiteId: 'your-rebilly-website-id',
    transactionData: {
        currency: 'USD',
        amount: 10,
    },
    paypal: {
        buttonColor: 'blue',
        buttonShape: 'pill',
        buttonHeight: 55,
    }
});

applePay

This property contains configuration values that change the appearance of the Apple Pay button. For a complete example, see Set up Apple Pay.

RequiredFalse
UpdatableTrue
TypeObject

For more information, see the Apple Pay on the Web Interactive Demo.

Framepay.initialize({
    publishableKey: 'pk_sandbox_Lvl5rm8lLrtAV6iSL3CIdYLAburumF4Ld8b1KDs',
    organizationId: 'your-company-organization-id',
    websiteId: 'your-rebilly-website-id',
    transactionData: {
        currency: 'USD',
        amount: 10,
        label: 'Demo purchase from docs example page.',
        lineItems: [
            {
                label: 'Subtotal',
                amount: '8.70',
            },
            {
                label: 'Tax',
                amount: '1.30',
            }
        ]
    },
    applePay: {
        buttonColor: 'white-outline',
        buttonType: 'buy',
        buttonLanguage: 'ar-AB',
    }
});

googlePay

This property contains configuration values that change the appearance of the Google Pay™ button. For a complete example, see Set up Google Pay™.

RequiredFalse
UpdatableTrue
TypeObject
Framepay.initialize({
    publishableKey: 'pk_sandbox_Lvl5rm8lLrtAV6iSL3CIdYLAburumF4Ld8b1KDs',
    organizationId: 'your-company-organization-id',
    websiteId: 'your-rebilly-website-id',
    transactionData: {
        currency: 'USD',
        amount: 10,
        label: 'Demo purchase from docs example page.',
        lineItems: [
            {
                label: 'Subtotal',
                amount: '8.70',
            },
            {
                label: 'Tax',
                amount: '1.30',
            }
        ]
    },
    googlePay: {
        buttonColor: 'black',
        buttonType: 'buy',
        buttonHeight: '48px',
        shippingAddressRequired: true,
    }
});

Google Pay™ brand guidelines

Google Pay™ provides specific guidelines on how the Google Pay™ button must be used. For the full guidelines, see Google's Brand guidelines.

As a quick reference, here are some general guidelines:

  • Use black buttons on white or light backgrounds to provide contrast.
  • Use white buttons on dark or colorful backgrounds.
  • Use the same style of button throughout your site.
  • Ensure that the size of the Google Pay™ buttons remains equal to or larger than other buttons.
  • Always maintain the minimum clear space of 8 dp on all sides of the payment button. Ensure the clear space is never broken with graphics or text.

For information on UX best practices when using Google Pay™, see UX best practices.

kountAccountId

Configures the Kount account used to generate the kountFraudSessionId, which is included in requests to BlueSnap payment gateways.

Configuration structure example

This is an example of the structure of the configuration object. To browse the full list of options, see the configuration reference.

{
    publishableKey:'',
    organizationId:'',
    locale: 'auto',
    icon: {
        display: true,
        color: null,
    },
    placeholders: {
        card: {
            number: null,
            expiration: null,
            cvv: null,
            expirationSeparator: null,
            expirationMonth: null,
            expirationYear: null,
        },
        bban: {
            bicTitle: '',
            bicPlaceholder: '',
            bankNameTitle: '',
            bankNamePlaceholder:'',
            routingNumber: null,
            accountNumber: null,
            type: {
                savings: null,
                checking: null,
                other: null,
            },
        },
        iban: {
            bicTitle:'',
            bicPlaceholder: '',
            bankNameTitle:'',
            bankNamePlaceholder:'',
            accountNumber: null
        },
    },
    i18n: {
        en: {
            validations: {
                ... // see i18n configuration details
                [Framepay.errorCodes[codeName]]: 'String value',
                ...
            }
        },
        es: {
            validations: {
                ... // see i18n configuration details
                [Framepay.errorCodes[codeName]]: 'String value',
                ...
            }
        }
    },
    card: {
        expiration: {
            type: 'text',
        },
        cvv: {
            type: 'text'
        },
        brands: {allowed: null},
    },
    style: {
        base:{
            color: null,
            fontFamily: null,
            fontFeatureSettings: null,
            fontKerning: null,
            fontSize: null,
            webkitFontSmoothing: null,
            mozOsxFontSmoothing: null,
            fontStretch: null,
            fontStyle: null,
            fontVariant: null,
            fontWeight: null,
            letterSpacing: null,
            lineHeight: null,
            textAlign: null,
            textDecoration: null,
            textRendering: null,
            textShadow: null,
            textTransform: null,
            ':focus': {/** all base styles **/ },
            ':hover': {/** all base styles **/ },
            ':disabled': {/** all base styles **/ },
            ':webkitAutofill': {/** all base styles **/ },
            '::placeholder': {/** all base styles **/ },
            '::selection': {/** all base styles **/ },
        },
        focus:{ /** all basic styles + placeholders **/},
        valid:{ /** all basic styles + placeholders **/},
        invalid:{ /** all basic styles + placeholders **/},
        buttons:{
            base: {
                background: null,
                borderColor: null,
                borderRadius: null,
                borderStyle: null,
                borderWidth: null,
                color: null,
                fontFamily: null,
                fontFeatureSettings: null,
                fontKerning: null,
                fontSize: null,
                webkitFontSmoothing: null,
                mozOsxFontSmoothing: null,
                fontStretch: null,
                fontStyle: null,
                fontVariant: null,
                fontWeight: null,
                letterSpacing: null,
                lineHeight: null,
                textAlign: null,
                textDecoration: null,
                textRendering: null,
                textShadow: null,
                textTransform: null,
                ':hover': {/** all button base styles **/ }
            }
            focus: { /** all button base styles + :hover **/ }
            active: { /** all button base styles + :hover **/ }
        },
    },
    classes: {
        base: 'rebilly-framepay',
        focus: 'rebilly-framepay-focus',
        valid: 'rebilly-framepay-valid',
        invalid: 'rebilly-framepay-invalid',
        secondary: 'rebilly-framepay-secondary',
        dropdown: 'rebilly-framepay-dropdown',
        group: 'rebilly-framepay-group',
        buttons: 'rebilly-framepay-buttons',
        webkitAutofill: 'rebilly-framepay-webkit-autofill',
    },
}