Developer docs
/
Integrate self-hosted payment forms
/
Examples
/
Custom confirm and results screens
Last updated
These docs are intended for a developer audience.Dismiss

Custom confirm and result screens

This example describes how to create full control of the confirm and result screens.

1. Add the library mounting points to your website

For this example only the required mounting point will be used. This makes the layout more compact.

<html>
  <body>
    <div id="app">
      <div class="form-wrapper">
        <section class="rebilly-instruments"></section>
      </div>
    </div>
  </body>
</html>

2. Add a custom confirm screen

  • Disable the confirm screen: set features.hideConfirmation to true.
  • Use RebillyInstruments.on() to access the instrument-ready event to capture the instrument once it is created.
  • Add your custom HTML.
  • Use RebillyInstruments.purchase() to process the transaction. This action must be triggered by a user input event, such as a click event. Handle the request accordingly.

If you do not want to customize the result screen, to use the built-in confirmation screen: In the instrument-ready event, use the RebillyInstruments.show('result') to proceed to the auto result screen.

RebillyInstruments.mount({
  publishableKey: 'pk_sandbox_123',
  organizationId: 'org-123',
  websiteId: 'my-website-id',
  apiMode: 'sandbox',
  features: {
    hideConfirmation: true,
  },
});

RebillyInstruments.on('instrument-ready', (instrument) => {
  const {billingAddress, _raw} = instrument;
  const form = document.querySelector('.rebilly-instruments');
  form.innerHTML = `
    <h1 class="rebilly-instruments-h1">Thanks, ${billingAddress.firstName} ${billingAddress.lastName} please confirm your purchase</h1>
    <h2 class="rebilly-instruments-h2">${_raw.paymentInstrument?.type || ' '} ${_raw.paymentInstrument.brand} ****** ${_raw.paymentInstrument?.last4}</h2>
    <button id="confirm">Confirm</button>
  `;

  const confirm = document.querySelector('#confirm');
  confirm.addEventListener('click', makePurchase);

  async function makePurchase() {
    try {
      confirm.disabled = true;
      confirm.innerText = 'Loading...';
      await RebillyInstruments.purchase(instrument);
    } catch (err) {
      console.log(err)
    } finally {
      confirm.disabled = false;
      confirm.innerText = 'Confirm';
    }
  }
});

3. Add a custom result screen

  • Disable the confirm screen: Set the features.hideResult to true.
  • Use RebillyInstruments.on() to access the purchase-completed event to capture the transaction once created.
  • Add your custom HTML.
  • Handle the response accordingly.
RebillyInstruments.mount({
  publishableKey: 'pk_sandbox_123',
  organizationId: 'org-123',
  websiteId: 'my-website-id',
  apiMode: 'sandbox',
  features: {
    hideConfirmation: true,
    hideResult: true,
  },
});

RebillyInstruments.on('purchase-completed', (result) => {
  const {billingAddress, result: transactionResult} = result.transaction;
  const form = document.querySelector('.rebilly-instruments');
  if (transactionResult === 'approved') {
    form.innerHTML = `
    <h1 class="rebilly-instruments-h1">${billingAddress.firstName} ${billingAddress.lastName} thanks for your purchase</h1>
    <h2 class="rebilly-instruments-h2">👍 Approved</h2>
  `;
  } else {
    form.innerHTML = `
    <h1 class="rebilly-instruments-h1">Oops something went wrong</h1>
    <h2 class="rebilly-instruments-h2">😞 Transaction was ${transactionResult}</h2>
  `;
  }
});

Interactive example

Previous page
Next page