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

CustomStylesを使用してウィジェットのUI/UXをカスタマイズ

DEUNAのウィジェットに、色、フォント、コンポーネントスタイル、およびビュー固有のオーバーライドを使用して、ブランドシステムを適用します。

このページで

CustomStyleを使用してDEUNAのソリューションをカスタマイズします。

DEUNA は、ブランドの視覚的なアイデンティティに合わせてチェックアウトを視覚的にカスタマイズできるようにします。このガイドでは、カラー、タイポグラフィ、境界線、テキスト、および特定のビューを含む、ウィジェットのスタイルを制御する JSON ファイルの設定方法について説明します。

カスタマイズの方法#

  1. カスタマイズする要素を定義します。 変更したいチェックアウトのビューまたはコンポーネント（ボタン、フィールド、注文概要、エラーメッセージなど）を特定します。
  2. JSON ファイルの設定: 適用するスタイル値を指定します。色、フォント、ボーダー半径、パディングなどを変更できます。
  3. 設定を適用します。
    • ベースウィジェットのスタイルについては、実装に関する詳細は、TPMにお問い合わせください。
    • 注文固有のスタイルについては、各注文のトークン化内にスタイルファイルを含めることができます。

一般的なカスタマイズ範囲#

以下の側面をカスタマイズできます。

  • チェックアウトの色
  • フォント
  • 入力とボタンのテキスト、高さ、および半径
  • 入力の状態ごとの入力ボーダーの色
  • 入力内のテキストのリセットを有効にする
  • 入力内のアイコンベースの検証を有効にする
  • ロゴの位置とサイズ
  • 利用規約
  • 特定のビュー（OTP、カード、感謝ページ、請求データなど）の視覚要素

グローバルスタイル#

ストア全体のスタイルをカスタマイズします。

色

以下の設定を定義できます：

  • 背景（プライマリ/セカンダリ）
  • メインテキスト
  • 支払いボタン（色、ホバー、テキスト、アクティブ）
JSON
{
  "theme": {
    "colors": {
      "primaryTextColor": "#323237",
      "backgroundSecondary": "#FFFFFF",
      "backgroundPrimary": "#FFFFFF",
      "buttonPrimaryFill": "#17171A",
      "buttonPrimaryHover": "#69696E",
      "buttonPrimaryText": "#FFFFFF",
      "buttonPrimaryActive": "#5F529E"
    }
  }
}

フォント

以下の互換性のあるフォントから選択できます。

  • Heeb

  • Hind

  • Lato

  • Montserrat

  • ムクタ

  • Nunito

  • Open Sans

  • Quicksand

  • Roboto

  • Raleway

  • San Francisco

  • Ubuntu

JSON
{
  "theme": {
    "typography": {
      "primaryFontFamily": "Lato"
    }
  }
}

例：

入力フィールドとボタンの半径

定義することができます。 border-radius ピクセル単位での入力フィールドとボタンのサイズ指定:

JSON
{
  "theme": {
    "inputs": {
      "borderRadius": "50px"
    },
    "buttons": {
      "borderRadius": "20px"
    }
  }
}

入力とボタンの高さ

入力フィールドとボタンのカスタム高さの定義が可能です。デフォルトでは高さは40pxです。

より良いユーザーエクスペリエンスのために、最小高さ30pxと最大高さ60pxを使用してください。

JSON
{
  "theme": {
    "buttons": {
      "borderRadius": "20px",
      "heigh": "50px"
    },
    "inputs": {
      "borderRadius": "90px",
      "height": "50px"
    }
  }
}

入力の状態ごとの入力ボーダーの色

入力フィールドの色を、状態に応じて個別に選択できます。

