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