Afterpay JS - Redirect Method

by afterpay

HTML

<script src="https://portal.sandbox.afterpay.com/afterpay.js" async></script>
<form>
  <table>
    <tr>
      <td>Your Region</td>
      <td>
        <select id="region" required>
          <option value="">Please Select</option>
          <option value="AU">AU (Australia)</option>
          <option value="NZ">NZ (New Zealand)</option>
          <option value="US">US (United States)</option>
        </select>
      </td>
    </tr>
    <tr>
      <td>Your Order Token</td>
      <td><input type="text" id="token" value="YOUR_TOKEN"></td>
    </tr>
    <tr>
      <th colspan="2"><input type="submit"></th>
    </tr>
  </table>
</form>

CSS

table td {
  font-family: sans-serif;
  padding: 2px 6px;
}

table th {
  text-align: right;
}

JavaScript

$('form').on('submit', function(event) {
	event.preventDefault();

	AfterPay.initialize({
  	countryCode: $('#region').val()
  });

	AfterPay.redirect({
  	token: $('#token').val()
  });
});

/**
 * If you see the Afterpay logo with an error message, it's working.
 * YOUR_TOKEN is an invalid token, so the error page is expected behaviour; it indicates that the Afterpay JS has loaded correctly.
 * If you replace YOUR_TOKEN with a real Sandbox Order Token, the appropriate Afterpay payment flow should initialise inside the preview frame.
 */