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.

Option	Scope
publishableKey	All payment methods.
organizationId	All payment methods.
websiteId	Payment card, PayPal, Plaid, Apple Pay, Google Pay™, Klarna.
locale	All payment methods.
methods	Payment card, PayPal, Plaid, Apple Pay, Google Pay™, Klarna.
transactionData	Payment card, PayPal, Plaid, Apple Pay, Google Pay™, Klarna.
icon	Payment card and bank account payment methods.
display	Payment card and bank account payment methods.
color	Payment card and bank account payment methods.
placeholders	Payment card and bank account payment methods.
i18n	Payment card.
paypal	PayPal.
applePay	Apple Pay.
googlePay	Google Pay™.
kountAccountId	BlueSnap payment gateways.
style	Payment card and bank account payment methods.
classes	Payment 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.

Required	True
Updatable	False
Type	String

    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.

Required	False
Updatable	False
Type	String

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'.

Required	False
Updatable	False
Type	String

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.

Required	False
Updatable	True
Type	String

(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.

Required	False
Updatable	True
Type	Array \| 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
`currency`	`string`	`auto` methods, PayPal, Plaid, Apple Pay, Google Pay™, Klarna
`amount`	`number`	`auto` methods, PayPal, Plaid, Apple Pay, Google Pay™, Klarna
`label`	`string`	Apple Pay, Google Pay™
`requestShipping`	`boolean`	Optional, works with Apple Pay, Google Pay™
`shippingOptions`	`object`	Apple 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.

Required	False
Updatable	True
Type	Object

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.

Required	False
Updatable	True
Type	Boolean
Default value	`true` (render icon)
Supported values	`true`, `false`

(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.

Required	False
Updatable	True
Type	String
Default value	`"#A1B2C1"`
Supported values	String colors in formats like: `"red"`, `"#A1B2C1"`, `"rgb(0,0,0)"`, `"rgba(0,0,0,0.5)"`.

Payment card example

(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

(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.

Required	False
Updatable	True
Type	Object

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:

(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:

(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:

(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 press Update locale to en-US, the English card.expiration placeholder will not be customized. If you press 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.

Updatable	False
Required	False
Type	Object

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.

(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.

(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)

Updatable	False
Required	False
Type	String
Default value	`"text"`
Supported values	`"text"`, `"dropdown"`

Expiration dropdown in `combined` mode

(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

(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)

Updatable	True
Required	False
Type	String
Default value	`"text"`
Supported values	`"text"`, `"password"`

(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.

Required	False
Updatable	True
Type	Object

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:

(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.

Required	False
Type	Object

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
`base`	The class shared by all the element containers. This is considered the default state. Default value: `rebilly-framepay`
`focus`	The class applied when an element is focused after a user interaction. Default value: `rebilly-framepay-focus`
`valid`	The class applied when an element becomes valid through validation. Default value: `rebilly-framepay-valid`
`invalid`	The class applied when an element becomes invalid through validation. Default value: `rebilly-framepay-invalid`
`webkitAutofill`	The class applied when an element value is autofill by the browser (Only in Chrome and Safari). Default value: `rebilly-framepay-webkit-autofill`
`buttons`	The class applied to the element container for buttons. Only applicable to the bank `account type` field. Default value: `rebilly-framepay-buttons`
`secondary`	The class applied to the element container for additional elements, like hidden dropdowns, see card expiration dropdown. Default value: `rebilly-framepay-secondary`
`dropdown`	The `secondary` element type `dropdown`, the element will have 2 classes `secondary` and `dropdown`, see card expiration dropdown. Default value: `rebilly-framepay-dropdown`
`group`	The class applied to the parent node which contains 2 and more rebilly elements, see card expiration dropdown. Default value: `rebilly-framepay-group`

Example:

(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.

Required	False
Updatable	True
Type	Object

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.

Required	False
Updatable	True
Type	Object

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',
    }
});

samsungPay

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

Required	False
Updatable	True
Type	Object

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',
            }
        ]
    },
    samsungPay: {
        buttonColor: 'white',
    }
});

googlePay

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

Required	False
Updatable	True
Type	Object

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',
    },
}

Our Solutions

Products

Features

FramePay configuration reference

publishableKey

organizationId

websiteId

locale

methods

Automatic payment method details

Manual payment method details

transactionData

Icon

Display

Color

Payment card example

IBAN element example

placeholders

payment card placeholders

custom expiration placeholder

Bank account placeholders

Placeholders and locale

i18n

Validations i18n

Payment card in combined mode

Payment card in separated mode

expiration

Expiration dropdown in combined mode

Expiration dropdown in separated mode

cvv

style

Common States

Buttons

classes

paypal

applePay

samsungPay

googlePay

Google Pay™ brand guidelines

kountAccountId

Configuration structure example

Was this helpful?

Expiration dropdown in `combined` mode

Expiration dropdown in `separated` mode