Wava Technologies

Integrations

Wava Button

Webhooks

Tiendanube

Wava Public

Production

Sandbox

<p class="slate-p " >Wava REST API para gestion de Links de Pago</p><p class="slate-p " ></p><p class="slate-p " ></p>

Wava REST API para gestion de Links de Pago

<p class="slate-p " >Using Wava Button allows implementing Wava&apos;s checkout optimized to increase conversion rate and user experience, in an ease and fast integration with minimum code usage. </p><p class="slate-p " >With this integration, you just need to define some values so the user can see Wava&apos;s button, and then on click, Wava&apos;s checkout will be displayed on a Modal on the same screen.</p><div class="slate-hr"><hr contenteditable="false" class="slate-HrElement-hr"/></div><p class="slate-p " ></p><h2 class="slate-h2 " >Use Cases.</h2><ul class="slate-ul " ><li class="slate-li " ><div style="position:relative">If you have an online business which is not currently supported by our integrations, and you can modify the HTML of that website that you are using. </div></li><li class="slate-li " ><div style="position:relative">You have the need of getting an automated solution for charging dynamic amounts in multiple parts of your website.</div></li></ul><p class="slate-p " ></p><p class="slate-p " ></p>

Using Wava Button allows implementing Wava's checkout optimized to increase conversion rate and user experience, in an ease and fast integration with minimum code usage. 

With this integration, you just need to define some values so the user can see Wava's button, and then on click, Wava's checkout will be displayed on a Modal on the same screen.

Introduction

Tab 1

