Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add different kinds of payment buttons #160

Merged
merged 6 commits into from
May 10, 2021
Merged

Add different kinds of payment buttons #160

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
d6dc299
Move up a minor compiler version
huwr May 9, 2021
82a69e7
Add different kinds of payment buttons
huwr May 9, 2021
4a7943b
Make functions for getting the right svgs
huwr May 9, 2021
0ae159d
Add other button kinds to the readme
huwr May 10, 2021
99a64e2
Add more to the readme explaining PaymentButton
huwr May 10, 2021
6a8e6c7
Skip tokenless widget UI test
huwr May 10, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions Afterpay.xcodeproj/project.pbxproj
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@
557511BB264259C30040CC51 /* CombineWrapperTests.swift in Sources */ = {isa = PBXBuildFile; fileRef = 557511BA264259C30040CC51 /* CombineWrapperTests.swift */; };
557511BF2644CAA50040CC51 /* WKWebView+Cache.swift in Sources */ = {isa = PBXBuildFile; fileRef = 557511BE2644CAA50040CC51 /* WKWebView+Cache.swift */; };
557511C12644D0890040CC51 /* WKWebViewConfiguration+UserAgent.swift in Sources */ = {isa = PBXBuildFile; fileRef = 557511C02644D0890040CC51 /* WKWebViewConfiguration+UserAgent.swift */; };
557511C326489F090040CC51 /* SVG+Source.swift in Sources */ = {isa = PBXBuildFile; fileRef = 557511C226489F090040CC51 /* SVG+Source.swift */; };
55A2D307261BB36C00D8E23A /* Money.swift in Sources */ = {isa = PBXBuildFile; fileRef = 55A2D306261BB36C00D8E23A /* Money.swift */; };
6602EF0F25358A8000A0468C /* ColorScheme.swift in Sources */ = {isa = PBXBuildFile; fileRef = 6602EF0E25358A8000A0468C /* ColorScheme.swift */; };
6605666324E5199500DA588E /* Locales.swift in Sources */ = {isa = PBXBuildFile; fileRef = 6605666224E5199500DA588E /* Locales.swift */; };
Expand Down Expand Up @@ -89,6 +90,7 @@
557511BA264259C30040CC51 /* CombineWrapperTests.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = CombineWrapperTests.swift; sourceTree = "<group>"; };
557511BE2644CAA50040CC51 /* WKWebView+Cache.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = "WKWebView+Cache.swift"; sourceTree = "<group>"; };
557511C02644D0890040CC51 /* WKWebViewConfiguration+UserAgent.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = "WKWebViewConfiguration+UserAgent.swift"; sourceTree = "<group>"; };
557511C226489F090040CC51 /* SVG+Source.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = "SVG+Source.swift"; sourceTree = "<group>"; };
55A2D306261BB36C00D8E23A /* Money.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = Money.swift; sourceTree = "<group>"; };
6602EF0E25358A8000A0468C /* ColorScheme.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = ColorScheme.swift; sourceTree = "<group>"; };
6605666224E5199500DA588E /* Locales.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = Locales.swift; sourceTree = "<group>"; };
Expand Down Expand Up @@ -333,6 +335,7 @@
151A4FEA258C1F8A0046CEEE /* StaticContent.swift */,
66E255AD24E3C14600C81F20 /* Strings.swift */,
6615F99A24D14620005036F1 /* SVG.swift */,
557511C226489F090040CC51 /* SVG+Source.swift */,
6672982925357D80001D1C5A /* SVGConfiguration.swift */,
);
path = Resources;
Expand Down Expand Up @@ -545,6 +548,7 @@
66DAAC8B24E0CF0100127460 /* PriceBreakdown.swift in Sources */,
551BEDFC25F9C56600FDF9EE /* WidgetEvent.swift in Sources */,
661CFDB62570E7F000D8A1E8 /* PaymentButton.swift in Sources */,
557511C326489F090040CC51 /* SVG+Source.swift in Sources */,
662A3AED24A999A500EFD826 /* CheckoutResult.swift in Sources */,
551BEDF825F9B95C00FDF9EE /* WidgetView.swift in Sources */,
1522246025C925E5004B9CE5 /* Environment.swift in Sources */,
Expand Down
3 changes: 2 additions & 1 deletion Example/Example/Purchase/CartViewController.swift
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,8 @@ final class CartViewController: UIViewController, UITableViewDataSource {
tableView.register(CheckoutOptionsCell.self, forCellReuseIdentifier: checkoutOptionsCellIdentifier)
tableView.register(TitleSubtitleCell.self, forCellReuseIdentifier: titleSubtitleCellIdentifier)

let payButton: UIButton = PaymentButton()
let payButton: UIButton =
PaymentButton(colorScheme: .dynamic(lightPalette: .blackOnMint, darkPalette: .mintOnBlack), buttonKind: .checkout)
payButton.isEnabled = cart.payEnabled
payButton.accessibilityIdentifier = "payNow"
payButton.addTarget(self, action: #selector(didTapPay), for: .touchUpInside)
Expand Down
3 changes: 2 additions & 1 deletion Example/ExampleUITests/ExampleUITests.swift
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,8 @@ final class ExampleUITests: XCTestCase {
app.buttons["Yes"].tap()
}

func testTokenlessWidgetAppears() throws {
// Skipped while we come up with a better way to end to end test the bootstrap
func skip_testTokenlessWidgetAppears() throws {
app.buttons["Tokenless…"].tap()

XCTAssertTrue(app.staticTexts["Due today"].waitForExistence(timeout: 10))
Expand Down
15 changes: 14 additions & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -249,14 +249,27 @@ Below are examples of the badge in each of the color schemes:

### Payment Button

The Afterpay Payment Button is a subclass of `UIButton` that can be scaled to suit your layout, to guarantee legibility it has a maximum width constraint of 256 points.
The Afterpay `PaymentButton` is a subclass of `UIButton` that can be scaled to suit your layout, to guarantee legibility it has a maximum width constraint of 256 points.

Below are examples of the button in each of the color schemes:
| Mint and Black | Black and White |
| -- | -- |
| ![Black on Mint button][button-black-on-mint] | ![White on Black button][button-white-on-black] |
| ![Mint on Black button][button-mint-on-black] | ![Black on White button][button-black-on-white] |

There are also a few other kinds of payment available, with different wording:

* Buy Now
* Checkout
* Pay Now
* Place Order

Using a `PaymentButton` is easy. Configure it with some parameters sent to its initialiser. These parameters are optional, however.

```swift
let payButton = PaymentButton(colorScheme: .dynamic(lightPalette: .blackOnMint, darkPalette: .mintOnBlack), buttonKind: .checkout)
```

## Price Breakdown

The price breakdown component displays information about Afterpay instalments and handles a number of common scenarios.
Expand Down
20 changes: 20 additions & 0 deletions Sources/Afterpay/Resources/ColorScheme.swift
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,3 +38,23 @@ public enum ColorPalette {
case whiteOnBlack
case blackOnWhite
}

public enum ButtonKind {
case buyNow
case checkout
case payNow
case placeOrder

var accessibilityLabel: String {
switch self {
case .buyNow:
return "buy now with"
case .checkout:
return "checkout with"
case .payNow:
return "pay now with"
case .placeOrder:
return "place order with"
}
}
}
Loading