Google Pay™ en el Componente de Pago

Google Pay™ permite a tus clientes pagar con las tarjetas que tienen guardadas en su cuenta de Google, sin necesidad de capturar manualmente los datos de la tarjeta. Este flujo se renderiza automáticamente dentro del Componente de Pago embebido de Conekta cuando el dispositivo y navegador del cliente lo soportan.

📘
¿Cómo se renderiza el botón?
El botón de Google Pay™ aparece automáticamente dentro del iframe del Componente de Pago cuando:

El navegador es Chrome.

Se está pagando desde un dispositivo Android.

El cliente tiene al menos una tarjeta guardada en su wallet de Google.

Activación

Para habilitar Google Pay™ en el Componente de Pago basta con incluir google (o card) dentro del array allowed_payment_methods al crear el Order.

ℹ️
Si tu allowed_payment_methods ya incluye card, el botón de Google Pay™ aparecerá automáticamente cuando el cliente cumpla las condiciones del navegador y de su cuenta de Google. Usar google de forma explícita es opcional y útil cuando quieres documentar de forma clara los métodos aceptados.

Paso 1: Crear el Order con el Checkout

Crea el Order con un objeto checkout de tipo Integration y declara los métodos de pago aceptados.

curl --request POST \
  --url https://api.conekta.io/orders \
  --header 'Accept-Language: es' \
  --header 'accept: application/vnd.conekta-v2.2.0+json' \
  --header 'authorization: Bearer {PRIVATE_KEY}' \
  --header 'content-type: application/json' \
  --data '{
    "checkout": {
      "allowed_payment_methods": ["card", "google", "apple"],
      "type": "Integration",
      "name": "Pago con Google Pay"
    },
    "customer_info": {
      "name": "DevTest",
      "email": "[email protected]",
      "phone": "5522997233"
    },
    "currency": "MXN",
    "line_items": [{
      "name": "Box of Cohiba S1s",
      "description": "Imported From Mex.",
      "unit_price": 500000,
      "quantity": 1
    }],
    "shipping_lines": [{
      "amount": 0,
      "carrier": "Estafeta",
      "method": "Standard"
    }],
    "shipping_contact": {
      "phone": "5522997233",
      "receiver": "DevTest",
      "address": {
        "street1": "Av. Insurgentes Sur 1602",
        "city": "Ciudad de México",
        "state": "CDMX",
        "country": "MX",
        "postal_code": "03940"
      }
    }
  }'

require 'conekta'

config = Conekta::Configuration.new
config.access_token = 'PRIVATE_KEY'
client = Conekta::OrdersApi.new(Conekta::ApiClient.new(config))

order = {
  currency: 'MXN',
  customer_info: {
    name: 'DevTest',
    email: '[email protected]',
    phone: '5522997233'
  },
  line_items: [{
    name: 'Box of Cohiba S1s',
    description: 'Imported From Mex.',
    unit_price: 500_000,
    quantity: 1
  }],
  shipping_lines: [{
    amount: 0,
    carrier: 'Estafeta',
    method: 'Standard'
  }],
  shipping_contact: {
    phone: '5522997233',
    receiver: 'DevTest',
    address: {
      street1: 'Av. Insurgentes Sur 1602',
      city: 'Ciudad de México',
      state: 'CDMX',
      country: 'MX',
      postal_code: '03940'
    }
  },
  checkout: {
    type: 'Integration',
    name: 'Pago con Google Pay',
    allowed_payment_methods: %w[card google apple]
  }
}

response = client.create_order(order, 'es')
puts response.id

const { OrdersApi, Configuration } = require('conekta');

const config = new Configuration({ accessToken: 'PRIVATE_KEY' });
const client = new OrdersApi(config);