州Definitionデフォルトの色
Disabled入力がユーザーに対して有効になっていないため、ユーザーは入力欄に書き込むことができません。# B4B4B7
Enabled入力が有効になっているが、まだフォーカスされていないか、ユーザーが何も入力していない。# D9D9DB
Focusユーザーが入力または入力フィールドにフォーカスしている。# 404046
Filled入力フィールドに有効なデータが入力されている。# 8E8E92
Error入力フィールドには、検証エラーがあるか、または必要な場合に未完成である。# E11900
JavaScript
 theme: {
    colors: {
    inputBorder: '#D9D9DB', // Default state (enabled)
    inputBorderError: '#F1998E', // Error state
    inputEnhancerFill: '#1AE1D7', // Active state (focus)
    inputBorderPositive: '#66D19E', // Success state
    },
  },

入力内のテキストのリセットを有効にする

テキストフィールドにリセットボタンを配置できます。デフォルトでは、この設定は無効になっています。これにより、キーボードのバックスペースキーを押さずに、フィールド内のすべてのテキストをクリアできます。

JavaScript
 theme: {
    inputs: {
      inputMode: 'clearable' // 'validated' | 'clearable' | 'none'
    },
  },

テキスト入力フィールドでのアイコンベースの検証を有効にする

テキスト入力フィールドでアイコンベースの検証を有効にできます。デフォルトでは、この設定は無効になっています。これは、入力フィールド内の右側に配置されたアイコンで構成され、状態に応じて表示されます。

  • 入力済み: チェック ✅
  • エラー: ⚠️
JavaScript
 theme: {
    inputs: {
      inputMode: 'validated' // 'validated' | 'clearable' | 'none'
    },
  }

ロゴの利用可能な設定を参照

  • ロゴの変更
  • ロゴの位置: 中央または左
  • ロゴのサイズ変更

デフォルト: 100pxのロゴをウィジェットの左側に配置

JavaScript
{
  "HeaderPattern": {
    "overrides": {
      "Logo": {
        "props": {
          "url": "https://host.com/custom_logo.png",
          "position": "center",
          "style": {
            "min-width": "150px"
          }
        }
      }
    }
  }
}

利用規約

この設定により、画面またはフォームの末尾に表示される法的テキストとリンク（例：「続行により、お客様は当社の利用規約に同意するものとします...」）を設定できます。

JavaScript
{
  "TermsConditionsPattern": {
    // Hide terms for non authenticated users //  Muestra términos para usuarios invitados (no autenticados)
    "showForGuest": true,
    
    // Hide terms for authenticated users // Oculta términos para usuarios autenticados (ya los aceptaron al registrarse)
    "showForAuth": false,
    
    // Legal message in HTML // Mensaje legal personalizado con HTML. Sobrescribe el texto por defecto traducido.
    // If used, the inline links replace the <A> patterns // Si usas esto, los links inline reemplazan los componentes <A> del patrón
    "legalMessage": "Al continuar, aceptás nuestros <a href='https://tusitio.com/terminos-y-condiciones'>Términos y Condiciones</a> y nuestra <a href='https://tusitio.com/politica-de-privacidad'>Política de Privacidad</a>.",
    
    // Connector texts between Privacy Polcy and Terms & Conditions // Texto conector entre "Política de Privacidad" y "Términos y Condiciones"
    // Overides the default translation (t('andThe')) // Sobrescribe la traducción por defecto (t('andThe'))
    "connectorText": "y",
    
    // Hides the  [Brand] sufix // Oculta el sufijo "de [Marca]" al final del disclaimer
    "hideCompanyDisclaimer": true,
    
    // Terms PDF/page URL. Fallbac URLs are preset by default by country of merchant // URL del PDF/página de términos. Fallback: URLs por defecto según país del merchant
    "termsAndConditionsUrl": "http://static.cinepolis.com/resources/pe/documents/terminos-y-condiciones.pdf",
    
    // Privacy policy PDF/page URL. Fallbac URLs are preset by default by country of merchant // URL del PDF/página de política de privacidad. Fallback: URLs por defecto según país
    "privacyPolicyUrl": "http://static.cinepolis.com/resources/pe/documents/politica-de-privacidad.pdf",
    
    // Changes the behaviour: shows explicit acceptance checkout // CAMBIA COMPLETAMENTE EL COMPORTAMIENTO: muestra checkbox de aceptación explícita
    // Only supported by Click to Pay // Solo soportado para Click to Pay. Estado guardado en UserContext.hasAcceptedTermsAndConditions
    // For Click to Pay // Para Click to Pay, si es false, NO VAMOS A MOSTRAR NINGÚN TIPO DE TYC.
    "requiresAcceptance": true,
    
    // Click to pay terms & conditions  URL // Url para los terminos y condiciones propias de click to pay.
  },
  
  "LegalInfoPattern": {
    // Hides the "Powered by dLocal" legal footer // Oculta el logo "Powered by dLocal" del footer legal
    "hidePoweredBy": true
  },
  
  "PoweredByPattern": {
    // Customized image URL //  URL de imagen personalizada para reemplazar el logo de dLocal
    "url": "https://1000logos.net/wp-content/uploads/2021/05/Coca-Cola-logo.png",
    
    // Inline CSS styles for custom image // Estilos CSS inline para la imagen personalizada
    "imageStyle": {
      "width": "50px",
      "height": "200px"  
    },
  }
}

