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

V2 VTEX ウィジェット

VTEX チェックアウトで DEUNA ウィジェット V2 接続をインストールおよび設定します。

このページで
統合方法

VTEX内でDEUNA搭載の支払い体験を設定します。

認定されたコネクタをインストールし、支払い条件を設定し、VTEXチェックアウトをDEUNAウィジェット機能で拡張します。

インターフェース
VTEXチェックアウトとDEUNAウィジェット
配送モデル
VTEXアプリとコネクタの設定
最適なケース
DEUNA支払いオーケストレーションを使用するVTEXの商取引
方法を比較するリファレンスを開く

このページは、V2 接続のインストール手順を提供します。

VTEX プラットフォームには、顧客がウェブサイトを離れることなく購入を完了できるように設計された支払いアプリシステムが搭載されています。

ただし、このソリューションは、ターゲットを絞ったプロモーションの実施や、金利ベースおよび金利なしの支払いプランなど、関連する金融オプションに関する情報提供において、いくつかの制限があります。

V2 ウィジェットを使用すると、以下のことができます。

  • 特定の条件に基づいてプロモーションを適用する
  • 融資オプションに関する情報の送信を容易にする
  • 月々の支払いに関する情報（金利あり、なし）を含む。

DEUNA ウィジェット V2 の設定#

VTEX ストアで DEUNA V2 ウィジェットを使用するには、DEUNA チームに以下の情報を提供する必要があります。

  1. VTEX API KEY
  2. VTEX APP TOKEN
  3. Nombre del titular de la cuenta de credencial

この情報により、DEUNA は V2 ウィジェットの設定に必要なものを構成できます。

1. ウィジェットスクリプトの統合#

V2 接続を使用するには、VTEX ストアのチェックアウト設定に次のスクリプトを統合する必要があります。

レガシー チェックアウト用

以下のパスでスクリプトを追加します。 Store Settings -> Storefront -> Checkout -> Code -> checkoutcustom6.js

jsJavaScript
function loadScriptWithAttributes(url, attributes, target) {
    return new Promise((resolve, reject) => {
        const script = document.createElement('script');
        script.src = url;

        if (attributes) {
            Object.keys(attributes).forEach(key => {
                script.setAttribute(key, attributes[key]);
            });
        } else {
           console.error("DEUNA: no attributes: ", attributes);
        }

        script.onload = resolve;
        script.onerror = reject;

		    const currentTarget = target ?? document.head
        if (!currentTarget) {
          console.error("DEUNA: 'currentTarget': is not defined")
 		    }
		    currentTarget.appendChild(script);        
    });
}

const baseURL = "<base_url>";
console.log("DEUNA cdn: ", baseURL);
const attributes = { 
	  env: "<environment_name>",
    publicApiKey: "<public_key>"
};
 

loadScriptWithAttributes(baseURL, attributes)
    .then(() => {
      console.log("DEUNA: loaded script Succesfully!")
    })
    .catch((err) => {
      console.error("DEUNA: Error load script cdn: ", err);
    });

をクリック Save 完了。

カスタム UI チェックアウト用

以下のパスでスクリプトを追加します。 Store Settings -> Storefront -> Checkout UI Custom -> Javascript

JavaScript
function loadScriptWithAttributes(url, attributes, target) {
    return new Promise((resolve, reject) => {
        const script = document.createElement('script');
        script.src = url;

        if (attributes) {
            Object.keys(attributes).forEach(key => {
                script.setAttribute(key, attributes[key]);
            });
        } else {
           console.error("DEUNA: no attributes: ", attributes);
        }

        script.onload = resolve;
        script.onerror = reject;

		    const currentTarget = target ?? document.head
        if (!currentTarget) {
          console.error("DEUNA: 'currentTarget': is not defined")
 		    }
		    currentTarget.appendChild(script);        
    });
}

const baseURL = "<base_url>";
console.log("DEUNA cdn: ", baseURL);
const attributes = { 
	  env: "<environment_name>",
    publicApiKey: "<public_key>"
};
 

loadScriptWithAttributes(baseURL, attributes)
    .then(() => {
      console.log("DEUNA: loaded script Succesfully!")
    })
    .catch((err) => {
      console.error("DEUNA: Error load script cdn: ", err);
    });

クリック 保存 完了。

チェックアウトのカスタマイズ/商社によるカスタマイズ

以下のスクリプトに JavaScript チェックアウトファイルを追加します。

JavaScript
function loadScriptWithAttributes(url, attributes, target) {
    return new Promise((resolve, reject) => {
        const script = document.createElement('script');
        script.src = url;

        if (attributes) {
            Object.keys(attributes).forEach(key => {
                script.setAttribute(key, attributes[key]);
            });
        } else {
           console.error("DEUNA: no attributes: ", attributes);
        }

        script.onload = resolve;
        script.onerror = reject;

		    const currentTarget = target ?? document.head
        if (!currentTarget) {
          console.error("DEUNA: 'currentTarget': is not defined")
 		    }
		    currentTarget.appendChild(script);        
    });
}

const baseURL = "<base_url>";
console.log("DEUNA cdn: ", baseURL);
const attributes = { 
	  env: "<environment_name>",
    publicApiKey: "<public_key>"
};
 

loadScriptWithAttributes(baseURL, attributes)
    .then(() => {
      console.log("DEUNA: loaded script Succesfully!")
    })
    .catch((err) => {
      console.error("DEUNA: Error load script cdn: ", err);
    });

2. 変数の値を置き換える#

スクリプトをコピーした後、変数を対応する情報で置き換えます。

変数

説明

base_url

CDN URL は、環境名によって異なります。この URL を使用すると、スクリプトはウィジェットのバージョンをロードします。

サンドボックスと本番環境： https://cdn.deuna.io/snippets/v2.0.0/index.js

environment_name

ウィジェットの環境 (開発、テスト、本番)

public_key

貴社の公開鍵

3. 最初の購入#

設定後、いくつかの簡単な手順でトライアル決済を実行できます。

テスト用のカードを入手

当社のサンドボックス環境では、DEUNAがテスト用のカードをご提供します。

これらのカードを入手できます。こちら

コネクターのテスト用認証情報を取得する

コネクターのテスト用認証情報を取得するには、担当者宛にメールを送信するか、Venmoのウィジェット経由で連絡してください。 supports@deuna.com.

結果