Make a payment instrument available for future use

This example describes how to create a payment instrument and make it available for future payments. This is useful when you need to process payments that have a future date. To access this functionality directly, use RebillyInstrument.setup(instrument)

1. Add the library mounting points to your website

For this example, this is the only the required mounting point.

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. Change the transactionType to setup

By default transactionType is set to purchase, change this property to setup. You may provide any purchase data available to mount.
Copy
Copied
RebillyInstruments.mount({
  publishableKey: 'pk_sandbox_123',
  organizationId: 'org-123',
  websiteId: 'my-website-id',
  transactionType: 'setup',
  money: {
    amount: 0,
    currency: 'USD'
  },
});

3. Check the result of the setup transaction (optional)

Use RebillyInstruments.on() to access the setup-completed event and to capture the instrument and the transaction.
Copy
Copied
RebillyInstruments.on('setup-completed', (setup) => {
  // setup will contain instrument and transaction
  console.log('setup-completed', setup);
});