<p class="slate-p " ><span style="background-color:transparent;color:rgb(0, 0, 0)">This integration is super simple, we just need to add an HTML form inside the code with the parameters needed for the charge</span></p><div class="slate-hr"><hr contenteditable="false" class="slate-HrElement-hr"/></div><div class="slate-div"></div><div class="slate-hr"><hr contenteditable="false" class="slate-HrElement-hr"/></div><h3 class="slate-h3 " >Listado de Parámetros:</h3><div class="table-container" style="width:100%;min-width:100%"><table class="slate-table" style="min-width:100%"><div class="published-table-header" style="width:100%;min-width:100%;min-height:initial;visibility: hidden;border:initial"><div style="width:100px;">Title</div><div style="width:100px;">Description</div><div style="width:100px;">Title</div></div><colgroup ><col style="width:initial"><col style="width:initial"></colgroup><tbody class="slate-TableElement-tbody"><tr class="slate-tr " ><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p slate-indent-1" style="24px"><strong class="slate-bold">Parámetro</strong></p></td></div><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p slate-indent-1" style="24px"><strong class="slate-bold">Descripción</strong></p></td></div><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p slate-indent-1" style="24px"><strong class="slate-bold">Requerido</strong></p></td></div></tr><tr class="slate-tr " ><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p slate-indent-1" style="24px">data_wava_merchant_key</p></td></div><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p slate-indent-1" style="24px">Merchant&apos;s Key provided by Wava</p></td></div><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p slate-indent-1" style="24px"><span style="color:#93C47D"><strong class="slate-bold">Si</strong></span></p></td></div></tr><tr class="slate-tr " ><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p slate-indent-1" style="24px">data_wava_product_name</p></td></div><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p slate-indent-1" style="24px">Name of the service or product to display to the user</p></td></div><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p slate-indent-1" style="24px"><span style="color:#93C47D"><strong class="slate-bold">Si</strong></span></p></td></div></tr><tr class="slate-tr " ><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p slate-indent-1" style="24px">data_wava_order_key</p></td></div><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p slate-indent-1" style="24px">Your order ID or specific identifier</p></td></div><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p slate-indent-1" style="24px"><span style="color:#93C47D"><strong class="slate-bold">Si</strong></span></p></td></div></tr><tr class="slate-tr " ><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p slate-indent-1" style="24px">data_wava_amount</p></td></div><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p slate-indent-1" style="24px">Total amount to be charged</p></td></div><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p slate-indent-1" style="24px"><span style="color:#93C47D"><strong class="slate-bold">Si</strong></span></p></td></div></tr><tr class="slate-tr " ><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p slate-indent-1" style="24px">data_wava_redirect_link</p></td></div><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p slate-indent-1" style="24px">Link to redirect the user after the payment is successful</p></td></div><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p slate-indent-1" style="24px"><span style="color:#EA9999"><strong class="slate-bold">No</strong></span></p></td></div></tr><tr class="slate-tr " ><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p slate-indent-1" style="24px">data_wava_shopper_email</p></td></div><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p slate-indent-1" style="24px">User email</p></td></div><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p slate-indent-1" style="24px"><span style="color:#EA9999"><strong class="slate-bold">No</strong></span></p></td></div></tr><tr class="slate-tr " ><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p slate-indent-1" style="24px">data_wava_shopper_phone</p></td></div><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p slate-indent-1" style="24px">User phone number (without country code)</p></td></div><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p slate-indent-1" style="24px"><span style="color:#EA9999"><strong class="slate-bold">No</strong></span></p></td></div></tr><tr class="slate-tr " ><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p slate-indent-1" style="24px">data_wava_shopper_first_name</p></td></div><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p slate-indent-1" style="24px">User First name</p></td></div><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p slate-indent-1" style="24px"><span style="color:#EA9999"><strong class="slate-bold">No</strong></span></p></td></div></tr><tr class="slate-tr " ><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p slate-indent-1" style="24px">data_wava_shopper_last_name</p></td></div><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p slate-indent-1" style="24px">User Last name</p></td></div><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p slate-indent-1" style="24px"><span style="color:#EA9999"><strong class="slate-bold">No</strong></span></p></td></div></tr><tr class="slate-tr " ><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p slate-indent-1" style="24px">data_wava_shopper_document_type</p></td></div><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p slate-indent-1" style="24px">Users national ID type</p></td></div><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p slate-indent-1" style="24px"><span style="color:#EA9999"><strong class="slate-bold">No</strong></span></p></td></div></tr><tr class="slate-tr " ><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p slate-indent-1" style="24px">data_wava_shopper_document_number</p></td></div><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p slate-indent-1" style="24px">User National ID Number</p></td></div><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p slate-indent-1" style="24px"><span style="color:#EA9999"><strong class="slate-bold">No</strong></span></p></td></div></tr><tr class="slate-tr " ><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p slate-indent-1" style="24px">data_wava_button_text</p></td></div><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p slate-indent-1" style="24px">Custom Text to show on the pay button</p></td></div><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p slate-indent-1" style="24px"><span style="color:#EA9999"><strong class="slate-bold">No</strong></span></p></td></div></tr><tr class="slate-tr " ><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p slate-indent-1" style="24px">data_wava_button_class</p></td></div><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p slate-indent-1" style="24px">CSS class to use in case of customization</p></td></div><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p slate-indent-1" style="24px"><span style="color:#EA9999"><strong class="slate-bold">No</strong></span></p></td></div></tr></tbody></table></div><div class="slate-hr"><hr contenteditable="false" class="slate-HrElement-hr"/></div><h3 class="slate-h3 " >Tipos de documento soportados</h3><p class="slate-p " ><div class="table-container" style="width:100%;min-width:100%"><table class="slate-table" style="min-width:100%"><div class="published-table-header" style="width:100%;min-width:100%;min-height:initial;visibility: hidden;border:initial"><div style="width:100px;">Title</div><div style="width:100px;">Description</div><div style="width:100px;">Title</div></div><colgroup ><col style="width:initial"><col style="width:initial"></colgroup><tbody class="slate-TableElement-tbody"><tr class="slate-tr " ><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p " >Country</p></td></div><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p " >Type</p></td></div><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p " >Reference</p></td></div></tr><tr class="slate-tr " ><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p slate-indent-1" style="24px">CO</p></td></div><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p slate-indent-1" style="24px">CC</p></td></div><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p slate-indent-1" style="24px">Cédula de ciudadanía</p></td></div></tr><tr class="slate-tr " ><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p slate-indent-1" style="24px">CO</p></td></div><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p slate-indent-1" style="24px">CE</p></td></div><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p slate-indent-1" style="24px">Cédula de extranjería</p></td></div></tr><tr class="slate-tr " ><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p slate-indent-1" style="24px">CO</p></td></div><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p slate-indent-1" style="24px">NIT</p></td></div><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p slate-indent-1" style="24px">Número de Identificación Tributaria</p></td></div></tr><tr class="slate-tr " ><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p slate-indent-1" style="24px">CL</p></td></div><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p slate-indent-1" style="24px">CI</p></td></div><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p slate-indent-1" style="24px">Cédula de Identidad</p></td></div></tr><tr class="slate-tr " ><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p slate-indent-1" style="24px">CL</p></td></div><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p slate-indent-1" style="24px">RUT</p></td></div><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p slate-indent-1" style="24px">Rol Único Tributario</p></td></div></tr><tr class="slate-tr " ><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p slate-indent-1" style="24px">EC</p></td></div><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p slate-indent-1" style="24px">CI</p></td></div><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p slate-indent-1" style="24px">Cédula de Identidad</p></td></div></tr><tr class="slate-tr " ><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p slate-indent-1" style="24px">EC</p></td></div><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p slate-indent-1" style="24px">PP</p></td></div><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p slate-indent-1" style="24px">Pasaporte</p></td></div></tr></tbody></table></div></p><div class="slate-hr"><hr contenteditable="false" class="slate-HrElement-hr"/></div><p class="slate-p " >In order to add the button we need to add this code in the section what it&apos;s expected to show the button.</p><div class="code-block-wrapper"  style="width:100%;min-width:100%" ><div class="code-block-header">Plain text</div><pre class="slate-CodeBlockElement slate-code_block"><textarea id="publishedPageCodeblock" style="display:none !important; visibility: hidden; opacity: 0; width: 1px; height: 1px;" type="hidden"><form>
    <script  
        src="https://wava-assets.s3.amazonaws.com/Button/payment.js"
        class="wava-button"
        data_wava_merchant_key=""
        data_wava_amount=""
        data_wava_product_name=""
        data_wava_order_key=""
        data_wava_redirect_link=""
        data_wava_shopper_email=""
        data_wava_shopper_phone=""
        data_wava_shopper_first_name=""
        data_wava_shopper_last_name=""
        data_wava_shopper_document_type=""
        data_wava_shopper_document_number=""
        data_wava_button_text=""
        data_wava_button_class="">
    </script>
