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

クリック・トゥ・ペイ

このページで

Click to Payを開始します#

このページでは、DEUNA と Click to Pay ウィジェットの統合を成功させるための包括的なガイドを提供します。

Click to Payは、効率的な決済処理とカード管理に焦点を当てています。

仕組み#

このウィジェットは、高度な決済技術と高度なセキュリティ機能を備えており、これらは EMVCoのセキュアなリモートコマースフレームワークに基づいています。.

要件#

マスターカードのClick to Payとの成功的な統合に必要な要件を以下に示します。

統合手順#

技術要件が設定されたら、統合を開始できます。

1. 統合を選択

Tiene dos opciones para Click to Pay en DEUNA.

Vaultウィジェット

Vaultウィジェットでは、Click to Payの既存カードを追加または選択できます。

このオプションは選択したカードを取得し、DEUNA APIで支払いを生成できるよう返しますが、支払い処理自体は行いません。

  • 統合方法:
  1. iOS SDK
  2. Android SDK
  3. URL経由での統合

Payment Widget

支払いウィジェットにより、ユーザーはClick to Payで既存のカードを追加または選択できます。

このオプションは選択したカードを取得して返し、支払いの生成と処理も行います。

  • 統合方法
  1. Web SDK
  2. iOS SDK
  3. Android SDK

2. Click to Payコンポーネントを設定する

次の場所からClick to Payコンポーネントを有効にします： 使用する APM の評価用の不正検知プロバイダーを選択および設定します (例: Cybersource または Riskified)。.

  1. Click to Payを次の場所に追加します： DEUNA Adminの接続.
  2. 「Click to Pay」を検索し、Mastercardビジネスアカウントの認証情報を入力します。
  3. URL統合を選択した場合：アプリ内で、DEUNAが提供するURLを使用してiframeを起動します。

URL のパラインテグレーション

sandboxPlain text
https://elements.sandbox.deuna.io/click_to_pay?publicApiKey=${apiKey}&firstName=${encodeURIComponent(firstname)}&lastName=${encodeURIComponent(lastname)}&email=${encodeURIComponent(email)}
productionPlain text
https://elements.deuna.com/click_to_pay?publicApiKey=${apiKey}&firstName=${encodeURIComponent(firstname)}&lastName=${encodeURIComponent(lastname)}&email=${encodeURIComponent(email)}

クエリパラメータの属性

属性説明
publicApiKey (必需)DEUNAの公開APIキー。
firstName (必需)ユーザーの名。
lastName (必需)ユーザーの姓。
email (オプション)ユーザーのメールアドレス。統合に送信されない場合は、Click to Payのフロー開始に必要なメールアドレスを入力する画面が表示されます。
cssFile (オプション)DEUNAが提供するUUID。カスタムCSSファイルにのみ適用されます。
userToken(オプション)DEUNAユーザーのbearer tokenです。送信すると、ウィジェット内のすべての操作がこのDEUNAユーザーとして実行されます。また、このuserTokenを送信する場合は、次の項目を送信する必要はありません： email, firstName, lastName。必要になるのは次の項目のみです： userToken和 publicApiKey
int (オプション)次の項目を送信できます： embedded または modal 統合の種類を指定し、統合に応じて特定の機能（例：戻るまたはモダルのクローズを示す矢印）を有効化するために使用します。

3. 取得 card_id

アプリケーションにコンポーネントを統合した後、次の項目を取得する必要があります： card_id 支払いを処理するために使用します。

HTML、CSS、JavaScriptを使用してURLを統合する例を次に示します：

  1. カードの保存を含むClick to Payとの通信は、DEUNAコンポーネントが処理します。
  2. 成功すると、DEUNAは次の情報を送信します： postMessage 有効な card_id.
  3. 次の card_id 支払いを処理するため、バックエンドから購入リクエストで送信されます。
HTML
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Click to Pay Integration</title>
    <style>
      /* Estilos básicos para el iframe */
      #click-to-pay-iframe {
          width: 100%;
          height: 500px; /* Ajusta la altura según tus necesidades */
          border: none;
      }
    </style>
  </head>
  <body>
    <iframe
      id="click-to-pay-iframe"
      src="https://elements.sandbox.deuna.io/click_to_pay?publicApiKey=${apiKey}&firstName=${encodeURIComponent(firstname)}&lastName=${encodeURIComponent(lastname)}&email=${encodeURIComponent(email)}"
      allow="payment"
    >
    </iframe>

    <script>
      // Escucha los mensajes de postMessage para recibir el card_id (a.k.a card token)
      window.addEventListener('message', function(event) {
          if (event.origin !== "https://elements.sandbox.deuna.io") {
              return;
          }
          let firstParsedData;
          if (typeof event.data === 'string') {
              firstParsedData = JSON.parse(event.data);
          } else {
              firstParsedData = event.data;
          }

          const parsedData = JSON.parse(firstParsedData);
          console.log('postMessage:', parsedData);

          if (
            parsedData &&
            parsedData.type === "vaultSaveSuccess"
        ) {
          // obtener el card_id (a.k.a card token)
          const cardId = parsedData.data.metadata.createdCard.id;

          // crear pago con el card_id
        }
      });
    </script>
  </body>
