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.

HTMLCSS
Copy
Copied
<html>
  <body>
    <div id="app">
      <div class="form-wrapper">
        <section class="rebilly-instruments"></section>
      </div>
    </div>
  </body>
</html>
Copy
Copied
body, html {
  background: #f8fbfd;
  padding: 0;
  margin: 0;
}

#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

.form-wrapper {
  max-width: 700px;
  box-sizing: border-box;
  padding: 40px 0;
  margin: 0 auto;
}

.form-wrapper section {
  background: #ffffff;
  box-sizing: border-box;
  padding: 40px!important;
  border-radius: 6px;
  border: 1px solid #e8e8fb;
}

2. Add a custom confirm screen

  • Disable the confirm screen: set features.autoConfirmation to false.
  • 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.
Copy
Copied
RebillyInstruments.mount({
  publishableKey: 'pk_sandbox_123',
  organizationId: 'org-123',
  websiteId: 'my-website-id',
  apiMode: 'sandbox',
  features: {
    autoConfirmation: false,
  },
});

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.autoResult to false.
  • Use RebillyInstruments.on() to access the purchase-completed event to capture the transaction once created.
  • Add your custom HTML.
  • Handle the response accordingly.
Copy
Copied
RebillyInstruments.mount({
  publishableKey: 'pk_sandbox_123',
  organizationId: 'org-123',
  websiteId: 'my-website-id',
  apiMode: 'sandbox',
  features: {
    autoConfirmation: false,
    autoResult: false,
  },
});

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

JavaScriptHTMLCSS
Copy
Copied
import RebillyInstruments from '@rebilly/instruments';

RebillyInstruments.mount({
  publishableKey: 'pk_sandbox_123',
  organizationId: 'org-123',
  websiteId: 'my-website-id',
  apiMode: 'sandbox',
  items: [
    {
      planId: 'my-plan-id',
      quantity: 1,
    }
  ],
  features: {
    autoConfirmation: false,
    autoResult: false
  }
});

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';
    }
  }
});

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>
  `;
  }
});
Copy
Copied
<html>
  <body>
    <div id="app">
      <div class="form-wrapper">
        <section class="rebilly-instruments"></section>
      </div>
    </div>
  </body>
</html>
Copy
Copied
body, html {
  background: #f8fbfd;
  padding: 0;
  margin: 0;
}

#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

.form-wrapper {
  max-width: 700px;
  box-sizing: border-box;
  padding: 40px 0;
  margin: 0 auto;
}

.form-wrapper section {
  background: #ffffff;
  box-sizing: border-box;
  padding: 40px;
  border-radius: 6px;
  border: 1px solid #e8e8fb;
}