Bolt Checkout Button

Once you’ve successfully set up the Bolt iOS SDK and payment provider, 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

The default checkout button looks something like this:

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

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

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

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

Merchants can also (optionally) pass in hints when creating the Bolt View Controller. The Hints object will be created using the builder pattern.

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! You can also choose to customize the Exit Checkout experience or enable Apple Pay Please reach out to your Bolt representative if you have any questions or feedback.

# onboarding # ios # sdk

← Apple Pay

Post-Checkout Customization →

📖On This Page