</html>

4. カードを処理する

DEUNAでカードが正常に処理されると、次の情報を取得できます： postMessage 次の情報を含むイベント： card_id レスポンス内にあります。

以下の card_id バックエンドで支払いを処理するために使用します。

示例事件

Javascript
window.addEventListener("message", (event) => {
  if (event.origin !== "URL_DE_CONFIANZA") { // Reemplaza con tu URL de confianza
    return;
  }

  switch (event.data.type) {
    case 'VaultStarted':
      // Click to Pay ready
      break;

    case 'VaultSaveSuccess':
      // Card saved, get the card_id
      const cardId = event.data.metadata.createdCard.id;
      // Use this card_id to process payments
      break;

    case 'VaultSaveError':
    case 'VaultFailed':
      // Error management
      const errorCode = event.data.metadata.errorCode;
      const errorMessage = event.data.metadata.errorMessage;
      break;

    case 'VaultProcessing':
      // Pago en proceso
      break;

    //Add more cases as needed
  }
});

5. 支払いを処理する

バックエンドから支払いを開始した後、次の操作が必要です： V2購入を通じて支払いを処理する.

が提供されない場合に、 order token での支払い処理を担当します。order オブジェクトは、必要なすべての情報とともに送信されます。

Click to Payに必要なフィールドのリストは次のとおりです。

フィールド説明Value
order.callback_urls.on_success購入をPayPalウォレットアカウントで承認した後にリダイレクトされるURL。https://example.com/
payment_source.method_typeDEUNAの支払い方法の種類。wallet
payment_source.processorPayPalウォレットの支払い方法識別子。paypal_wallet

例：リクエスト

JavaScript
const requestBody = {
    payer_info: {
        email: "foo@bar.com"
    },
    payment_source: {
        method_type: "credit_card",
        card_info: {
            card_id: "8d369b6e-113a-4640-9e63-dc29957fc86aza"
        }
    },
    // ... Resto del body
};

fetch('https://api.sandbox.deuna.io/v2/merchants/orders/purchase', {
    method: 'POST',
    headers: {
        'x-api-key': 'YOUR_PRIVATE_API_KEY',
        'Content-Type': 'application/json'
    },
    body: JSON.stringify(requestBody)
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));
curl --location 'https://api.sandbox.deuna.io/v2/merchants/orders/purchase' \
--header 'x-api-key: YOUR_PRIVATE_API_KEY' \
--header 'Content-Type: application/json' \
--data-raw '{
    "payer_info": {
        "email": "foo@bar.com"
    },
    "payment_source": {
        "method_type": "credit_card",
        "card_info": {
            "card_id": "8d369b6e-113a-4640-9e63-dc29957fc86aza"
        }
    },
    "order": {
        "order_id": "testapi-0003",
        "currency": "MXN",
        "items": [
          {
              "id": "216",
              "name": "10 Cellphones",
              "description": "",
              "options": "string option",
              "total_amount": {
                  "original_amount": 2000,
                  "amount": 2000,
                  "currency": "MXN",
                  "currency_symbol": "$"
              },
              "unit_price": {
                  "amount": 200,
                  "currency": "MXN",
                  "currency_symbol": "$"
              },
              "tax_amount": {
                  "amount": 0,
                  "currency": "MXN",
                  "currency_symbol": "$"
              },
              "quantity": 1,
              "uom": "string",
              "upc": "string",
              "sku": "",
              "isbn": "",
              "brand": "",
              "manufacturer": "",
              "category": "",
              "color": "",
              "size": "",
              "weight": {
                  "amount": 0,
                  "unit": "kg"
              },
              "image_url": "https://images-sandbox.getduna.com/95463fb5-6279-4ec3-8ff9-fe07aacd2142/db5b698c57654116_domicilio_216_750x750_1662162887.png?d=200x200&format=webp",
              "details_url": "",
              "type": "physcal",
              "taxable": true
          }
        ],
        "sub_total": 2000,
        "total_amount": 2000,
        "store_code": "all",
        "billing_address": {
            "address1": "presa angostura 36PH",
            "address2": "",
            "address_type": "home",
            "city": "CDMX",
            "country_code": "MX",
            "email": "foo@bar.com",
            "first_name": "efren",
            "identity_document": "162915134",
            "is_default": true,
            "last_name": "garcia",
            "phone": "+525222222222",
            "state_code": "MX",
            "state_name": "miguel hidalgo",
            "zipcode": "11500"
        }
    }
}'
PHP
$curl = curl_init();

