連載
» 2016年10月26日 05時00分 公開

ついに日本対応開始! 開発者が知っておきたいApple Pay決済アプリの仕組みとPassKitの使い方Apple Payアプリ開発入門(1)(2/3 ページ)

[杉本裕樹,マネーフォワード]

Apple Payを使ったECアプリを作る準備

商品画面を作る

 今回は商品ページと購入ボタンがあるだけのシンプルなアプリを作成します。

 まずはプロジェクトを作成します。プロジェクトは「Single Page Application」として作成してください。

 次に商品画面に載せる画像を追加します。こちらの「flower.jpg」をAssets.xcassetsにドラッグ&ドロップで追加してください。素材はぱくたそさまの素材を使わせていただきました。

 次に商品画面を作成します。Main.storyboardに先程追加した商品画像と商品名・商品説明・価格を設置していきます。

 これで商品画面ができました。次項からは決済処理を実装していきます。

「Merchant ID」の作成

 次は「Merchant ID」を作成します。これはApple Payを使うために必要なIDで、決済処理を行う際に使います。アプリに対して1つ作ればよく、商品ごとに作る必要はありません。

 Merchant IDは「Member center」上で作成します。まずは「Member Center」にアクセスして「Certificates, Identifiers & Profiles」ページに移動してください。移動後、左メニューの「Merchant IDs」を選択して右上の「+」ボタンからMerchant IDを作成します。

 作成した後はIDをアプリにひも付けます。Xcode上の「Capabilities」を開いて、Apple PayをOnにします。OnにするとMerchant ID一覧が表示されるので、先程作成したものを選択します。もし作成したものがない場合は、リロードボタンでの更新や「+」ボタンでの追加を試してください。

PassKitで決済処理を実装する

 今度は購入ボタンを設置します。まずはApple Payの決済処理を扱うフレームワークである「PassKit」を導入します。

購入ボタンの設置

 PassKitの導入が終わったら、購入ボタンの設置処理を追加します。「ViewController.swift」を以下のように編集します。

 「PKPaymentButton」はアップルが用意している購入用のボタンです。数種類のデザインが用意されています。

import UIKit
import PassKit
 
class ViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
 
        let button = PKPaymentButton(type: .buy, style: .black)
        button.addTarget(self, action: #selector(ViewController.tapPaymentButton), for: .touchUpInside)
        button.frame.origin.y = view.frame.size.height - 100
        button.center.x = view.center.x
        view.addSubview(button)
    }
 
    func tapPaymentButton() {
        // ボタンタップ時の動作を書く
    }
}

 アプリを起動すると「Buy with Apple Pay」という購入ボタンが設置されているのが分かります。

Copyright © ITmedia, Inc. All Rights Reserved.

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。