Elements also supports payment forms like Apple Pay and Google Pay in addition to normal credit cards. This provides great flexibilities for merchants and customers to complete their payment experience with the payment method they preferred.

Generate Client Token

Generate the client token which is used on the frontend application.

require "elements"

Elements.configure do |c|
  # You must set a valid api key
  c.api_key = "my_api_key"
  # Optionally, you can configure logging for request & response
  c.logger = Logger.new($stdout)
  # If you want to connect to the sandbox instead of production
  c.api_base = Elements::ElementsConfiguration::SANDBOX_URL
end

# create client token which is used on the client side
Elements::ClientToken.create({ external_customer_id: "your_customer_identifier" })

#set up api key
import elements
elements.api_key = "my_api_key"
elements.api_base = elements.API_SANDBOX

# call this API generate client token
client_token = elements.ClientToken.create(external_customer_id="foo").client_token

#set up api key
import elements
elements.api_key = "my_api_key"
elements.api_base = elements.API_SANDBOX

# call this API generate client token
client_token = elements.ClientToken.create(external_customer_id="foo").client_token

Collect Payment Method Details

Now, you’re ready to collect payment details on the client with the Elements Client SDK. Element client SDK supports collecting payment details for a variety of payment methods with a prebuilt UI component which supports customized styles.

Set up Elements.js

<head>
  <title>Elements Web Vaulting</title>
  <script src="https://js.elements.io/v1/elements.js"></script>
</head>

// Include as module
import Elements from '@elementspay/elements-web-lib';
// Or include as script in html
const Elements = window.Elements;

const elements = Elements({
    environment: 'sandbox',
    clientKey: YOUR_CLIENT_KEY_HERE
});

Add Container

<body>
  <div id="checkout-demo-container">
    <div id="checkout-container">
      <div class="applepay-field"></div>
            <div class="googlepay-field"></div>
        </div>
    </div>
</body>

Mount Payment Method Component
When the container above has loaded, create an instance of the Apple Pay/Google Pay component and mount it to the container DOM node if available.

window.cm = elements.componentsManager();
// APPLE PAY
const applepay = cm.create('applePay', {
  // Payment info
  amount: { value: '0', currency: 'USD' },
  countryCode: 'US', // Required. The merchant’s two-letter ISO 3166 country code.
  // Merchant config (required)
  configuration: {
    merchantName: 'your merchant name', // Name to be displayed
    merchantId: 'your_merchant_id' // Required. https://developer.apple.com/documentation/apple_pay_on_the_web/applepayrequest/2951611-merchantidentifier
  },
  // log changes
  onChange: (state, component) => {
    console.log(state.applepay)
  },
  showPayButton: true,
});

// Check availability
applepay
    .isAvailable()
    .then(isAvailable => {
        // If Available mount it in the dom
        if (isAvailable) applepay.mount('.applepay-field');
    })
    .catch(e => {
    });

const googlepay = cm.create('googlePay', {
  amount: { value: '0', currency: 'USD' },
  // Payment info
  countryCode: 'US',
  // Merchant config (required)
  configuration: {
    gatewayMerchantId: 'merchant_id', // merchant id
    merchantName: 'merchant_name', // Name to be displayed
  },

  // Shopper info (optional)
  emailRequired: true,
  shippingAddressRequired: true,
  shippingAddressParameters: {}, // https://developers.google.com/pay/api/web/reference/object#ShippingAddressParameters
});

// Check availability
googlepay
  .isAvailable()
  .then(() => {
    googlepay.mount('.googlepay-field');
    })
  .catch(e => console.warn(e));

Vault Payment Method
Get the vaulted token which can be safely applied for the payment processing purpose.

applepay.on('authorized', function (event) {
  // Tokenized result
  event.tokenizationResponse.id
});

googlepay.on('authorized', function (event) {
  // Tokenized result
  event.tokenizationResponse.id
});

[Optional] Listen to Events Change
The pre-built component provides a list of events which you can listen to. So you have full control on what can happen after certain user actions.

applepay.on('cancel', function (event) {
});

applepay.on('log', function (event) {
});

applepay.on('error', function (event) {
    const { code, message, type } = event;
});

googlepay.on('cancel', function (event) {
});

googlepay.on('log', function (event) {
});

googlepay.on('error', function (event) {
    const { code, message, type } = event;
});