Apple Pay is currently only available for the Sync API.

Support for the Sell Anything API is in progress.

Step 1 - Get your merchant domain verified

  • Contact dev@rye.com with your merchant domain (ex - MERCHANT_DOMAIN.com)
  • dev@rye.com will email you with a merchant ID domain association text file
  • Host this file at: https://<MERCHANT_DOMAIN>/.well-known/apple-developer-merchantid-domain-association.txt
  • Reply to dev@rye.com letting us know that it’s hosted in production
    • Ensure that the text file is accessible when clicked on the link above
  • dev@rye.com will verify this file and reply with a confirmation email, containing your Apple Pay merchant subdomain name.

Step 2 - Use Rye Pay

When using Rye Pay, update the init method to include the following:

ryePay.init({
  // ...
  applePayInputParams: {
    cartId: '<CART_ID>', // READ NOTE BELOW
    displayShippingAddress: true,
    // variantId: '<VARIANT_ID>',
    merchantDisplayName: '<MERCHANT DISPLAY NAME ON THE APPLE PAY SHEET>',
    merchantDomain: '<YOUR APPLE PAY MERCHANT DOMAIN>', // This field will be sent by Rye
    applePayButtonStyles: { // Optional + all fields below are optional
      widthPixels: '500px',
      heightPixels: '200px',
      borderRadiusPixels: '50px',
      paddingPixels: '20px 20px', // y and x padding
      buttonColor: 'black', // 'black' | 'white' | 'white-outline'
      buttonType: 'buy' // 'plain' | 'add-money' | 'buy' | 'donate' | 'check-out' | 'book' | 'continue' | 'contribute' | 'order' | 'pay' | 'reload' | 'rent' | 'set-up' | 'subscribe' | 'support' | 'tip' | 'top-up'
    }
  },
});
  • Either cartId or variantId is required. If both are provided, cartId is selected.
  • Set displayShippingAddress if you want users to change shipping address and select shipping options on the Apple Pay sheet.
  • applePayButtonStyles is optional and can be used to customize the Apple Pay button.

Step 3 - Use the Apple Pay button

Add the following snippet to where you’d like to display the Apple Pay button:

<div id='rye-apple-pay'></div>

Please ensure you are testing on a Safari browser or your iPhone to see the Apple Pay button. The Apple Pay button will not be visible on any other browser.

Additional clientInformation

To understand what kind of payment was made via Rye Pay, you can do the following:

ryePay.init({
  // ...
  onCartSubmitted: (result, error, paymentType) => {
    console.log(paymentType); // Should be APPLE_PAY or GOOGLE_PAY or VAULT (for credit cards)
  },
})