<p>The Checkout Web Based system can be embedded into your web store if you do not want to use the APIs directly or prefer to code your web store with React or JavaScript and HTML. To do this on the payment page of your web store, you can load the Checkout iFrame, which calls the Checkout APIs in the background on your behalf.</p>

<div class="alert alert-info">
<p><img src="https://assets.developer.pagonxt.com/site/binaries/content/gallery/santander/common/public/attention-circle-note.svg" />Note</p>

<ul style="list-style-type:disc">
 <li>You can use the <a href="https://playground-checkout-store.globalgetnet.com/">Checkout Playground</a> to see how the Checkout iFrame integration is displayed to customers.</li>
 <li>A modified version of the Checkout API containing only the operations and fields that are supported by and relevant to the Checkout Web Based iFrame integration is available as a downloadable OpenAPI 3.0 file. For more information, see the <a href="link-bloomreach/smps/en/api/checkout-web-based/1">API Explorer</a>.</li>
</ul>
</div>

<p>The following figure shows the typical process flow for using the Checkout Web Based to handle payments on your web store.</p>

<p><strong><em>Figure: Process flow for the Checkout Web Based&nbsp;for&nbsp;iFrame</em></strong></p>

<p><img src="https://pre.assets.developer.pagonxt.com/site/binaries/content/gallery/santander/smps/common/public/checkout-web-based-process.png" /></p>

<p>Once the customer has entered their details on the Checkout iFrame page, the Checkout system automatically creates the payment by updating the payment intent with the customer's details. One of the following happens:</p>

<ul style="list-style-type:disc">
 <li>If the transaction is approved, a success screen is shown to the customer with a <strong>Continue</strong> button that redirects them to the success URL defined in your Checkout iFrame configuration.</li>
 <li>If the transaction is denied or any kind of technical error occurs, a related error screen is shown to the customer with a <strong>Try again</strong> and <strong>Cancel</strong> button. The <strong>Try again</strong> button returns the customer to the Checkout iFrame to fill out their payment details and retry the payment. The <strong>Cancel</strong> button redirects the customer to the error URL defined in your Checkout iFrame configuration.</li>
</ul>

<p>This guide describes the steps needed to integrate the iFrame implementation of the Checkout Web Based in the backend and frontend of your web store and provides node.js, JavaScript, and React code snippets you can use as a basis for your implementation.</p>

<p>To be able to integrate the Checkout Web Based in your web store, you need to have a Checkout iFrame configuration. If you do not already have a Checkout iFrame configuration, do the following:</p>

<ol style="list-style-type:disc">
 <li>Log in to the <a rel="noopener noreferrer" href="https://www.globalgetnet.com/" target="_blank">Getnet Merchant Portal</a>.</li>
 <li>Click the <strong>Digital Products</strong> tab at the top of the page and then click <strong>Checkout</strong>.</li>
 <li>Follow the steps on the page to create your Checkout iFrame configuration.</li>
</ol>

Prerequisites

<p>The backend integration consists of retrieving an access token and creating a payment intent.</p>

<p>&nbsp;To begin the backend integration, you must retrieve an access token. For this, you need to have the client ID and client secret that were sent to you via email when you signed up for the Merchant Portal. If you have not received these authentication credentials, contact <a href="?open=contact_form">Getnet</a>.</p>

<p>Using your authentication credentials, retrieve an access token by sending a POST HTTP request. The token you receive in the response needs to be included in all your API requests for authorization purposes.</p>

<p>The following code snippet shows how to retrieve a token using node.js:</p>

<div class="fragmentcode">&nbsp;</div>

<div class="datacode">&nbsp;
<pre>
<code class="language-js">const retrieveToken = async () =&gt; {
  try {
    const url = 'https://api.globalgetnet.com/authentication/oauth2/access_token';
    const credentials = {
      client_id: 'CLIENT_ID_HERE',
      client_secret: 'CLIENT_SECRET_HERES',
      grant_type: 'client_credentials'
    };
    const response = await.axios.post(url, credentials);
    console.log(response.data.access_token);
    // This token is used to call the other PagoNxt APIs
  } catch (error) {
    console.error(error);
  }
};</code></pre>

