Pay button placement

By default, a payment component will render the pay button inside the iFrame and handle bank redirections. To hide the pay button inside the iFrame and display it on your website instead, outside the iFrame, follow the instructions below.

If your checkout page has a pay button already, you may want to hide the pay button rendered by our Drop-in component. It should not be possible to submit the payment until the user inputs all the necessary data (bank selected and additional information provided, if required by the bank). The Drop-in component emits events informing about the current state of user input and controls pay button activation.

If you decide to keep your own pay button outside the iFrame, then displaying our terms and conditions above your pay button is mandatory to comply with PSD2. That’s why mounting this component is added to the code below.

To initialise Volt Components that hide the pay button rendered inside the iFrame, use the code below.

const mode = "production" // sandbox/production
const volt = window.Volt({ mode })

function async init() {
  const response = await fetch(`https://api.your-page.com/create-volt-payment`)
  const payment = await response.json();
  
  const paymentContainer = volt.payment({
    payment,
    language: "pl", // optional - ISO 639-1
    country: "PL", // optional - ISO 3166
  })

  const payButton = document.getElementById("yourPayButton")
  payButton.disabled = true
  payButton.onclick = function() {
    paymentContainer.checkout() // this will trigger bank redirect
  }

  const paymentComponent = paymentContainer.createPayment({ 
    displayPayButton: false
  })

  paymentComponent.on('change', function(event) {
    payButton.disabled = !event.complete
  });

  paymentComponent.mount("#volt-payment-component");

  const termsComponent = paymentContainer.createTerms();

  termsComponent.mount("#volt-payment-terms"); // the element above pay button
}