# 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

``` ```CSS 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.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](/docs/dev-docs/reference-rebilly-instruments#rebillyinstruments.show): In the `instrument-ready` event, use the `RebillyInstruments.show('result')` to proceed to the auto result screen. ```JavaScript 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 = `

Thanks, ${billingAddress.firstName} ${billingAddress.lastName} please confirm your purchase

${_raw.paymentInstrument?.type || ' '} ${_raw.paymentInstrument.brand} ****** ${_raw.paymentInstrument?.last4}

`; 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. ```JavaScript 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 = `

${billingAddress.firstName} ${billingAddress.lastName} thanks for your purchase

👍 Approved

`; } else { form.innerHTML = `

Oops something went wrong

😞 Transaction was ${transactionResult}

`; } }); ``` ## Interactive example Preview iframe JavaScript ```js 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: { hideConfirmation: true, hideResult: true, }, }); RebillyInstruments.on('instrument-ready', (instrument) => { const { billingAddress, _raw } = instrument; const form = document.querySelector('.rebilly-instruments'); form.innerHTML = `