メインコンテンツへスキップ
すべてのシステムが正常に動作しています変更履歴v1
ログイン

Apple Pay を Direct API を通じて

このページで

このガイドでは、DEUNAのAPIとのApple Payの直接統合の方法について説明します。直接統合により、支払いフローを完全に制御でき、カスタム実装が必要な場合や既存の決済システムを使用している場合に最適です。この統合は、一度限りの支払いのみをサポートします。

DEUNAとのApple Pay#

DEUNAでのApple Payによる決済の標準的なプロセスは以下のとおりです。

  1. 支払い方法を取得
  2. Apple Pay Web SDKを初期化
  3. Apple Pay による購入

1. 支払い方法の取得#

Apple Pay のクレデンシャル ID と SDK 設定パラメータを取得します。

→ Get Payment Methods APIを参照

応答

JSON
{
  "data": [
    {
      "allow_installments_plan": true,
      "credentials": {
        "external_merchant_id": "merchant.test.io.deuna.pay"
      },
      "enabled": true,
      "extra_params": {
        "allowed_auth_methods": [
          "supports3DS"
        ],
        "allowed_card_networks": [
          "visa",
          "masterCard",
          "amex"
        ],
        "merchant_name": "Test DEUNA"
      },
      "id": "ef2319fe-f88d-4d8d-b4d1-e4fa08f18651",
      "method_type": "card_wallet",
      "payment_provider": "apple_pay",
      "processor_name": "apple_pay"
    }
  ]

2. Apple Pay Web SDK の初期化#

詳細は、 Apple Pay Web SDK のドキュメントを参照してください。 完全な参照のために。

Apple Pay JS SDK のインポート

以下のスクリプトをページに追加します：

HTML
<script src="https://applepay.cdn-apple.com/jsapi/1.latest/apple-pay-sdk.js" crossorigin=""></script>
HTML
<script src="https://applepay.cdn-apple.com/jsapi/1.latest/apple-pay-sdk.js" crossorigin=""></script>

完全な統合例

JavaScript
// 1. Check availability
if (!window.ApplePaySession || !ApplePaySession.canMakePayments()) {
  // Apple Pay not available — hide the button or show a fallback
}

// 2. Initialize the session on button click (must be inside a user gesture)
// Use the values returned by the Get Payment Methods endpoint
const request = {
  countryCode: 'MX',
  currencyCode: 'MXN',
  supportedNetworks: ['visa', 'masterCard', 'amex', 'discover'], // from extra_params.allowed_card_networks
  merchantCapabilities: ['supports3DS'],                          // from extra_params.allowed_auth_methods
  total: { label: 'Your Store Name', amount: '1.00', type: 'final' },
};

const session = new ApplePaySession(3, request);

// 3. Validate the merchant
// The credential-id comes from the `id` field in the Get Payment Methods response
session.onvalidatemerchant = async (event) => {
  const response = await fetch(
    'https://api.{env}.deuna.io/wallet/credentials/{credential-id}/payment-session',
    {
      method: 'POST',
      headers: {
        'X-Merchant-Id': '{merchant-id}',
        'X-Store-Code': '{store-code}',
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        validation_url: event.validationURL,
        domain: '{your-domain}',
      }),
    }
  );

  const { data } = await response.json();
  session.completeMerchantValidation(data);
};

// 4. Handle payment authorization
// Once the customer authorizes the payment, send the token to DEUNA
// Use applePayToken in step 3 — Create Card or Purchase V2
session.onpaymentauthorized = (event) => {
  const applePayToken = event.payment;

  session.completePayment(ApplePaySession.STATUS_SUCCESS);
};

session.begin();

3. Apple Pay による購入#

顧客が Apple デバイスで支払いを確認すると、 onpaymentauthorized イベントが発火し、暗号化されたカードトークンを event.paymentを通じて送信します。このトークンは、変更なしで DEUNA に送信する必要があります。

3.1 カードの作成

トークンは、 event.payment は、Create Cardエンドポイントに送信され、 card_id で生成され、購入に使用できます。

→ Create Card API の参照を参照

JSON
{
  "apple_pay": {
    "paymentData": {
      "token": {
        "transactionIdentifier": "7a94479858348...",
        "paymentMethod": {
          "type": "debit",
          "displayName": "Visa 7553",
          "network": "Visa"
        },
        "paymentData": {
          "data": "EOeLQTsv8X7f...",
          "header": {
            "publicKeyHash": "MpXcCgm...",
            "ephemeralPublicKey": "MFkwEwYH...",
            "transactionId": "7a94479858348..."
          },
          "version": "EC_v1"
        }
      }
    }
  },
  "credential_source": "apple_pay"
}

3.2 Purchase with Card ID

このオプションは、Create Card を使用してカードがトークン化されている場合に利用します。これは、Create Card エンドポイントから返される card_id を使用した標準的な Purchase V2 リクエストです。Apple Pay トークンは不要です。

→ Purchase V2 API の参照を参照

JSON
{
  "order_token": "{order-token}",
  "order_type": "DEUNA_CHECKOUT",
  "payer_info": {
    "email": "customer@example.com",
    "card_holder_dni": "12345678"
  },
  "payment_source": {
    "method_type": "credit_card",
    "card_info": {
      "card_id": "{deuna-card-id}"
    }
  }
}

3.3 ダイレクト購入

これは、カードがトークン化されていない場合に利用します。トークンは event.payment 情報は購入リクエストに直接送信されます。

→ Purchase V2 API の参照を参照

JSON
{
    "order_token": "{{order-token}}",
    "order_type": "DEUNA_CHECKOUT",
    "payer_info": {
        "email": "{{random_user}}@testuser.com",
        "card_holder_dni": "12345678"
    },
    "payment_source": {
        "method_type": "credit_card",
        "card_info": {
            "credential_source": "apple_pay",
            "credential_source_config": {
                "type": "apple_pay",
                "values": {
                    "system": "EC_v1",
                    "merchant_transaction_id": "6bfbf33f787b7932d5d0....",
                    "encrypted_data": "Fk11fwjWL3uFZlBwAw83G0xRt8....",
                    "encryption_header": {
                        "signature": "MIAGCSqGSIb3DQEHAqCAMIACAQEx...",
                        "public_key_hash": "EB8/SypLvJCISa2d4sQzV/Zw...",
                        "ephemeral_public_key": "MFkwEwYHKoZIzj0CAQYIKoZIzj..."
                    }
                }
            }
        }
    },
    "anti_fraud_info": {
        "device": {
            "id": "eyJPUEVOUEFZIjoiIiwiTUVSQ0FET1BBzAzLTk2NjRkYzE3MWQzYiJ9..."
        }
    }
}

応答

JSON
{
  "order_type": "DEUNA_CHECKOUT",
  "order_token": "4598f493-de86-4fe0-b9fd-c4c6c9847e39",
  "order": {
    "order_id": "DEUNA_CHECKOUT_b6a5c0b6-3df9-4b3b-b778-7086c190062b",
    "currency": "MXN",
    "total_amount": 10000,
    "display_total_amount": "MXN 100,00",
    "status": "succeeded",
    "payment": {
      "data": {
        "status": "processed"
      }
    }
  }
}