const order = {
  currency: 'MXN',
  customer_info: {
    name: 'DevTest',
    email: '[email protected]',
    phone: '5522997233',
  },
  line_items: [{
    name: 'Box of Cohiba S1s',
    description: 'Imported From Mex.',
    unit_price: 500000,
    quantity: 1,
  }],
  shipping_lines: [{
    amount: 0,
    carrier: 'Estafeta',
    method: 'Standard',
  }],
  shipping_contact: {
    phone: '5522997233',
    receiver: 'DevTest',
    address: {
      street1: 'Av. Insurgentes Sur 1602',
      city: 'Ciudad de México',
      state: 'CDMX',
      country: 'MX',
      postal_code: '03940',
    },
  },
  checkout: {
    type: 'Integration',
    name: 'Pago con Google Pay',
    allowed_payment_methods: ['card', 'google', 'apple'],
  },
};

client.createOrder(order, 'es').then(({ data }) => {
  console.log(data.id);
});

import conekta
from conekta.api.orders_api import OrdersApi

config = conekta.Configuration(access_token='PRIVATE_KEY')
client = OrdersApi(conekta.ApiClient(config))

order = {
    "currency": "MXN",
    "customer_info": {
        "name": "DevTest",
        "email": "[email protected]",
        "phone": "5522997233",
    },
    "line_items": [{
        "name": "Box of Cohiba S1s",
        "description": "Imported From Mex.",
        "unit_price": 500000,
        "quantity": 1,
    }],
    "shipping_lines": [{
        "amount": 0,
        "carrier": "Estafeta",
        "method": "Standard",
    }],
    "shipping_contact": {
        "phone": "5522997233",
        "receiver": "DevTest",
        "address": {
            "street1": "Av. Insurgentes Sur 1602",
            "city": "Ciudad de México",
            "state": "CDMX",
            "country": "MX",
            "postal_code": "03940",
        },
    },
    "checkout": {
        "type": "Integration",
        "name": "Pago con Google Pay",
        "allowed_payment_methods": ["card", "google", "apple"],
    },
}

response = client.create_order(order, accept_language='es')
print(response.id)

package main

import (
    "context"
    "fmt"

    conekta "github.com/conekta/conekta-go"
)

func main() {
    cfg := conekta.NewConfiguration()
    cfg.AddDefaultHeader("Authorization", "Bearer PRIVATE_KEY")
    client := conekta.NewAPIClient(cfg)

    order := conekta.OrderRequest{
        Currency: "MXN",
        CustomerInfo: conekta.OrderRequestCustomerInfo{
            Name:  "DevTest",
            Email: "[email protected]",
            Phone: "5522997233",
        },
        LineItems: []conekta.Product{{
            Name:        "Box of Cohiba S1s",
            Description: conekta.PtrString("Imported From Mex."),
            UnitPrice:   500000,
            Quantity:    1,
        }},
        ShippingLines: []conekta.ShippingRequest{{
            Amount:  0,
            Carrier: conekta.PtrString("Estafeta"),
            Method:  conekta.PtrString("Standard"),
        }},
        ShippingContact: &conekta.CustomerShippingContacts{
            Phone:    conekta.PtrString("5522997233"),
            Receiver: conekta.PtrString("DevTest"),
            Address: conekta.CustomerShippingContactsAddress{
                Street1:    "Av. Insurgentes Sur 1602",
                City:       conekta.PtrString("Ciudad de México"),
                State:      conekta.PtrString("CDMX"),
                Country:    conekta.PtrString("MX"),
                PostalCode: conekta.PtrString("03940"),
            },
        },
        Checkout: &conekta.CheckoutRequest{
            Type:                  conekta.PtrString("Integration"),
            Name:                  conekta.PtrString("Pago con Google Pay"),
            AllowedPaymentMethods: []string{"card", "google", "apple"},
        },
    }

    resp, _, err := client.OrdersApi.
        CreateOrder(context.Background()).
        OrderRequest(order).
        AcceptLanguage("es").
        Execute()
    if err != nil {
        panic(err)
    }
    fmt.Println(*resp.Id)
}

import com.conekta.ApiClient;
import com.conekta.Configuration;
import com.conekta.api.OrdersApi;
import com.conekta.model.*;
import java.util.List;