セクションごとのカスタマイズ#

ソリューションのセクションをカスタマイズします。

検証コード表示

ユーザーがメールで送信されたワンタイムパスワードコードを使用して、自身の身元を確認する必要がある場合に表示されます。これは認証フローの一部です。

認証ビューはオプションです。

カスタマイズ:

  • ヘッダー
  • チャネル変更ボタン（SMS/メール）
  • 「ゲストとして続行」オプション
JSON
{
  "OtpPage": {
    "translations": {
      "es": {
        "views": {
          "otp_view": {
            "title": "🇪🇸 Ingresa el código de verificación",
            "description": "🇪🇸 Para ver tus tarjetas guardadas ingresa el código enviado a ",
            "continue_as_guest": "🇪🇸 Continuar sin ingresar el código",
            "code_expiration_message": "🇪🇸 El código expira en: ",
            "error_timeout": "🇪🇸 Tiempo agotado. Solicita un nuevo código.",
            "resend_code": "🇪🇸 Reenviar código",
            "send_code_by_email": "🇪🇸 Enviar código por correo",
            "send_code_by_phone": "🇪🇸 Enviar código por SMS",
            "new_code_alert": "🇪🇸 ¡Recibiste un nuevo código!"
          }
        }
      },
      "en": { ... },
      "pt": { ... }
    }
  }
}

カード決済表示

これは、ユーザーが購入を完了するためにカードの詳細を入力するメインフォームに対応します。

カスタマイズ:

  • セクションの見出しとサブタイトル: テキストの編集または非表示
  • フィールドラベル（カード番号、名前、分割払いなど）
  • 決済ボタンのテキスト
  • UpperTag / LowerTag に関する情報（Payment Linkでは利用できません）。
  • 法的メッセージと利用規約へのリンク
JSON
{
  "PaymentMethodsPattern": {
    "translations": {
      "es": {
        "inputs": {
          "card": {
            "securityCode": {
              "label": "CVV"
            },
            "installment": {
              "label": "Cuotas",
              "pay_by": "Paga en",
              "first_pay": "Primer pago",
              "without_interest": "Sin interés ",
              "without_installments": "Sin cuotas",
              "loading": "Validando cuotas..."
            },
            "cardHolder": {
              "label": "Nombre como aparece en la tarjeta",
              "placeholder": "Ej. Juan Zapata"
            },
            "cardNumber": {
              "label": "Número de tarjeta",
              "placeholder": "0000 0000 0000 0000"
            },
            "expirationDate": {
              "label": "Fecha expiración",
              "placeholder": "MM / YY"
            }
          }
        },
        "paymentMethods": {
          "info": {
            "card": {
              "title": "tarjeta crédito o débito",
              "subtitle": "Por favor, ingresa los datos de tu tarjeta"
            }
          }
        }
      },
      "en": {...},
      "pt": {...}
    },
    "props": {
      "hideTitleForCreditCard": true
    }
  }
}