$requestBody = json_encode(array(
    "payer_info" => array(
        "email" => "foo@bar.com"
    ),
    "payment_source" => array(
        "method_type" => "credit_card",
        "card_info" => array(
            "card_id" => "8d369b6e-113a-4640-9e63-dc29957fc86aza"
        )
    ),
    // Aquí puedes continuar añadiendo el resto del cuerpo de la solicitud
    "order" => array(
        "order_id" => "testapi-0003",
        "currency" => "MXN",
        "items" => array(
            // Aquí van los detalles de los items
        ),
        // Continúa con el resto de los detalles del pedido
    )
));

curl_setopt_array($curl, array(
  CURLOPT_URL => "https://api.sandbox.deuna.io/v2/merchants/orders/purchase",
  CURLOPT_RETURNTRANSFER => true,
  CURLOPT_ENCODING => "",
  CURLOPT_MAXREDIRS => 10,
  CURLOPT_TIMEOUT => 30,
  CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
  CURLOPT_CUSTOMREQUEST => "POST",
  CURLOPT_POSTFIELDS => $requestBody, // Aquí se utiliza la variable
  CURLOPT_HTTPHEADER => array(
    "x-api-key: YOUR_PRIVATE_API_KEY", // Asegúrate de reemplazar con tu API key real
    "Content-Type: application/json"
  ),
));


$response = curl_exec($curl);
$err = curl_error($curl);

curl_close($curl);

if ($err) {
  echo "cURL Error #:" . $err;
} else {
  echo $response;
}
Ruby
require 'uri'
require 'net/http'
require 'json'

url = URI("https://api.sandbox.deuna.io/v2/merchants/orders/purchase")

http = Net::HTTP.new(url.host, url.port)
http.use_ssl = true

request_body = {
    payer_info: {
        email: "foo@bar.com"
    },
    payment_source: {
        method_type: "credit_card",
        card_info: {
            card_id: "8d369b6e-113a-4640-9e63-dc29957fc86aza"
        }
    }
    # ... Agrega aquí el resto del cuerpo de la solicitud
}.to_json

request = Net::HTTP::Post.new(url)
request["x-api-key"] = "YOUR_PRIVATE_API_KEY" # Reemplaza con tu API key
request["Content-Type"] = "application/json"
request.body = request_body

response = http.request(request)
puts response.read_body
Java
import java.net.URI;
import java.net.http.HttpClient;
import java.net.http.HttpRequest;
import java.net.http.HttpResponse;
import org.json.JSONObject;

public class Main {
    public static void main(String[] args) {
        HttpClient client = HttpClient.newHttpClient();
        
        JSONObject requestBody = new JSONObject()
            .put("payer_info", new JSONObject().put("email", "foo@bar.com"))
            .put("payment_source", new JSONObject()
                .put("method_type", "credit_card")
                .put("card_info", new JSONObject().put("card_id", "8d369b6e-113a-4640-9e63-dc29957fc86aza")))
            // ... Agrega aquí el resto del cuerpo de la solicitud

        HttpRequest request = HttpRequest.newBuilder()
            .uri(URI.create("https://api.sandbox.deuna.io/v2/merchants/orders/purchase"))
            .header("x-api-key", "YOUR_PRIVATE_API_KEY") // Reemplaza con tu API key
            .header("Content-Type", "application/json")
            .POST(HttpRequest.BodyPublishers.ofString(requestBody.toString()))
            .build();

        client.sendAsync(request, HttpResponse.BodyHandlers.ofString())
            .thenApply(HttpResponse::body)
            .thenAccept(System.out::println)
            .join();
    }
}

購入例

これはDEUNAにおけるClick to Payによる購入の例です。

CSSコンポーネントのカスタマイズ

ウィジェットの外観はCSSで編集できます。

6. 統合を試してください

以下の Click to Payのテストカード DEUNAとの統合をテストするために使用します。

このセクションで

Click to Pay のケース管理