public class CreateOrderGooglePay {
    public static void main(String[] args) throws Exception {
        ApiClient client = Configuration.getDefaultApiClient();
        client.setBearerToken("PRIVATE_KEY");

        OrdersApi api = new OrdersApi(client);

        OrderRequest order = new OrderRequest()
            .currency("MXN")
            .customerInfo(new OrderRequestCustomerInfo()
                .name("DevTest")
                .email("[email protected]")
                .phone("5522997233"))
            .lineItems(List.of(new Product()
                .name("Box of Cohiba S1s")
                .description("Imported From Mex.")
                .unitPrice(500000L)
                .quantity(1)))
            .shippingLines(List.of(new ShippingRequest()
                .amount(0)
                .carrier("Estafeta")
                .method("Standard")))
            .shippingContact(new CustomerShippingContacts()
                .phone("5522997233")
                .receiver("DevTest")
                .address(new CustomerShippingContactsAddress()
                    .street1("Av. Insurgentes Sur 1602")
                    .city("Ciudad de México")
                    .state("CDMX")
                    .country("MX")
                    .postalCode("03940")))
            .checkout(new CheckoutRequest()
                .type("Integration")
                .name("Pago con Google Pay")
                .allowedPaymentMethods(List.of("card", "google", "apple")));

        OrderResponse response = api.createOrder(order, "es", null);
        System.out.println(response.getId());
    }
}

using Conekta.net.Api;
using Conekta.net.Client;
using Conekta.net.Model;

var config = new Configuration { AccessToken = "PRIVATE_KEY" };
var client = new OrdersApi(config);

var order = new OrderRequest(
    currency: "MXN",
    customerInfo: new OrderRequestCustomerInfo(
        name: "DevTest",
        email: "[email protected]",
        phone: "5522997233"
    ),
    lineItems: new List<Product> {
        new Product(
            name: "Box of Cohiba S1s",
            description: "Imported From Mex.",
            unitPrice: 500000,
            quantity: 1
        )
    },
    shippingLines: new List<ShippingRequest> {
        new ShippingRequest(
            amount: 0,
            carrier: "Estafeta",
            method: "Standard"
        )
    },
    shippingContact: new CustomerShippingContacts(
        phone: "5522997233",
        receiver: "DevTest",
        address: new CustomerShippingContactsAddress(
            street1: "Av. Insurgentes Sur 1602",
            city: "Ciudad de México",
            state: "CDMX",
            country: "MX",
            postalCode: "03940"
        )
    ),
    checkout: new CheckoutRequest(
        type: "Integration",
        name: "Pago con Google Pay",
        allowedPaymentMethods: new List<string> { "card", "google", "apple" }
    )
);

var response = client.CreateOrder(order, "es");
Console.WriteLine(response.Id);

La respuesta incluye el objeto checkout con un id (en adelante referido como checkoutRequestId) que usarás en el siguiente paso para inicializar el componente.

Paso 2: Renderizar el Componente de Pago

Embebe el script del Componente de Pago y pasa el checkoutRequestId obtenido en el paso anterior. El SDK detecta automáticamente si el cliente puede pagar con Google Pay™ y muestra el botón cuando corresponde.

<div id="conekta-checkout"></div>

<script src="https://pay.conekta.com/v1.0/js/conekta-checkout.min.js"></script>
<script type="text/javascript">
  const options = {
    backgroundMode: 'lightMode',
    colorPrimary: '#081133',
    colorText: '#585987',
    colorLabel: '#585987',
    inputType: 'minimalMode',
  };

  const config = {
    locale: 'es',
    publicKey: '{{PUBLIC_KEY}}',
    targetIFrame: '#conekta-checkout',
    checkoutRequestId: '{{checkoutRequestId}}',
  };

  const callbacks = {
    onGetInfoSuccess: function (loadingTime) {
      console.log('loading time:', loadingTime.initLoadTime);
    },
    onFinalizePayment: function (order) {
      console.log('success:', JSON.stringify(order));
    },
    onErrorPayment: function (error) {
      console.log('error:', error);
    },
  };

  window.ConektaCheckoutComponents.Integration({ config, callbacks, options });
</script>