</form> </textarea><code class="language-html keep-markup drop-tokens"></code></pre></div><p class="slate-p " ></p><p class="slate-p " ></p>

This integration is super simple, we just need to add an HTML form inside the code with the parameters needed for the charge

Title

Description

In order to add the button we need to add this code in the section what it's expected to show the button.

Implementation

<p class="slate-p " >In case the merchant wants to receive confirmation notifications via a webhook. </p><h3 class="slate-h3 " >How it works</h3><p class="slate-p " >The user can set their webhook inside the Wava app config. It can be the same one for success and cancelled orders, or the user can set different webhooks. </p><p class="slate-p " >It&apos;s a POST call with a json body with this structure:</p><p class="slate-p " ></p><p class="slate-p " ></p><div class="code-block-wrapper"  style="width:100%;min-width:100%" ><div class="code-block-header">JSON</div><pre class="slate-CodeBlockElement slate-code_block"><textarea id="publishedPageCodeblock" style="display:none !important; visibility: hidden; opacity: 0; width: 1px; height: 1px;" type="hidden"> </textarea><code class="language-json keep-markup drop-tokens"><div class="slate-code_line"><div class="slate-code_line">{
    &quot;id_order&quot;: 1234,
    &quot;status&quot;: &quot;confirmed&quot;,
    &quot;id_external&quot;: &quot;AAA111&quot;,
    &quot;payment_method&quot;: {
        &quot;gateway&quot;: &quot;Nequi&quot;,
        &quot;status&quot;: &quot;processed&quot;
    },
    &quot;total_price&quot;: 12423,
    &quot;totalItems&quot;: 1,
    &quot;shopper&quot;: {
        &quot;first_name&quot;: &quot;John&quot;,
        &quot;last_name&quot;: &quot;Smith&quot;,
        &quot;email&quot;: &quot;john@example.com&quot;
    }
}</div></div></code></pre></div><p class="slate-p " ></p><p class="slate-p " ></p>

In case the merchant wants to receive confirmation notifications via a webhook. 

The user can set their webhook inside the Wava app config. It can be the same one for success and cancelled orders, or the user can set different webhooks. 

It's a POST call with a json body with this structure:

<p class="slate-p " ></p><p class="slate-p " >Please refer to: </p><p class="slate-p " ><a href="https://www.tiendanube.com/co/tienda-aplicaciones-nube/wava" target="_self">https://www.tiendanube.com/co/tienda-aplicaciones-nube/wava</a></p>

<p class="slate-p " >Please refer to:</p><p class="slate-p " ><a href="https://wordpress.org/plugins/wava-payment/" target="_self">https://wordpress.org/plugins/wava-payment/</a></p><p class="slate-p " ></p>

Sections