<pre>
<code class="language-node">const retrieveToken = async () =&gt; {
  try {
    const url = 'https://api.globalgetnet.com/authentication/oauth2/access_token';
    const credentials = {
      client_id: 'CLIENT_ID_HERE',
      client_secret: 'CLIENT_SECRET_HERE',
      grant_type: 'client_credentials'
    };
    const response = await.axios.post(url, credentials);
    console.log(response.data.access_token);
    // This token is used to call the other PagoNxt APIs
  } catch (error) {
    console.error(error);
  }
};</code></pre>
&nbsp;</div>

<div class="fragmentcode">&nbsp;</div>

<div class="alert alert-info">
<p><img src="https://assets.developer.pagonxt.com/site/binaries/content/gallery/santander/common/public/attention-circle-note.svg" />Note</p>

<p>&nbsp;</p>

<p>The access token is only valid for 60 minutes before you must get a new token. It is recommended that you implement a way for regularly retrieving a new token before the old one expires.</p>
</div>

<p>For more information on the HTTP request for retrieving access tokens, see <a href="">Authentication guide</a>.</p>

<div class="fragmentcode">&nbsp;</div>

Retrieving access tokens

<p>After retrieving your access token, you must create a payment intent when the customer clicks the button to pay for their selected products or services on your web store. The payment intent allows the frontend of your web store to load the Checkout iFrame on your payment page and process the transaction.</p>

<p>By using a payment intent, you ensure that the customer pays the price that is defined in the payment intent. As the payment intent is created in the backend, the defined price is preserved throughout the payment process and cannot be accidentally or intentionally changed in the frontend.</p>

<p>To create the payment intent, you need to send a POST HTTP request, including the previously retrieved token in the request&nbsp;<span style="color:#444444"><span style="background-color:#deedf2">Authorization</span></span> header. The response you receive contains the payment intent ID you need in the frontend implementation.</p>

<p>The following code snippet shows how to create a payment intent using node.js and contains only the required request body fields. If you want to view descriptions of the fields included in the code snippet and any optional fields, see the <a href="link-bloomreach/smps/en/api/checkout-web-based/1">API Explorer</a>.</p>

<div class="alert alert-info">
<p><img src="https://pre.assets.developer.pagonxt.com/site/binaries/content/gallery/santander/common/public/attention-circle-note.svg" />Note</p>

<p>You must change the value of every field based on the customer’s details.</p>
</div>

<div class="fragmentcode">&nbsp;</div>

<div class="datacode"><span style="display:none">&nbsp;</span>

<pre>
<code class="language-node">const createPaymentIntent = async () =&gt; {
  try {
    const url = 'https://api.globalgetnet.com/digital-checkout/v1/payment-intent';
    const headers = { 'Authorization': `Bearer ${generatedToken}` };
    const paymentIntent = {
      customer: {
        customer_id: "3fa85f64-5717-4562-b3fc-2c963f66afa6",
        first_name: "João",
        last_name: "da Silva",
        name: "João da Silva",
        email: "customer@email.com.br",
        document_type: "cpf",
        document_number: "12345678912",
        billing_address: {
          street: "Av. Brasil",
          number: "1000",
          country: "BR",
          postal_code: "90230060"
        }
      },
      shipping: {
        first_name: "João",
        last_name: "da Silva",
        address: {
          street: "Av. Brasil",
          number: "100",
          postal_code: "90230060",
          country: "BR"
        }
      },
      product: [
        {
          title: "Toy car",
          value: 100,
          quantity: 10
        }
      ],
      payment: {
        currency: "USD",
        amount: 1000
      }
    };
    const response = await axios.post(url, paymentIntent, { headers });
    console.log(response.data.payment_intent_id);
    // The payment intent ID is used to call the frontend payment API
    // The payment intent ID is returned in the webhook payload and can be used to relate to the sale made
  } catch (error) {
    console.error(error);
  }
};</code></pre>
<span style="display:none">&nbsp;</span></div>

<div class="fragmentcode">&nbsp;</div>

