Customizing your hosted checkout integration iframe

The following sections explain how to alter the appearance of your hosted checkout interface and how to configure and customize the payment methods that customers can use.

Customizing the appearance of your iframe

You can customize your hosted checkout integration iframe to match your restaurant's style and branding. You can modify the following parameters when you initialize the SDK. For more information, see SDK functions.

• backgroundColor

• color

• fontFamily

• fontSize

• fontWeight

• iconColor

• lineHeight

• letterSpacing

• padding

• textAlign

SDK customization parameters

const checkoutForm = window.Toast(
checkoutForm.initialize(
  () => { console.log("Successful initialization callback"),
  () => { console.log("Failed initialization callback"),
  {
    merchantId: "e5421b10-cd5c-41ca-9791-0a5037e81cdc",
    oauthToken: "hosted-checkout-oauth-token",
    sessionSecret: "30b72c74-ab3d-4354-8d3e-8824bcdeecea",
    domElementId: "payment-frame",
    acceptAmex: true
  },
  {
    backgroundColor: "#63000A",
    color: "#D4AF37",
    iconColor: "#D4AF37",
    fontFamily: "Snell Roundhand, cursive",
    fontSize: "18px",
    fontWeight: 700,
    fontStyle: "italic",
    textAlign: "center",
    letterSpacing: "6px",
    padding: '9px'
  }
)

The following image shows a customized iframe on a checkout page.

Managing payment methods

You can add, view, and manage your integration’s payment methods in the Toast developer portal. The developer portal allows you to easily view and manage your API credentials, access technical documentation, and connect with the Toast integration community. For more information, see Toast developer portal.

Managing payment method configurations

The Payment method configurations section on the Payment methods page displays all your payment method configurations and their statuses. From the Payment method configurations section, you can choose to add a configuration or edit an existing configuration.

The configuration ID is the same identifier as the paymentMethodConfigurationId that you can include in the request body to create a payment intent.

Note

You can configure and apply a payment method configuration to any restaurant group or restaurant location. For example, your integration can apply the same payment method configuration across different restaurant groups and locations.

Adding a payment method configuration

In the Payment methods configurations section, you can add a new payment method configuration.

Note

Before you can enable Apple Pay® as a payment method, you need to register and verify all the domains and subdomains that you want to enable Apple Pay for. For more information, see Apple Pay transactions.

To add a new payment method configuration

1. On the Payment methods page of the Toast developer portal, navigate to the Payment method configurations section.

2. Select the + Add a configuration button. This opens the Add configuration dialog box.

3. In the Add configuration dialog box, enter a name for the new configuration and toggle on or off the following payment methods: Apple Pay®, Google Pay®, and keyed-in cards.

   You can choose to make a payment method the default that will be automatically selected for customer use in the hosted checkout iframe. To make a payment method the default, select the option under the Make default column.

4. Select the Save button.

Depending on which payment method you configure as your default, the hosted checkout iframe displays payment methods differently on initialization:

• If Google Pay is enabled and is the default payment method, the iframe automatically reorders the available payment methods to show Google Pay as the first payment method and sets it as the default.

• If Apple Pay is enabled and is the default payment method, the iframe automatically reorders the available payment methods to show Apple Pay as the first payment method and sets it as the default.

• The default payment method is keyed-in cards, unless you choose to change it to another payment method, such as Apple Pay or Google Pay. The iframe does not automatically reorder the available payment methods to show keyed-in cards as the first payment method. The keyed-in card payment method is shown last in the order of available payment methods because the payment card input fields are displayed immediately below the keyed-in card option.

Editing a payment method configuration

You can also edit an existing payment method configuration in the Payment method configurations section of the Toast developer portal. Select the arrow next to the payment method configuration to open the Edit configuration dialog box. In the dialog box, you can:

• Edit the configuration name

• Toggle payment methods on or off

Select the Update button to save your changes or select the Cancel button to close out of the dialog box.