保存されたカード表示（認証済みユーザー）

認証済みユーザーが以前にカードを保存し、購入を完了するためにそれらを選択できる場合に表示されます。

以下の項目をカスタマイズできます:

  • ボタンのテキスト
  • 有効期限に関するメッセージまたは警告
  • 削除確認
JSON
{
  "UserCardPattern": {
    "translations": {
      "es": {
        "addNewCard": {
          "info": "Add a card"
        },
        "moreOptions": {
          "payWith": "Selected card"
        },
        "paymentMethods": {
          "expiredCard": "Expired card",
          "confirmDeleteMethodTitle": "Delete this card",
          "confirmDeleteMethod": "Please note that once deleted, you won't be able to restore it."
        }
      },
      "en": {...},
      "pt": {...}
    }
  }
}

完了ページ

プロセス終了時に表示される購入確認画面 (別のサイトにリダイレクトされない場合)。

以下の項目をカスタマイズできます:

  • 感謝メッセージ
  • 注文ステータス（succeeded, pending, denied)
  • Texto del botón: "Guardar recibo", "Regresar a la tienda"
JSON
{
  "ThankYouView": {
    "translations": {
      "es": {
        "thankYouPage": {
          "title": "🇪🇸 Gracias por tu compra",
          "status": {
            "succeeded": "🇪🇸 ¡Gracias por tu compra!",
            "pending": "🇪🇸 Procesando...",
            "denied": "🇪🇸 Pago rechazado"
          },
          "downloadVoucher": "🇪🇸 Descargar comprobante",
          "backToCommerce": "🇪🇸 Volver a la tienda"
        }
      },
      "en": {...},
      "pt": {...}
    },
    "overrides": {
      "Actions": {
        "props": {
          "hideDownloadAction": false,
          "hideBackToCommerceAction": false
        }
      }
    }
  }
}

例：

クーポンページ

代替決済方法（例：現金決済または銀行振込）を使用した決済のための指示画面。

以下の項目をカスタマイズできます:

  • Название, подзаголовок, описание

  • 支払い期限に関する情報

  • ボタンのテキスト

  • DEUNAブランドの表示/非表示

以下の支払いプロセッサの識別子を使用してJSONを設定してください:

  • SPEI
  • OXXO_PAY
  • OXXO_REFERENCE
  • PAYU_EFECTY
  • BAZ_REFERENCE
  • SPEI_OPENPAY
  • SPEI_OPM
  • SAFETY_PAY
  • STP_CODI
  • PIX

置き換え [PROCESSOR_NAME] を、上記の値のいずれかで、JSON設定に設定してください。

OXXOの例:

JSON
{
  "VoucherPage": {
    "[PROCESSOR_NAME]": {
      "es": {
        "overrides": {
          "Header": {
            "props": {
              "title": "🇪🇸 Comprobante de Pago PIX",
              "subtitle": "🇪🇸 Tu transacción fue procesada exitosamente"
            }
          },
          "Footer": {
            "props": {
              "downloadReference": "🇪🇸 Descargar Comprobante",
              "showPoweredByDeuna": false
            }
          }
        }
      },
      "en": { ... },
      "pt": { ... }
    },
    "[PROCESSOR_NAME]": {
      "es": { ... },
      "en": { ... },
      "pt": { ... }
    }
  }
}

ユーザー情報の表示

基本的な購入者データ（名前、メールアドレス、電話番号、身分証明書など）を要求する初期フォーム。このビューはオプションであり、Payment Link およびフルチェックアウトでのみ利用可能です。

以下のフィールドのカスタマイズを可能にします:

  • セクションタイトル
  • すべてのフィールドのラベル