<div class="alert alert-info">
<p><img src="https://assets.developer.pagonxt.com/site/binaries/content/gallery/santander/common/public/attention-circle-note.svg" />Note</p>

<p>You cannot proceed to the next section until this step is complete. Creating a payment intent is necessary in order to load the Checkout iFrame.</p>
</div>

<p>Example response body:</p>

<div class="fragmentcode">&nbsp;</div>

<div class="datacode">
<pre>
<code class="language-json">{
  "payment_intent_id": "ee0b7dd5-92da-4ef4-ad3b-0ba369ad0efe"
}</code></pre>
</div>

<div class="fragmentcode">&nbsp;</div>

<p>For more information on the HTTP request and the fields for creating payment intents, see <a href="">Tutorial: Creating a payment using a payment intent</a>.</p>

Creating payment intents

Backend integration

<p>The last step in integrating the Checkout Web Based system is to integrate the Checkout iFrame in the frontend of your web store.</p>

<ul style="list-style-type:disc">
 <li>If your frontend integration is using JavaScript, you must:
 <ol>
  <li><a href="#importing-loader">Import the Getnet loader on your payment page</a></li>
  <li><a href="#add-checkout-button">Add the checkout button to your payment page</a></li>
  <li><a href="#add-checkout-script">Add the checkout script</a></li>
 </ol>
 </li>
 <li>If your frontend integration is using React, you must:
 <ol>
  <li><a href="#importing-loader">Import the Getnet loader on your payment page</a></li>
  <li><a href="#add-checkout-script">Add the checkout script</a></li>
  <li><a href="#initiate-loader">Initiate the Getnet loader</a></li>
 </ol>
 </li>
</ul>

<p>Optionally,&nbsp;you can <a href="#change-position">change the position of the iFrame</a> for both frontend integration scenarios.</p>

<p><a name="importing-loader" id="importing-loader"></a>When your backend integration is complete, you can call the Getnet loader on your web store payment page to create secure transactions. The loader is responsible for building the Getnet checkout application inside the iFrame and must be called after you have created a payment intent to allow the customer to enter their payment details.</p>

<p>To import the Getnet loader, add the following code to your payment page:</p>

<ul style="list-style-type:disc">
 <li>JavaScript:</li>
</ul>

<div class="fragmentcode">&nbsp;</div>

<div class="datacode">&nbsp;
<pre>
<code class="language-js">&lt;script src="https://www.globalgetnet.com/digital-checkout/loader.js"&gt;&lt;/script&gt;</code></pre>
&nbsp;</div>

<div class="fragmentcode">&nbsp;</div>

<ul style="list-style-type:disc">
 <li>React:</li>
</ul>

<div class="fragmentcode">&nbsp;</div>

