Widget payment process

Widget payment process

To consider

Para utilizar el widget de pago de Greenpay, se debe considerar los siguiente:
  1. You must have a sandbox or production account, to obtain a sandbox account visit About sandbox or test account.
  2. The payment widget is a web element that can be integrated into applications developed in AngularJS, React and Javascript.
  3. To use this functionality it is necessary to have created a payment order, to create the payment order you can review the article Create a payment order.
  4. Recommended: Implement a webhook to receive the responses in a backend, you can review the article Payment responses in webhook.

Steps to use the widget

1. Include the widget script

The gpwidget.min.js file must be included, which is responsible for displaying the widget. This file can be added to your website using the url https://widget.greenpay.me/1.3.2/gpwidget.min.js. This element loads a card data capture form to make a payment with our service, in addition, it automatically loads the amount of the payment order with its respective currency.

2. Include Greenpay Response script

You must include a script that contains the greenPayResponse (id, response) function which will be invoked by the widget every time a transaction is made. This function get the success or rejection transaction response.

  2. <!DOCTYPE html>
  3. <html lang="en">
  4.    <head>
  5.       <title>React App</title>
  6.    </head>
  7.    <body>
  8.    </body>
  9.    <--- Widget Main file --->
  10.    <script src="https://widget.greenpay.me/1.3.2/gpwidget.min.js"></script>
  11.    <--- Create the greenPayResponse to receive the payment data --->
  12.    <script>
  13.       function greenPayResponse(id, res){
  14.           //Add your logic
  15.           if(res.status === 200){
  16.               //Response is OK, someting payed
  17.               console.log("payed", JSON.stringify(res))
  18.           }
  19.           else{
  20.               //An ERROR ocurred
  21.               console.log("error", JSON.stringify(res))
  22.           }
  23.       }
  24.    </script>
  25. </html>

3. Show the widget

To display the widget, you must create a payment order and add the HTML element to the web page, this element is described below:
  1. Embed the widget in a web page.
    <div id="gpSecuurity" gpsession="{{order session}}" gptoken="{{order token}}" environment="sandbox"></div>
  2. Show the widget on modal.
    <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
    <!-- Modal content-->
    <div class="modal-content">
    <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">&times;</button>
    <h4 class="modal-title">GreenPay Payment</h4>
    </div>
    <div class="modal-body" id="AreaPagoGreenPay">
    <!-- <div gpsession="" gptoken="" environment="production or sandbox"></div> -->
    </div>
    <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    </div>
    </div>
    </div>
    </div>
The required values to load de widget are:
  1. gpsession: session from payment order response.
  2. gptoken: token from payment order response.
  3. environment: sandbox or production, it depends on the current environment.
In Codepen we have a complete example where you can see the widget in modal or embedded, check the example in Codepen widget.

4. Get the payment response on webhook.

As mentioned in the widget considerations section, it is recommended to have a webhook enabled. Please review the article Receive the answer in the webhook.
The webhook allows obtaining the response in a backend event if an event like API timeout or disconnection of the user from the internet.


    • Related Articles

    • Webform payment process

      To consider To use the card payment form, the following aspects should be considered: The form is available at: Sandbox: https://sandbox-checkoutform.greenpay.me/ Producción: https://checkout-form.greenpay.me/ Get a session and token of a valid ...

    • Manual payment

      For this service, the following endpoint must be consumed:  https://sandbox-merchant.greenpay.me/subscriptions/pay Step by step to process a successful manual payment in our API:  1.Create the JSON object to be sent. JSON structure example {   ...

    • Create payment order

      To consider A payment order is created to prepare the Greenpay API for a make a payment process. The following aspects have to be consider: Use these endpoints: Sandbox: https://sandbox-merchant.greenpay.me/ Production: https://merchant.greenpay.me/ ...

    • API Tokenization process

      To consider To invoke the payments api, the following aspects should be considered: Use the service on the endpoints: Sandbox: https://sandbox-checkout.greenpay.me/tokenize Production: https://checkout.greenpay.me/tokenize Get a session and token of ...

    • Webhook payment response

      1. Description If the merchant requires receiving the payments responses or card tokenization response in a backend, either to update orders, information or only store the response in the database as a backup, then they have to enable a webhook. A ...