Authorize.net の住所フィールド検証を追加する方法

Authorize.netの支払いフォームで、住所検証の体験を改善しませんか？デフォルトでは、Authorize.netは住所フィールドを60文字に制限しますが、フォーム送信後に技術的なエラーメッセージしか表示しません。

このガイドでは、送信前に住所の長さの問題を検出する、ユーザーフレンドリーな検証を追加する方法を説明します。

問題の理解

住所が60文字を超えると、Authorize.netはこの不可解なエラーを表示します：

Payment was declined by Authorize.Net.
API: (E00003) The 'AnetApi/xml/v1/schema/AnetApiSchema.xsd:address' 
element is invalid – The value XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX 
is invalid according to its datatype 'String' – 
The actual length is greater than the MaxLength value.

これを、フォーム入力中に即座に表示される、明確でユーザーフレンドリーなメッセージに置き換えます。

フォームの設定

まず、Authorize.netアドオンを使用してフォームを作成する必要があります。Authorize.net支払いフォームの作成にヘルプが必要な場合は、Authorize.net支払いの設定に関するガイドをご覧ください。

フォームに住所フィールドを追加してください。トランザクションの請求先住所または配送先住所をキャプチャするために必要になります。

住所フィールドのマッピング

フォームビルダーの支払いタブに移動し、Authorize.netタブを選択します。フォームの住所フィールドを、対応するAuthorize.netトランザクションフィールドにマッピングします。これにより、住所データが支払いとともに正しく送信されるようになります。

検証コードの追加

住所検証を有効にするには、このコードをサイトに追加してください。カスタムコードの追加方法がわからない場合は、WordPressにコードスニペットを追加する方法に関するガイドをご確認ください。

コードのカスタマイズ：

• 11行目：1000をフォームIDに置き換えてください
• 16行目：25を住所フィールドIDに置き換えてください
• 19行目：25を再度住所フィールドIDに置き換えてください

フォームIDとフィールドIDの見つけ方がわからない場合は、フォームとフィールドIDの見つけ方に関するガイドをご覧ください。

これで、ユーザーが住所を入力する際に、住所のいずれかの行が60文字を超えた場合、即座に住所検証メッセージが表示されます。

これで完了です！次に、請求書番号をAuthorize.netに送信しますか？請求書番号をAuthorize.netの支払いを通じて送信する方法のチュートリアルをご覧ください。

参照アクション

wpforms_process