<div class="datacode">
<pre>
<code>useEffect(() =&gt; {
   const script = document.createElement("script");
   script.src = "https://www.globalgetnet.com/digital-checkout/loader.js";
   script.async = true;
   script.setAttribute("data-testid", "digital-checkout");
   script.setAttribute("id", "digital-checkout");
   document.body.appendChild(script);
   ...</code></pre>
</div>

<div class="fragmentcode">&nbsp;</div>

Importing the Getnet loader on your payment page

<p><a name="add-checkout-button" id="add-checkout-button"></a>If your frontend is using JavaScript, you must add the checkout button to your payment page. The button is responsible for starting the checkout script shown in the next section.</p>

<p>To create the checkout button, add the following JavaScript code to your payment page:</p>

<div class="fragmentcode">&nbsp;</div>

<div class="datacode"><span style="display:none">&nbsp;</span>

<pre>
<code class="language-js">&lt;button onclick="checkoutButton()"&gt;
   Go to Payment
&lt;/button&gt;</code></pre>
<span style="display:none">&nbsp;</span></div>

<div class="fragmentcode">&nbsp;</div>

Adding the checkout button to your JavaScript payment page

<div class="fragmentcode">&nbsp;</div>

<div class="datacode">
<pre>
<code class="language-js"> const config = {
      "paymentIntentId": "PAYMENT_INTENT_ID_HERE",
      "checkoutType": "iframe",
      "accessToken": "Bearer ACCESS_TOKEN_ID_HERE"
   };
    const checkoutButton = () =&amp;gt; {
      loader.init(config);
   };</code></pre>
</div>

<div class="fragmentcode">&nbsp;</div>

<p>&nbsp;&nbsp;</p>

<p><a name="add-checkout-script" id="add-checkout-script"></a>You need to add the checkout script. To do this, add the following code to your payment page and modify the values to use the payment intent ID and access token you previously received:</p>

<ul style="list-style-type:disc">
 <li>JavaScript:</li>
</ul>

<ul style="list-style-type:disc">
 <li>React:</li>
</ul>

<div class="fragmentcode">&nbsp;</div>

<div class="datacode">
<pre>
<code>...
   const config = {
      paymentIntentId: "PAYMENT_INTENT_ID_HERE",
      accessToken: "Bearer ACCESS_TOKEN_ID_HERE",
      checkoutType: "iframe"
   };</code></pre>
</div>

<div class="fragmentcode">&nbsp;</div>

Adding the checkout script

<p><a name="initiate-loader" id="initiate-loader"></a>If your frontend is using React, you must initiate the Getnet loader. To do this, add the following code to your payment page:</p>

<div class="fragmentcode">&nbsp;</div>

<div class="datacode"><span style="display:none">&nbsp;</span>

<pre>
<code>...
   window.loader.init(config);
}, []);</code></pre>
<span style="display:none">&nbsp;</span></div>

<div class="fragmentcode">&nbsp;</div>

Initiating the React Getnet loader

<p><a name="change-position" id="change-position"></a>The iFrame is injected as the last element of the page by default. Optionally, you can change the position of the iFrame by manipulating the element in the DOM.</p>

<p>To do this, add the following code to your payment page to create the iFrame with an identifier and manipulate it in the DOM:</p>

<ul style="list-style-type:disc">
 <li>JavaScript:</li>
</ul>

<div class="fragmentcode">&nbsp;</div>

<div class="datacode">&nbsp;
<pre>
<code class="language-js">&lt;div id="iframe-section"&gt;&lt;/div&gt;

&lt;script&gt;
   const config = {
      "paymentIntentId": "PAYMENT_INTENT_ID_HERE",
      "checkoutType": "iframe",
      "accessToken": "Bearer ACCESS_TOKEN_ID_HERE"
   };
   const checkoutButton = () =&gt; {
      loader.init(config);

      const iframeSection = document.getElementById("iframe-section");
      const iframe = document.querySelector("iframe");
      iframeSection.appendChild(iframe);
   };
&lt;/script&gt;</code></pre>
&nbsp;</div>

<div class="fragmentcode">&nbsp;</div>

<ul style="list-style-type:disc">
 <li>React:</li>
</ul>

<div class="fragmentcode">&nbsp;</div>

<div class="datacode">
<pre>
<code>&lt;div id="iframe-section"&gt;&lt;/div&gt;</code></pre></div>

<div class="fragmentcode">&nbsp;</div>

<div class="datacode">
<pre>
<code>useEffect(() =&gt; {
   const script = document.createElement("script");
   script.src = "https://www.globalgetnet.com/digital-checkout/loader.js";
   script.async = true;
   script.setAttribute("data-testid", "digital-checkout");
   script.setAttribute("id", "digital-checkout");
   document.body.appendChild(script);
   const config = {
      paymentIntentId: "PAYMENT_INTENT_ID_HERE",
      accessToken: "Bearer ACCESS_TOKEN_ID_HERE",
      checkoutType: "iframe"
   };
   window.loader(config);
   const iframe = document.querySelector("iframe");
   const iframeSection = document.getElementById("iframe-section");
   iframeSection.appendChild(iframe);
}, []);</code></pre>
</div>

<div class="fragmentcode">&nbsp;</div>

Changing the position of the iFrame

Frontend integration

Checkout Web Based

DPY-digital-checkout-v1

<p>Embed an entire checkout system into your web store with minimal API involvement.</p>

Integrating Checkout Web Based iFrame