📍 Bolt Help / Developer Resources / SDKs / iOS WebView SDK Setup / Bolt Checkout Button Bolt Checkout Button Customize your iOS checkout button. Page Contents Click to expand. Once you’ve successfully set up the Bolt iOS SDK, you can customize your webview checkout buttons, webview options, and by passing hints to pre-fill your fields with shopper/user information. Requirements To install the Bolt Checkout Button, include .withCheckoutButton() in your boltVC function as: let boltVC = Bolt() .withPublishableKey(publishableKey) .withOrderToken(orderToken) .withHints(merchantHints) // Optional. .withCheckoutButton() // Bolt Checkout button. .checkoutPanel() Customization Customize Checkout Button Styling Click to expand. The merchant can choose to add custom styling to this button. The different styles that can be customized are Title, Title Color, Background Color, Border Width, Border Color, and Corner Radius. To set custom styling to the checkout button, the merchant must make a CheckoutButtonStyle object using the builder pattern, where some or all of these fields can be custom set. let style = Bolt.CheckoutButtonStyleBuilder() .withTitle("Check This Out") .withBackgroundColor(UIColor.black.cgColor) .build() // let boltVC = Bolt() // ... // ... .withCheckoutButton(delegate: self, checkoutButtonStyle: style) .checkoutPanel() Checkout Button Order Click to expand. You must state which buttons you would like to include, in the order you would like them to appear. For instance, the following will place the Bolt Checkout button on top of the Apple Pay button. .withCheckoutButton() .withApplePayButton() You can also only include one, if you only want that button. Webview Checkout Button Options Click to expand. You can customize your webview to include multiple configuration options, including the addition of an Apple Pay button. You can find a variety of these options below. let boltVC = Bolt() .withPublishableKey(publishableKey) .withOrderToken(orderToken) .withMerchantName(merchantName) .withMerchantAppleId(merchantAppleId) .withHints(merchantHints) // Optional. .withCheckoutButton() // Bolt Checkout button. .withApplePayButton() // Only required for Apple Pay .checkoutPanel() // Must include .checkoutPanel() at the end Variable Definition publishableKey REQUIRED FIELD FOR EITHER BUTTON. Your publishable key assigned to you by Bolt. The publishable key is a long string of lower and upper case letters and numbers that consists of three sections. orderToken REQUIRED FIELD FOR EITHER BUTTON. The token created by calling /v1/merchant/orders on your backend. merchantName REQUIRED FIELD FOR APPLE PAY. The name of your merchant as it will be shown on the Apple Pay view controller. merchantAppleId REQUIRED FIELD FOR APPLE PAY. The id assigned to your merchant by Apple. merchantCheckoutWebviewDomain The URL that webview will open for Bolt Checkout. By default, this is connect.bolt.com. merchantAPIDomain The API endpoint that will be used. By default, this is api.bolt.com. merchantHints Hints that will help you populate fields in the Bolt Checkout webview. INFO Merchants can now leverage the builder pattern to configure the Bolt View Controller with the following fields. These configuration fields are used to configure the Checkout and Apple Pay buttons, which are contained within the Bolt View Controller. Passing Hints Click to expand. Merchants can also (optionally) pass in hints when creating the Bolt View Controller. The Hints object will be created using the builder pattern. INFO Hints are certain fields that merchants can provide shopper information for, which the checkout webview will use to pre-populate the corresponding fields. If the merchant already has information about the shopper prior to checkout, they can pre-populate some fields in the checkout modal. // Example Usage (all fields are optional to include) let hints = Bolt.HintsBuilder() .withPhone("416 123 1298") .withFirstName("Bob") .withLastName("Frazer") .withEmail("bob@gmail.com") .withPhone("4161231234") .withAddressLine1("1 New York Street") .withAddressLine2("Apt. #24") .withCity("New York City") .withState("NY") .withZip("12345") .build() // must end with .build() // Let boltVC = Bolt() // ... // ... .withHints(hints) .checkoutPanel() Next Steps Be sure to thoroughly test your customizations before launching to your iOS application! Please reach out to your Bolt representative if you have any questions or feedback.