JSON
{
  "UserInfoPattern": {
    "translations": {
      "es": {
    		"title": "Title custom style",
        "inputs": {
          "email": { "label": "email style" },
          "firstName": { "label": "label style" },
          "lastName": { "label": "lastName style" },
          "phone": { "label": "phone style" },
          "identityDocument": {
            "label": {
              "CO": "Cédula / Doc de identidad",
              "CL": "RUT/DNI",
              "EC": "Cédula / Doc de identidad",
              "MX": "Número de RFC",
              "BR": "Registro Geral",
              "AR": "DNI / Doc de identidad",
              "UY": "Cédula / Doc de identidad"
            }
          }
        }
      },
      "en": {...},
      "pt": {...}
    }
  }
}

請求データの表示

必要に応じて、商社または規制に従って請求データを収集するためのフォーム。これは、支払いリンク、支払いウィジェット、およびフルチェックアウトウィジェットで利用可能なオプションの表示です。

以下のものをカスタマイズできます:

  • セクションタイトル
  • すべてのフィールドのラベル
JSON
"BillingPatternX": {
    "translations": {
      "es": {
        "addBillingData": {
          "error": "Debes ingresara los datos de facturación para continuar. ✅",
          "optionalTag": "No obligatorio",
          "title": "Añadir información"
        },
        "billingSummary": {
          "dni": "Documento",
          "update": "Modificar"
        },
        "billingView": {
          "cancel": "Anula",
          "save": "Guardar cambios",
          "title": "Introduce tu información de facturación"
        },
        "billingWithSameData": {
          "title": "Usar los mismos datos de facturación"
        },
        "inputs": {
          "companyBilling": {
            "activity": {
              "label": "Giro/Actividad"
            },
            "address": {
              "label": "Domicilio fiscal"
            },
            "authorizingFirstName": {
              "label": "Nombre del responsable"
            },
            "authorizingIdentityDocument": {
              "label": "Identificación del responsable"
            },
            "authorizingLastName": {
              "label": "Apellido del responsable"
            },
            "city": {
              "label": "Localidad"
            },
            "email": {
              "label": "Correo electrónico"
            },
            "identityDocument": {
              "label": "Registro fiscal"
            },
            "label": "Entidad jurídica",
            "name": {
              "label": "Razón social"
            },
            "phone": {
              "label": "Teléfono de contacto"
            }
          },
          "errors": {
            "identityDocument": "Número de CPF o CNPJ incorrecto",
            "inputRequired": "Campo obligatorio",
            "invalidEmail": "Email inválido",
            "invalidZipcode": "Código postal incorrecto",
            "phoneInvalid": "Teléfono no válido"
          },
          "personBilling": {
            "additionalDescription": {
              "label": "Zona/Barrio"
            },
            "address1": {
              "label": "Domicilio"
            },
            "address2": {
              "label": "Piso / Depto / Torre"
            },
            "city": {
              "label1": "Localidad",
              "label2": "Municipio",
              "label3": "Localidad/Municipio"
            },
            "country": {
              "label": "Nación",
              "placeholder": "Selecciona tu nación"
            },
            "email": {
              "label": "Email"
            },
            "firstName": {
              "label": "Nombre propia"
            },
            "identityDocument": {
              "errorMessage": "Debe ser un documento de identidad válido.",
              "invalidByCountry": {
                "AR": "DNI o identificación incorrecta",
                "BR": "CPF o CNPJ inválido",
                "CL": "RUT o DNI incorrecto",
                "CO": "Cédula no válida",
                "EC": "Cédula no válida",
                "MX": "RFC incorrecto",
                "UY": "Cédula no válida"
              },
              "label": "Identificacións"
            },
            "label": "Persona física",
            "lastName": {
              "label": "Apellido familiar"
            },
            "phone": {
              "label": "Número telefónico"
            },
            "stateName": {
              "label1": "Provincia",
              "label2": "Departamento",
              "placeholder": "Elige una provincia",
              "placeholder2": "Elige un departamento"
            },
            "zipCode": {
              "lbel": "Código postal"
            }
          }
        },
        "title": "Dirección de la tarjeta"
      }

分割支払いページ

顧客が、2つのカート間で合計金額を分割できるようにします。高額な購入や、ユーザーが複数の支払い方法を使用する場合に最適です。これはVault専用の機能です。

以下のものをカスタマイズできます:

  • ヘッダーラベル
  • カードラベルフォーム
  • 「Amount to Pay」ラベル
  • "合計支払い金額"ラベル
  • ボタンテキスト
  • 2番目のカードの請求に関するラベル
  • 概要ラベル
JSON
{
  "SplitPaymentPage": {
    "translations": {
      "es": {
        "stepper": {
          "backToSinglePayment": "Custom Style text",
          "label": "Custom Style text"
        },
        "common": {
          "enterCardDataLabel": "Custom Style text",
          "totalAmontLabel": "Custom Style text"
        },
        "amountToPayCard": {
          "title": "Custom Style text"
        },
        "footerButton": {
          "goToCard2": "Custom Style text",
          "goToPurchase": "Custom Style text"
        },
        "useSameBillingCheckbox": {
          "label": "Custom Style text"
        },
        "billingSection": {
          "title": "Custom Style text %{ordinal}"
        },
        "lastStep": {
          "title": "Custom Style text"
        }
      }
    }
  }
}

例

重要: 次の billingSection > title テキストのパーソナライズには、 %{ordinal} インターפול変数を使用します。この変数は、現在のカードステップ（例：「2番目」、「3番目」など）を動的に表示します。カスタムテキストにこの変数を保持し、誤ったラベルが表示されないようにしてください。

例：

JSON
{
  "SplitPaymentPage": {
    "translations": {
      "es": {
        "billingSection": {
          "title": "Datos Fact. %{ordinal} tarjeta"
        },
      }
    }
  }
}

分割払い

BIN（銀行識別番号）が、分割払いに対応していないカードを入力した場合に表示されます。

以下のものをカスタマイズできます:

  • ラベルテキスト
  • ツールチップテキスト
  • 利息なし分割払い適用されない理由を説明するリスト項目
  • ツールチップスタイル（色、パディングなど）
JSON
{
  "InstallmentsPattern": {
    "overrides": {
      "NoInstallmentsTooltip": {
        "label": "¿Por qué no puedo pagar a meses sin intereses?",
        "popoverProps": {
          "title": "¿Por qué no puedo pagar a MSI?",
          "list": [
            "Tu compra es menor a $2,500",
            "Tu tarjeta es de débito",
            "Tu banco no es participante",
            "Los productos no son aplicables a la promoción MSI"
          ],
          "listType": "unordered",
          "textColor": "red",
          "styles": {
            "padding": "16px",
            "backgroundColor": "blue"
          }
        }
      }
    }
  }
}

例：



リダイレクトページ

顧客が、3DSなどのAPMのチャレンジ後に、支払いステータスを表示できるようにします。

以下のものをカスタマイズできます:

  • メッセージ情報
  • ステータステキスト
  • プログレスバーテキスト
JSON
{
  "PurchaseStatusView": {
    "translations": {
      "pt": {
        "purchaseStatus": {
          "info": {
            "processed": "Processado Info PT - ☸",
            "cancelled": "Pagamento cancelado PT - ☸",
            "pending": "Pendente PT - ☸",
            "pending_3ds": "Pendente 3DS PT - ☸",
            "denied": "Negado PT - ☸"
          },
          "message": {
            "processed": "message Processado PT - ☸",
            "cancelled": "message Cancelado PT - ☸",
            "pending": "message Pendente PT - ☸",
            "pending_3ds": "message Pendente 3DS PT - ☸",
            "denied": "message Negado PT - ☸"
          },
          "redirecting": "Redirecionando PT"
        }
      }
    }
  }
}

例：


このセクションで

CustomStyle 構造CustomStyle プロパティ